{{#if isLoading}}<div data-template-id="loading-screen"></div>{{/if}}
{{#if hasError}}<div data-template-id="error-screen"></div>{{/if}}
{{#if isLoaded}}
    <h1>{{place.name}}</h1>

    <nav>
        <a href="#/{{i18n_Locale}}/">{{i18n 'Countries'}}</a>
        <a href="#/{{i18n_Locale}}/regions/{{place.country_code}}">{{i18n 'Regions'}}</a>
        <a href="#/{{i18n_Locale}}/cities/{{place.country_code}}/{{place.admin1_code}}">{{i18n 'Cities'}}</a>
    </nav>

    <!--
        This commented code is an example of how to
        loop through all properties in an object:

    <section class="form-fields">
        {{#each place}}
            <div>
                <label>{{@key}}</label>
                <span>{{this}}</span>
            </div>
        {{/each}}
    </section>
    -->

    <div class="place-screen">

        <section class="form-fields">
            <div>
                <label class="no-top-margin">{{i18n 'Name'}}</label>
                <span>{{place.name}}</span>
            </div>
            {{#ifCond place.name '!==' place.ascii_name}}
                <div>
                    <label>{{i18n 'ASCII Name'}}</label>
                    <span>{{place.ascii_name}}</span>
                </div>
            {{/ifCond}}
            <div>
                <label>{{i18n 'Country (ISO)'}}</label>
                <span>{{place.country_code}}</span>
                <i class="{{lowerCase place.country_code}} flag"></i>
            </div>
            <div>
                <label>{{i18n 'Region (State, Province, etc.)'}}</label>
                <span>{{place.admin1_code}}</span>
            </div>
            <div>
                <label>{{i18n 'Population'}}</label>
                <span>{{formatNumber place.population}}</span>
            </div>    
            <div>
                <label>{{i18n 'Elevation'}}</label>
                <span>{{formatNumber place.elevation}} m / {{formatNumber (js 'parseInt(model.place.elevation * 3.28084, 10)')}} &#039;</span>
            </div>
            <div>
                <label>{{i18n 'Latitude'}}</label>
                <span>{{place.latitude}}</span>
            </div>
            <div>
                <label>{{i18n 'Longitude'}}</label>
                <span>{{place.longitude}}</span>
            </div>
            <div>
                <label>{{i18n 'Timezone'}}</label>
                <span>{{place.timezone}}</span>
            </div>
            <div>
                <label>{{i18n 'Date Last Modified'}}</label>
                <span>{{formatDate place.modification_date}}</span>
            </div>
        </section>

        <section>
            <div
                data-leaflet
                data-latitude="{{place.latitude}}"
                data-longitude="{{place.longitude}}"
                data-zoom="11"
                data-marker="{{place.name}}">
            </div>
            <div class="map-links">
                <small><a href="https://www.openstreetmap.org#map=12/{{place.latitude}}/{{place.longitude}}" target="_blank">{{i18n 'View on OpenStreetMap'}}</a></small>
                <small><a href="https://www.google.com/maps/@{{place.latitude}},{{place.longitude}},12z" target="_blank">{{i18n 'View on Google Maps'}}</a></small>
            </div>
        </section>

        <!--
            Example:
            An alternative to using Leaflet and the Leaflet plugin
            is to use an OpenStreetMap <iframe> with templating.
        -->
        <!-- <section>
            <iframe width="400" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
                src="https://www.openstreetmap.org/export/embed.html?bbox={{js 'parseFloat(model.place.longitude) - 0.1'}}%2C{{js 'parseFloat(model.place.latitude) - 0.1'}}%2C{{js 'parseFloat(model.place.longitude) + 0.1'}}%2C{{js 'parseFloat(model.place.latitude) + 0.1'}}&amp;layer=mapnik"></iframe>
            <br/>
            <div class="map-links">
                <small><a href="https://www.openstreetmap.org#map=12/{{place.latitude}}/{{place.longitude}}" target="_blank">View on OpenStreetMap</a></small>
                <small><a href="https://www.google.com/maps/@{{place.latitude}},{{place.longitude}},12z" target="_blank">View on Google Maps</a></small>
            </div>
        </section> -->   
    </div>

    {{#if place.alternate_names.length}}
        <section class="alternate-names">
            <h2>{{i18n 'Alternate Names'}} ({{place.alternate_names.length}})</h2>

            {{#ifCond place.alternate_names.length '>' 10}}
                <input
                    data-filter-selector=".alternate-names li"
                    data-filter-results-text-selector="h2"
                    data-filter-results-text-all="{{i18n 'Alternate Names ({totalCount})'}}"
                    data-filter-results-text-filtered="{{i18n 'Showing {displayCount} of {totalCount} Alternate Names'}}"
                    placeholder="{{i18n 'Enter filter'}}">
            {{/ifCond}}

            <ul>
                {{#each place.alternate_names}}
                    <li>{{this}}</li>
                {{/each}}
            </ul>
        </section>
    {{/if}}
{{/if}}