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

{% block title %}Charts{% endblock %}

{% block head_extra  %}
<style>
 .container { margin-bottom:100px; }
 h2 { padding-top:20px; }
 .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 %}
<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/?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/?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/?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/?date={{ year }}-W'+w.padStart(2,'0');return false;">+</a>
</div>
<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>
{% if chart_type == "maloja" %}
{% include "scrobbles/_top_charts.html" %}
{% else %}
<div class="row">
    {% if charts.artist %}
    <div class="col-md">
        <h2>🎤 Top Artists</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Artist</th>
                        <th scope="col">Scrobbles</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.artist %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.artist.get_absolute_url}}">{{chart.artist.name}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.track %}
    <div class="col-md">
        <h2>🎵 Top Tracks</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Track</th>
                        <th scope="col">Scrobbles</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.track %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.track.get_absolute_url}}">{{chart.track.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.tv_series %}
    <div class="col-md">
        <h2>📺 Top TV Shows</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">TV Show</th>
                        <th scope="col">Episodes Watched</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.tv_series %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.tv_series.get_absolute_url}}">{{chart.tv_series.name}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.album %}
    <div class="col-md">
        <h2>💿 Top Albums</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Album</th>
                        <th scope="col">Scrobbles</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.album %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.album.get_absolute_url}}">{{chart.album.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.video %}
    <div class="col-md">
        <h2>🎬 Top Videos</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Video</th>
                        <th scope="col">Plays</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.video %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.video.get_absolute_url}}">{{chart.video.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.board_game %}
    <div class="col-md">
        <h2>🎲 Top Board Games</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Board Game</th>
                        <th scope="col">Plays</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.board_game %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.board_game.get_absolute_url}}">{{chart.board_game.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.book %}
    <div class="col-md">
        <h2>📚 Top Books</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Book</th>
                        <th scope="col">Pages Read</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.book %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.book.get_absolute_url}}">{{chart.book.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.food %}
    <div class="col-md">
        <h2>🍽️ Top Foods</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Food</th>
                        <th scope="col">Times Eaten</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.food %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.food.get_absolute_url}}">{{chart.food.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.podcast %}
    <div class="col-md">
        <h2>🎙️ Top Podcasts</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Podcast</th>
                        <th scope="col">Episodes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.podcast %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.podcast.get_absolute_url}}">{{chart.podcast.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% if charts.trail %}
    <div class="col-md">
        <h2>🥾 Top Trails</h2>
        <div class="table-responsive">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Trail</th>
                        <th scope="col">Hikes</th>
                    </tr>
                </thead>
                <tbody>
                    {% for chart in charts.trail %}
                    <tr>
                        <td>{{chart.rank}}</td>
                        <td><a href="{{chart.trail.get_absolute_url}}">{{chart.trail.title}}</a></td>
                        <td>{{chart.count}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}