{% extends "base_list.html" %}

{% 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;
    }
</style>
{% endblock %}

{% block lists %}

{% if chart_type == "maloja" %}
{% include "scrobbles/_top_charts.html" %}
{% else %}

<div class="row">
    <div class="col-12">
        <div class="btn-group mb-3" role="group">
            {% if year %}<a href="?date={{year}}{% if month %}-{{month}}{% endif %}" class="btn btn-outline-secondary{% if not week and not day %} active{% endif %}">{{year}}{% if month %} {{month|date:"F"}}{% endif %}</a>{% endif %}
            {% if week %}<span class="btn btn-outline-secondary active">Week {{week}}</span>{% endif %}
            {% if day %}<span class="btn btn-outline-secondary active">{{day}}</span>{% 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>

<div class="row">
    {% 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.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.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.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.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' '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 %}

{% endif %}

{% endblock %}