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

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

{% block head_extra %}
<style>
    .container { margin-bottom: 100px; }
    h2 { padding-top: 20px; }
    .chart-section {
        margin-bottom: 2rem;
    }
    .nav-tabs {
        cursor: pointer;
    }
    .image-wrapper {
        contain: content;
    }
    .image-wrapper :hover {
        background: rgba(0,0,0,0.3);
    }
    .caption {
        position: fixed;
        top: 5px;
        left: 5px;
        padding: 3px;
        font-size: 90%;
        color: white;
        background: rgba(0,0,0,0.4);
    }
    .caption-medium {
        position: fixed;
        top: 5px;
        left: 5px;
        padding: 3px;
        font-size: 75%;
        color: white;
        background: rgba(0,0,0,0.4);
    }
    .caption-small {
        position: fixed;
        top: 5px;
        left: 5px;
        padding: 3px;
        font-size: 60%;
        color: white;
        background: rgba(0,0,0,0.4);
    }
</style>
{% endblock %}

{% block lists %}

{% block grid_view_button %}{% endblock %}

<div class="row mb-3">
    <div class="col-12">
        <a href="{% url 'charts:spotify-tracks' %}" class="btn btn-sm btn-outline-secondary">🎵 Spotify Tracks</a>
        <a href="{% url 'charts:bandcamp-tracks' %}" class="btn btn-sm btn-outline-secondary">🎵 Bandcamp Tracks</a>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="btn-group mb-3" role="group">
            <a href="?date={{ year }}" class="btn btn-outline-secondary{% if period_type == 'year' %} active{% endif %}">{{ year }}</a>
            {% if month %}
            <a href="?date={{ year }}-{{ month|stringformat:'02d' }}" class="btn btn-outline-secondary{% if period_type == 'month' %} active{% endif %}">{{ month_name }}</a>
            {% endif %}
            {% if week %}
            <a href="?date={{ year }}-W{{ week|stringformat:'02d' }}" class="btn btn-outline-secondary{% if period_type == 'week' %} active{% endif %}">Week {{ week }}</a>
            {% endif %}
            {% if day %}
            <a href="?date={{ year }}-{{ month|stringformat:'02d' }}-{{ day|stringformat:'02d' }}" class="btn btn-outline-secondary{% if period_type == 'day' %} active{% endif %}">{{ day }}</a>
            {% endif %}
        </div>
        <span class="ms-2">
            {% if period_type == "day" %}
                {% if prev_period %}<a href="{{ prev_period }}">&laquo; Last day</a>{% endif %}
                {% if prev_period and next_period %} | {% endif %}
                {% if next_period %}<a href="{{ next_period }}">Next day &raquo;</a>{% endif %}
            {% elif period_type == "week" %}
                {% if prev_period %}<a href="{{ prev_period }}">&laquo; Last week</a>{% endif %}
                {% if prev_period and next_period %} | {% endif %}
                {% if next_period %}<a href="{{ next_period }}">Next week &raquo;</a>{% endif %}
            {% elif period_type == "month" %}
                {% if prev_period %}<a href="{{ prev_period }}">&laquo; Last month</a>{% endif %}
                {% if prev_period and next_period %} | {% endif %}
                {% if next_period %}<a href="{{ next_period }}">Next month &raquo;</a>{% endif %}
            {% elif period_type == "year" %}
                {% if prev_period %}<a href="{{ prev_period }}">&laquo; Last year</a>{% endif %}
                {% if prev_period and next_period %} | {% endif %}
                {% if next_period %}<a href="{{ next_period }}">Next year &raquo;</a>{% endif %}
            {% endif %}
        </span>
    </div>
</div>

{% if period_type == "month" and month %}
<div class="row mb-2">
    <div class="col-12">
        <small class="text-muted me-2">Time machine:</small>
        {% for y in chart_years %}
        {% if y != year %}
        <a href="?date={{ y }}-{{ month|stringformat:'02d' }}" class="btn btn-xs btn-outline-secondary" style="padding:1px 4px;font-size:10px;">{{ y }}</a>
        {% endif %}
        {% endfor %}
    </div>
