{% extends '_base.html' %}


{% block content %}
    <article id="locate" class="clearfix">
        <header class="column-full clearfix">
            {% if not location %}
            <h1 class="article-header">Finding your current location&hellip;</h1>
            {% else %}
                {% if places %}
                <h1 class="article-header">Use your current location</h1>
                <p class="explainer">Your browser says you&rsquo;re in&hellip;</p>
                {% else %}
                <h1 class="article-header">We can't find you in {{ geo_data.root_geography.name }}.</h1>
                <p class="explainer">Are you located somewhere else? Try the search box instead.</p>
                {% endif %}
            {% endif %}
        </header>
        {% if places %}
        <section class="column-half">
            <ul class="location-list">
            {% for place in places %}
                <li>
                    <a href="/profiles/{{ place.geo_level }}-{{ place.geo_code }}/" class="card">
                        <span class="identifier">{{ place.geo_level }}</span>
                        {{ place.full_name }}
                    </a>
                </li>
            {% endfor %}
            </ul>
        </section>
        {% endif %}
    </article>
{% endblock %}

{% block body_javascript_extra %}
<script src="{{ STATIC_URL }}js/vendor/spin.min.js"></script>
<script>
var lat = '{{ location.lat }}',
    lon = '{{ location.lon }}';

// prepare spinner
$('body').append('<div id="body-spinner"></div>');
var spinnerTarget = document.getElementById('body-spinner');
    spinner = new Spinner();

function foundLocation(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    window.location = '{% url "locate" %}?lat=' + lat + '&lon=' + lon;
}

function noLocation() {
    alert('Sorry, your browser was unable to determine your location.')
}

if (navigator.geolocation && !lat && !lon) {
    spinner.spin(spinnerTarget);
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation, {timeout:10000});
}
</script>
{% endblock %}
