{% extends "default.html" %}

{% block content %}
<div id="map" class="w-full" style="height: 50rem"></div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
<script>
    var map = L.map('map').setView(new L.LatLng(46.498, 2.197), 7);

    var googleSat = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    }).addTo(map);

    function loadGPX(trace, color, popup) {
        new L.GPX('/traces/' + trace, {
            async: true,
            marker_options: {
                iconSize: [11, 15],
                shadowSize: [16.6, 16.6],
                iconAnchor: [5.3, 15],
                shadowAnchor: [5.3, 15.6],
                startIconUrl: '/images/pin-icon-start.png',
                endIconUrl: '/images/pin-icon-end.png',
                shadowUrl: '/images/pin-shadow.png',
            },
            polyline_options: {
                color: color,
                opacity: 1,
                weight: 4,
                lineCap: 'round'
            }
        }).on('addpoint', function(e) {
            e.target.bindPopup(popup)
        }).addTo(map)
    }

    {% for trip in trips %}
        {% for trace in trip.traces %}
            loadGPX('{{ trace.path | safe }}', '{{ trip.color }}', "<b>{{ trip.type_as_string }} {{ trip.name }} de {{ trip.date }}</b><br>Distance : {{ trip.distance_format }}<br>Dénivelé: +{{ trip.elevation_positive_format }} | -{{ trip.elevation_negative_format }}<br><br><b>Segment {{ trace.name }}</b><br>Distance : {{ trace.distance_format }}<br>Dénivelé: +{{ trace.elevation_positive_format }} | -{{ trace.elevation_negative_format }}");
        {% endfor %}
    {% endfor %}
</script>
{% endblock content %}