{% extends "base_list.html" %}
{% load urlreplace %}

{% block title %}Locations{% endblock %}

{% block head_extra %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

 <style>
    #map { height: 580px; }
</style>

 {% endblock %}

 {% block extra_js %}
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

 <script>
   var map = L.map('map').setView([{{object_list.0.lat}}, {{object_list.0.lon}}], 15);
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 20,
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
         referrerPolicy: 'origin'
     }).addTo(map);
   var marker = L.marker([{{object_list.0.lat}}, {{object_list.0.lon}}]).addTo(map);
   var latest_path = [
       {% for l in object_list %}
       [{{l.lat}}, {{l.lon}}]{% if not forloop.last %},{% endif %}
       {% endfor %}
   ]
   var path = L.polyline(latest_path, {color: 'red'}).addTo(map);
</script>
{% endblock %}

{% block lists %}

<div class="row">
        <div id="map"></div>
</div>
<div class="row">
    <p class="pagination">
        <span class="page-links">
            {% if page_obj.has_previous %}
            <a href="?{% urlreplace page=page_obj.previous_page_number %}">prev</a>
            {% endif %}
            <span class="page-current">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
            {% if page_obj.has_next %}
            <a href="?{% urlreplace page=page_obj.next_page_number %}">next</a>
            {% endif %}
        </span>
    </p>
    <hr />

    <div class="col-md">
        <div class="table-responsive">
            {% include "_scrobblable_list.html" %}
        </div>
    </div>

    <div class="pagination" style="margin-bottom:50px;">
        <span class="page-links">
            {% if page_obj.has_previous %}
            <a href="?{% urlreplace page=page_obj.previous_page_number %}">prev</a>
            {% endif %}
            <span class="page-current">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
            {% if page_obj.has_next %}
            <a href="?{% urlreplace page=page_obj.next_page_number %}">next</a>
            {% endif %}
        </span>
    </div>
</div>
{% endblock %}
