{{#if isLoading}}<div data-template-id="loading-screen"></div>{{/if}}
{{#if hasError}}<div data-template-id="error-screen"></div>{{/if}}
{{#if isLoaded}}
    <h1>{{i18n 'Largest Cities in'}} {{country}}, {{region}}</h1>

    <nav>
        <a href="#/{{i18n_Locale}}/">{{i18n 'Countries'}}</a>
        <a href="#/{{i18n_Locale}}/regions/{{country}}">{{i18n 'Regions'}}</a>
        <div class="ml-20" data-template-id="download-links" data-file-name="Cities"></div>
    </nav>

    <input data-filter-selector="table" placeholder="{{i18n 'Enter filter'}}">

    <table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
        <thead>
            <tr>
                <th>{{i18n 'Name'}}</th>
                <th>{{i18n 'Population'}}</th>
                <th>{{i18n 'Elevation'}}</th>
                <th>{{i18n 'Timezone'}}</th>
                <th>{{i18n 'Date Last Modified'}}</th>
            </tr>
        </thead>
        <tbody>
            {{#each cities}}
            <tr>
                <td>
                    <i class="{{lowerCase ../country}} flag"></i>
                    <a href="#/{{../i18n_Locale}}/city/{{geonames_id}}">{{name}}</a>
                </td>
                <td class="align-right" data-value="{{population}}">{{formatNumber population}}</td>
                <td class="align-right" data-value="{{elevation}}">{{formatNumber elevation}}</td>
                <td>{{timezone}}</td>
                <td class="align-right">{{formatDate modification_date}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
{{/if}}