{% extends "agenda_culturel/page.html" %}

{% block title %}{% block og_title %}Lieux{% endblock %}{% endblock %}

{% load cache %}
{% load utils_extra %}
{% load static %}
{% load cat_extra %}
{% block entete_header %}
    {% css_categories %}
    <script src="/static/admin/js/vendor/jquery/jquery.js"></script>
    <script src="{% static 'location_field/leaflet/leaflet.js' %}"></script>
    <script src="{% static 'js/leaflet.markercluster.js' %}"></script>
    <link href="{% static 'location_field/leaflet/leaflet.css' %}" type="text/css" media="all" rel="stylesheet">
    <link href="{% static 'MarkerCluster.css' %}" type="text/css" media="all" rel="stylesheet">
    <link href="{% static 'MarkerCluster.pdl.css' %}" type="text/css" media="all" rel="stylesheet">
{% endblock %}

{% block fluid %}{% endblock %}

{% block content %}


<article>
    <header>
        {% if perms.agenda_culturel.change_place %}
        <div class="slide-buttons">
            <a href="{% url 'view_places_admin' %}" role="button" data-tooltip="Administrer les lieux">Administrer</a>
        </div>
        {% endif %}
        <h1>Les lieux</h1>
    </header>
    <div class="grid">
        <div id="map_location" style="width: 100%; aspect-ratio: 16/16"></div>


        <div class="vertical-max">
        {% with cache_timeout=user.is_authenticated|yesno:"300,6000" %}
        {% cache cache_timeout place_lists user.is_authenticated %}
        
        {% if object_list %}
        {% for place in object_list %}
            <h3><a href="{{ place.get_absolute_url }}">{{ place.name }}</a> — <a id="open-map-{{ place.id }}" href="#map_location" data-tooltip="afficher sur la carte">{% picto_from_name "map" %}</a></h3>
            <ul>
                <li><strong>Adresse&nbsp;:</strong> {% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}</li>
                <li><strong>Coordonnée GPS&nbsp;:</strong> {{ place.location }}</li>
                {% with place.nb_events_future as nb %}
                    {% if nb > 0 %}
                    <li>{{ nb }} événement{{ nb|pluralize }} à venir</li>
                    {% endif %}
                {% endwith %}
            </ul>
        {% endfor %}
        {% else %}
            <p>Il n'y a aucun lieu défini.</p>
        {% endif %}
        {% endcache %}
        {% endwith %}
        </div>
    </div>
</article>
</div>
<script>
    L.Icon.Default.imagePath = "{% static "images/" %}";
    var map = L.map('map_location');
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
    markerArray = [];
    var markers = L.markerClusterGroup({disableClusteringAtZoom:16});
    window.mMapping = {};
    {% if object_list %}
        {% for place in object_list %}
        markerArray.push(L.marker([{{ place.location|tocoords }}]).bindPopup('<a href="{{ place.get_absolute_url }}">{{ place.name }}</a><br />{% if place.address %}{{ place.address }}, {% endif %}{{ place.city }}'))
        markers.addLayer(markerArray[markerArray.length - 1]);
        window.mMapping[{{ place.id }}] = markerArray[markerArray.length - 1];
        window.jQuery('a#open-map-{{ place.id }}').click(function(){ 
                window.mMapping[{{ place.id }}].openPopup();
                map.panTo(window.mMapping[{{ place.id }}].getLatLng());
        });
        {% endfor %}
    {% endif %}
    map.addLayer(markers);
    //var group = L.featureGroup(window.markerArray).addTo(map);
    map.fitBounds(markers.getBounds());

</script>
{% endblock %}