{% extends "./base.html" %}
{% load i18n aircox %}

{% block title %}{% translate "Statistics" %}{% endblock %}

{% block content-container %}
<div class="">

<form method="GET" class="box mt-3 mb-3">
    <h3 class="title is-3">{% translate "Filter by date" %}</h3>
    <div class="flex-row gap-3" style="align-items: flex-end">
        <div class="field mb-0">
            <label class="label">{% translate "from" %}</label>
            <input type="date" class="input" name="min_date" value="{{ min_date|date:"Y-m-d" }}"/>
        </div>
        <div class="field mb-0">
            <label class="label">{% translate "... to" %}</label>
            <input type="date" class="input" name="max_date" value="{{ max_date|date:"Y-m-d" }}"/>
        </div>
        <button class="button">{% translate "Apply" %}</button>
    </div>
</form>
<a-statistics class="column">
<template v-slot="{counts}">
    <table class="table is-hoverable is-fullwidth">
        <thead>
            <tr>
                <th>{% translate "Time" %}</th>
                <th>{% translate "Episode" %} / {% translate "Track" %}</th>
                <th>{% translate "Tags" %}</th>
            </tr>
        </thead>
        <tbody>
        {% regroup object_list by date.date as by_date %}
        {% for date, objects in by_date %}
            <tr>
                <th colspan="3">
                    {{ date|date:"l - d F Y" }}
                </th>
            </tr>
            {% for object in objects %}
            {% with object|is_diffusion as is_diff %}
            {% if is_diff %}
            <tr class="bg-main">
                <td>{{ object.start|time:"H:i" }} - {{ object.end|time:"H:i" }}</td>
                <td colspan="2">
                    <a href="{% url "episode-detail" slug=object.episode.slug %}" target="new">{{ object.episode|default:"" }}</a>
                </td>
            </tr>
            {% endif %}

            {% with object|get_tracks as tracks %}
            {% for track in tracks %}
                <tr {% if is_diff %}class="bg-main-light"{% endif %}>
                    {% if forloop.first %}
                    <td rowspan="{{ tracks|length }}">{{ object.start|time:"H:i" }} {% if object|is_diffusion %} - {{ object.end|time:"H:i" }}{% endif %}</td>
                    {% endif %}

                    <td>
                        {% if object.source %}{{ object.source }} / {% endif %}
                        {% include "aircox/widgets/track_item.html" with object=track %}
                    </td>
                    {% with track.tags.all|join:', ' as tags %}
                    <td>
                        {% if tags and tags.strip %}
                        <label class="checkbox">
                            <input type="checkbox" checked value="{{ tags|escape }}" name="data">
                            {{ tags }}
                        </label>
                        {% endif %}
                    </td>
                    {% endwith %}
                </tr>
            {% empty %}
                {% if is_diff %}
                <tr class="bg-main-light">
                    <td colspan="3">{% translate "No tracks" %}</td>
                </tr>
                {% endif %}
            {% endfor %}
            {% endwith %}

            {% endwith %}
            {% endfor %}

        {% endfor %}
        </tbody>
        <tfoot>
            <tr>
                <td class="is-size-6">{% translate "Totals" %}</td>
                <td colspan="2">
                    <span v-for="(count, tag) in counts" class="mr-4">
                        <b>[[ tag ]]</b>
                        [[ count ]]
                    </span>
                </td>
            </tr>
        </tfoot>
    </table>
</template>
</a-statistics>

</div>
{% endblock %}
