{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.css') }}">
{% endblock %}

{% block content %}
<div class="map-page">

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

    <header class="page-header map-page-header">
        <form class="collection-filter" method="get" action="{{ url_for('map.index') }}">
            <label for="collection-select" class="sr-only">{{ _("Collection") }}</label>
            <select id="collection-select" name="collection" onchange="this.form.submit()">
                <option value="" {% if not current_collection %}selected{% endif %}>
                    {{ _("Toutes les collections") }}
                </option>
                {% for c in collections %}
                <option value="{{ c }}" {% if c == current_collection %}selected{% endif %}>
                    {{ c }}
                </option>
                {% endfor %}
                <option value="__pois__" {% if current_collection == "__pois__" %}selected{% endif %}>
                    {{ _("Points d'intérêt") }}
                </option>
            </select>
        </form>
    </header>

</div>
{% endblock %}

{% block scripts %}
<script>
    window.MAP_CONFIG = {
        cardsUrl: "{{ url_for('map.cards_json') }}",
        poisUrl: "{{ url_for('map.pois_json') }}",
        currentCollection: {{ current_collection | tojson }},
        cardDetailUrlBase: "{{ url_for('home.card_detail', card_id='__ID__', back=current_path) }}",
        imageBaseUrl: "{{ url_for('home.images', filename='') }}"
    };
</script>
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.js') }}"></script>
<script src="{{ url_for('static', filename='js/map.js') }}"></script>
{% endblock %}