<h3 v-if="isLoading" v-i18n="'Loading...'"></h3>

<p v-if="hasError"><span v-i18n="'Error'"></span> - {{ errorMessage }}</p>

<div v-if="isLoaded" class="flex-col">

<h1><span v-i18n="'Largest Cities in'"></span> {{ country }}, {{ region }}</h1>

<nav>

<a v-bind:href="'#/' + i18n_Locale + '/'" v-i18n="'Countries'"></a>

<a v-bind:href="'#/' + i18n_Locale + '/regions/' + country" v-i18n="'Regions'"></a>

<div class="ml-20" data-template-id="download-links"></div>

</nav>

<input data-filter-selector="table" placeholder="Enter filter" v-i18n-attr="'placeholder'">

<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">

<thead>

<tr>

<th v-i18n="'Name'"></th>

<th v-i18n="'Population'"></th>

<th v-i18n="'Elevation'"></th>

<th v-i18n="'Timezone'"></th>

<th v-i18n="'Date Last Modified'"></th>

</tr>

</thead>

<tbody>

<tr v-for="city in cities">

<td><i v-bind:class="country.toLowerCase() + ' flag'"></i><a v-bind:href="'#/' + i18n_Locale + '/city/' + city.geonames_id">{{ city.name }}</a></td>

<td class="align-right" v-bind:data-value="city.population" v-format-number="city.population"></td>

<td class="align-right" v-bind:data-value="city.elevation" v-format-number="city.elevation"></td>

<td>{{ city.timezone }}</td>

<td class="align-right" v-format-date="city.modification_date"></td>

</tr>

</tbody>

</table>

</div>