{% extends "base_list.html" %}
{% load mathfilters %}
{% load static %}
{% load naturalduration %}
{% load l10n %}

{% block title %}{{object.title}}{% endblock %}

{% block head_extra %}
<style>
    .cover img {
        width: 250px;
    }

    .cover {
        float: left;
        width: 252px;
        padding: 0;
    }

    .summary {
        float: left;
        width: 600px;
        margin-left: 10px;
    }
    .pagination a { padding: 0 5px 0 5px; }
</style>
{% endblock %}

{% block lists %}

<div class="row">
    <div class="summary">
        {% if object.description%}
        <p>{{object.description|safe|linebreaks|truncatewords:160}}</p>
        <hr />
        {% endif %}
        <p style="float:right;">
            <a href="{{object.source_link}}"><img src="{% static "images/org-mode-logo.png" %}" width=35></a>
        </p>
    </div>
</div>

{% if weighin_chart %}
<div class="row mb-4">
    <div class="col-md-8">
        <canvas id="weighinChart" width="800" height="300"></canvas>
    </div>
</div>
{% endif %}

<div class="row">
    <p>{{scrobbles.count}} scrobbles</p>
    <p>
        <a href="{{object.start_url}}">Play again</a>
    </p>
</div>
<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">Title</th>
                        <th scope="col">Notes</th>
                        <th scope="col">Source</th>
                    </tr>
                </thead>
                <tbody>
                    {% for scrobble in scrobbles.all|dictsortreversed:"timestamp" %}
                    <tr>
                        <td><a href="{{scrobble.get_absolute_url}}">{{scrobble.local_timestamp}}</a></td>
                        <td><a href="{{scrobble.get_media_source_url}}">{{scrobble.logdata.title}}</a></td>
                        <td>{{scrobble.logdata.notes_as_str}}</td>
                        <td>{{scrobble.source}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {% if is_paginated %}
    <div class="pagination">
        {% if page_obj.has_previous %}
        <a href="?page={{ page_obj.previous_page_number }}">&laquo; Previous</a>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
        {% if num == page_obj.number %}
            <strong>{{ num }}</strong>
        {% else %}
            <a href="?page={{ num }}">{{ num }}</a>
        {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
        <a href="?page={{ page_obj.next_page_number }}">Next &raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{% if weighin_chart %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('weighinChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{ weighin_chart.labels|safe }},
        datasets: [
            {
                label: 'Weight',
                data: {{ weighin_chart.datasets.0.data|safe }},
                borderColor: '{{ weighin_chart.datasets.0.borderColor }}',
                backgroundColor: 'transparent',
                pointRadius: 2,
                fill: false,
                yAxisID: 'y',
            },
            {
                label: 'Body Fat %',
                data: {{ weighin_chart.datasets.1.data|safe }},
                borderColor: '{{ weighin_chart.datasets.1.borderColor }}',
                backgroundColor: 'transparent',
                pointRadius: 2,
                fill: false,
                yAxisID: 'y1',
            },
            {
                label: 'BMI',
                data: {{ weighin_chart.datasets.2.data|safe }},
                borderColor: '{{ weighin_chart.datasets.2.borderColor }}',
                backgroundColor: 'transparent',
                pointRadius: 2,
                fill: false,
                yAxisID: 'y2',
            },
        ]
    },
    options: {
        responsive: true,
        scales: {
            xAxes: [{
                ticks: { maxTicksLimit: 25, maxRotation: 45 },
            }],
            yAxes: [
                { id: 'y', type: 'linear', position: 'left', scaleLabel: { display: true, labelString: 'Weight' } },
                { id: 'y1', type: 'linear', position: 'right', scaleLabel: { display: true, labelString: 'Body Fat %' }, gridLines: { display: false } },
                { id: 'y2', type: 'linear', position: 'right', scaleLabel: { display: true, labelString: 'BMI' }, gridLines: { display: false } },
            ]
        },
        legend: { position: 'bottom' },
    }
});
</script>
{% endif %}
{% endblock %}