{% extends "base.html" %}

{% block title %}{{ _("Locations - Yaffo") }}{% endblock %}

{% block extra_styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/ol/10.3.1/ol.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='locations/list.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='components/kbd.css') }}">
{% endblock %}

{% from "components/page_header.html" import page_header %}

{% block content %}
<div class="locations-container">
    {% set header_actions %}
        <label class="filter-toggle">
            <input type="checkbox" id="filter-unnamed">
            <span>{{ _("Only show photos without location names") }}</span>
        </label>
    {% endset %}
    {% call page_header(_("Photo Locations"), actions=header_actions) %}
        {% trans %}Hold <kbd>Shift</kbd> and drag to select multiple clusters{% endtrans %}
    {% endcall %}

    <div class="map-layout">
        <div id="map"></div>

        <div id="selection-panel" class="selection-panel">
            <div id="selection-panel-content"></div>
        </div>
    </div>

    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer" aria-label="{{ _('Close') }}">×</a>
        <div id="popup-content" class="popup-content"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/ol/10.3.1/ol.js') }}"></script>
<script src="{{ url_for('static', filename='locations/list.js') }}"></script>
<script>
window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
    window.PHOTO_ORGANIZER.initLocationsMap(
        {{ locations | tojson }},
        i18n,
        window.APP_CONFIG
    );
});
</script>
{% endblock %}