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

{% block title %}Global Charts{% if period_str %} - {{ period_str }}{% endif %}{% endblock %}

{% block lists %}
<div class="row mb-3">
    <div class="col-auto">
        {% if prev_period %}
        <a href="{{ prev_period }}" class="btn btn-outline-secondary btn-sm">← Previous</a>
        {% endif %}
    </div>
    <div class="col-auto text-center">
        <span class="badge bg-secondary">{{ period_type|title }}</span>
    </div>
    <div class="col-auto">
        {% if next_period %}
        <a href="{{ next_period }}" class="btn btn-outline-secondary btn-sm">Next →</a>
        {% endif %}
    </div>
    <div class="col-auto ms-auto">
        {% if chart_years %}
        <div class="btn-group btn-group-sm">
            {% for y in chart_years|slice:":5" %}
            <a href="/charts/global/?date={{ y }}" class="btn btn-sm {% if year == y %}btn-primary{% else %}btn-outline-secondary{% endif %}">{{ y }}</a>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>
<div class="mb-2">
    <small class="text-muted me-2">Months:</small>
    {% for m in "1,2,3,4,5,6,7,8,9,10,11,12"|split:"," %}
    <a href="/charts/global/?date={{ year }}-{{ m|stringformat:"02d" }}" class="btn btn-xs {% if month == m %}btn-primary{% else %}btn-outline-secondary{% endif %}" style="padding:1px 4px;font-size:10px;">{{ m }}</a>
    {% endfor %}
    <span class="text-muted mx-2">|</span>
    <small class="text-muted me-2">Weeks:</small>
    {% for w in "1,4,8,13,17,21,26,30,34,39,43,47,52"|split:"," %}
    <a href="/charts/global/?date={{ year }}-W{{ w|stringformat:"02d" }}" class="btn btn-xs {% if week == w %}btn-primary{% else %}btn-outline-secondary{% endif %}" style="padding:1px 3px;font-size:9px;">{{ w }}</a>
    {% endfor %}
    <a href="#" class="btn btn-xs btn-outline-secondary" style="padding:1px 3px;font-size:9px;" onclick="var w=prompt('Week number (1-52):');if(w)this.href='/charts/global/?date={{ year }}-W'+w.padStart(2,'0');return false;">+</a>
</div>
<div class="row mb-3">
    <div class="col-12">
        <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">&larr; My Charts</a>
    </div>
</div>
<p class="text-muted">Gold, silver and bronze across all users who have opted in to global chart aggregation.</p>
<div class="row">
    {% for block in global_media %}
    {% if block.records %}
    <div class="col-md">
        <h2>{{ block.emoji }} {{ block.label }}</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <tbody>
                    {% for chart in block.records %}
                    <tr>
                        <td>{{ chart.rank_emoji }}</td>
                        <td><a href="{{ chart.media_obj.get_absolute_url }}">{{ chart.media_obj }}</a></td>
                        <td>{{ chart.count }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% endblock %}