</div>
{% elif period_type == "week" and week %}
<div class="row mb-2">
    <div class="col-12">
        <small class="text-muted me-2">Time machine:</small>
        {% for y in chart_years %}
        {% if y != year %}
        <a href="?date={{ y }}-W{{ week|stringformat:'02d' }}" class="btn btn-xs btn-outline-secondary" style="padding:1px 4px;font-size:10px;">{{ y }}</a>
        {% endif %}
        {% endfor %}
    </div>
</div>
{% endif %}

{% include "scrobbles/_top_charts.html" %}

<div class="row mt-4">
    {% if charts.artist %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🎤 Top Artists</h3>
        <ul class="list-group">
            {% for chart in charts.artist|slice:":20" %}
            <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.artist.get_absolute_url}}">{{chart.artist.name}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'artist' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.album %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>💿 Top Albums</h3>
        <ul class="list-group">
            {% for chart in charts.album|slice:":20" %}
            <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.album.get_absolute_url}}">{{chart.album.name}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'album' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.tv_series %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>📺 Top TV Series</h3>
        <ul class="list-group">
            {% for chart in charts.tv_series|slice:":20" %}
            <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.tv_series.get_absolute_url}}">{{chart.tv_series.name}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'tv_series' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.track %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🎵 Top Tracks</h3>
        <ul class="list-group">
            {% for chart in charts.track|slice:":20" %}
            <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.track.get_absolute_url}}">{{chart.track.title}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'track' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.video %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🎬 Top Videos</h3>
        <ul class="list-group">
            {% for chart in charts.video|slice:":20" %}
            <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.video.get_absolute_url}}">{{chart.video.title}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'video' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.podcast %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🎙️ Top Podcasts</h3>
        <ul class="list-group">
            {% for chart in charts.podcast|slice:":20" %}
            <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.podcast.get_absolute_url}}">{{chart.podcast.name}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'podcast' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.board_game %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🎲 Top Board Games</h3>
        <ul class="list-group">
            {% for chart in charts.board_game|slice:":20" %}
            <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.board_game.get_absolute_url}}">{{chart.board_game.title}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'board_game' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.book %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>📚 Top Books</h3>
        <ul class="list-group">
            {% for chart in charts.book|slice:":20" %}
            <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.book.get_absolute_url}}">{{chart.book.title}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'book' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.food %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🍽️ Top Foods</h3>
        <ul class="list-group">
            {% for chart in charts.food|slice:":20" %}
            <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.food.get_absolute_url}}">{{chart.food.title}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'food' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.trail %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🥾 Top Trails</h3>
        <ul class="list-group">
            {% for chart in charts.trail|slice:":20" %}
            <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.trail.get_absolute_url}}">{{chart.trail.title}}</a>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'trail' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if charts.geo_location %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>📍 Top Locations</h3>
        <ul class="list-group">
            {% for chart in charts.geo_location|slice:":20" %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
                <span>{{chart.geo_location.name}}</span>
                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
            </li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:chart-detail' 'geo_location' %}">View all &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}

    {% if birds_chart %}
    <div class="col-md-6 col-lg-4 chart-section">
        <h3>🐦 Top Birds</h3>
        <ul class="list-group">
            {% for item in birds_chart %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span class="me-2"><strong>#{{ forloop.counter }}</strong></span>
                <a href="{{ item.bird.get_absolute_url }}">{{ item.bird.common_name }}</a>
                <span class="badge bg-success rounded-pill">{{ item.count }}</span>
            </li>
            {% empty %}
            <li class="list-group-item">No bird sightings this period.</li>
            {% endfor %}
            <li class="list-group-item">
                <a href="{% url 'charts:birds-chart' %}">View all birds &raquo;</a>
            </li>
        </ul>
    </div>
    {% endif %}
</div>

{% if not charts %}
<div class="alert alert-info">
    No chart data for this period. Charts are built asynchronously - check back later or trigger a chart rebuild.
</div>
{% endif %}

{% endblock %}