{% extends "base_list.html" %}
{% load mathfilters %}
{% load static %}
{% load humanize %}

{% block title %}{{object.title}}{% 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: 280px; }
</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.lat}}, {{object.lon}}], 13);
    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);
   var marker = L.marker([{{object.lat}}, {{object.lon}}]).addTo(map);
</script>
{% endblock %}

{% block lists %}

<div class="row">
        <div id="map"></div>

    <p style="float:left; width:402px; padding:0; border: 1px solid #ccc">
    </p>
    <div style="float:left; width:600px; margin-left:10px; ">
        {% if object.summary %}
        <p>{{object.summary|safe|linebreaks|truncatewords:160}}</p>
        <hr />
        {% endif %}
        <p style="float:right;">
        </p>
    </div>
</div>
<div class="row">
    <p>{{scrobbles.count}} scrobbles</p>
<div class="row">
    <div class="col-md">
        <h3>Last scrobbles</h3>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Date</th>
                        <th scope="col">With</th>
                        <th scope="col">Notes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for scrobble in object.scrobble_set.all|dictsortreversed:"timestamp" %}
                    <tr>
                        <td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
                        <td>{% for person in scrobble.logdata.with_people%}{{person}}{% if not forloop.last %}, {% endif%}{% endfor %}</td>
                        <td>{% for note in scrobble.logdata.notes %}{{note}}{% if not forloop.last %}; {% endif%}{% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}