{% 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') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='filters/location-autocomplete.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='filters/filter_config.css') }}">
{% endblock %}

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

{% block content %}
{% from "_sidebar.html" import render_sidebar %}
<div class="main-container-layout">
    {{ render_sidebar(url_for('locations_list'), filters, filter_layout=filter_layout) }}
    <div class="main-content locations-container">
        {% call page_header(_("Photo Locations")) %}
            {% trans %}Hold <kbd>Shift</kbd> and click or 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>
</div>

{% from "filters/_config_modal.html" import filter_config_modal %}
{{ filter_config_modal(filter_layout, filter_default_keys, "locations") }}
{% 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 src="{{ url_for('static', filename='filters/location-autocomplete.js') }}"></script>
<script src="{{ url_for('static', filename='filters/filter_config.js') }}"></script>
<script src="{{ url_for('static', filename='filters/client_filter.js') }}"></script>
<script>
document.addEventListener('yaffo:app-init-complete', (event) => {
    const app = event.detail.app;
    app.locations.map = app.locations.initMap(
        {{ locations | tojson }},
        app.i18n,
        window.APP_CONFIG,
        { nearbyRadiusKm: {{ nearby_radius_km | tojson }} }
    );
    app.filters.initTags(app.i18n, window.APP_CONFIG);
    app.filters.initLocationAutocomplete(app.i18n, window.APP_CONFIG);
    app.filters.initConfig(app.i18n, window.APP_CONFIG);
    // The shared sidebar filters this page's markers in the browser — the form
    // never round-trips; Apply hands a predicate to the map.
    app.filters.initClientFilter({
        form: document.getElementById('filter-form'),
        distanceUnit: {{ filters.selected_distance_unit | tojson }},
        onApply: (predicate) => app.locations.map.setClientFilter(predicate),
    });
});
</script>
{% endblock %}