{% extends "base_list.html" %}

{% block title %}{{ media_label }}{% if year %} - {{ year }}{% endif %}{% endblock %}

{% block head_extra %}
<style>
    .container { margin-bottom: 100px; }
</style>
{% endblock %}

{% block lists %}
<div class="row">
    <div class="col-12">
        <h2>{{ media_emoji }} {{ media_label }}</h2>
    </div>
</div>

<div class="row mb-3">
    <div class="col-12">
        <div class="btn-group" role="group">
            <a href="{% url 'charts:chart-detail' media_type %}" class="btn btn-outline-secondary{% if not year or year == today.year and not month and not week and not day %} active{% endif %}">All</a>
            {% for cy in chart_years %}
            <a href="{% url 'charts:chart-detail' media_type %}?date={{ cy }}" class="btn btn-outline-secondary{% if year == cy and not month and not week %} active{% endif %}">{{ cy }}</a>
            {% endfor %}
        </div>
        <a href="{% url 'charts:charts-home' %}" class="btn btn-outline-primary btn-sm ms-2">&laquo; All charts</a>
    </div>
</div>

<div class="row">
    <div class="col-md-8 col-lg-6">
        <ul class="list-group">
            {% for chart in page_charts %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span class="me-2"><strong>#{{ chart.rank }}</strong></span>
                <a href="{{ chart.media_obj.get_absolute_url }}">{{ chart.media_obj }}</a>
                <span class="badge bg-primary rounded-pill">{{ chart.count }}</span>
            </li>
            {% empty %}
            <li class="list-group-item">No chart data for this period.</li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}