46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
<div class="container">
|
|
<div class="map-column">
|
|
<h2>Interactive World Map</h2>
|
|
<div class="map-container">
|
|
<app-map-svg (countryClick)="onCountrySelected($event)"></app-map-svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-column">
|
|
<h2>Country Information</h2>
|
|
|
|
<div *ngIf="loading" class="loading">
|
|
Loading country data...
|
|
</div>
|
|
|
|
<div *ngIf="error" class="error">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<div *ngIf="countryData && !loading" class="country-info">
|
|
<div class="info-item">
|
|
<strong>Country Name:</strong> {{ countryData.name }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Capital:</strong> {{ countryData.capital }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Region:</strong> {{ countryData.region }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Income Level:</strong> {{ countryData.incomeLevel }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Longitude:</strong> {{ countryData.longitude }}
|
|
</div>
|
|
<div class="info-item">
|
|
<strong>Latitude:</strong> {{ countryData.latitude }}
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!countryData && !loading && !error" class="placeholder">
|
|
Click on a country to view its information
|
|
</div>
|
|
</div>
|
|
</div>
|