<div id="content">
  <div id="header">
    <h1>Interactive Country Map</h1>
  </div>

  <div class="flex-container">
    <div id="map-container">
      <interactive-map (countryDataUpdated)="onCountryDataUpdated($event)"></interactive-map>
    </div>

    <div id="data-container">
      <ul *ngIf="countryData">
        <li>Country Name: {{ countryData.name }}</li>
        <li>Country Capital: {{ countryData.capitalCity }}</li>
        <li>Country Region: {{ countryData.region.value }}</li>
        <li>Income Level: {{ countryData.incomeLevel.value }}</li>
        <li>Country Code: {{ countryData.iso2Code }}</li>
        <li>Latitude and Longitude: {{ countryData.latitude }}, {{ countryData.longitude }}</li>
      </ul>
    </div>
  </div>

  <div id="footer"></div>
</div>
