{% extends "base_list.html" %}

{% block title %}{{name}}{% 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 %}

{% if chart_type == "maloja" %}
{% include "scrobbles/_top_charts.html" %}
{% else %}
<div class="row">
    {% if artist_charts %}
    <div class="col-md">
        <div class="tab-content" id="artistTabContent">
            <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 artist_charts %}
                        <tr>
                            <td>{{chart.rank}}</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>
    </div>
    {% endif %}

    {% if track_charts %}
    <div class="col-md">
        <div class="tab-content" id="artistTabContent">
            <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 track_charts %}
                        <tr>
                            <td>{{chart.rank}}</td>
                            <td><a href="{{chart.media_obj.get_absolute_url}}">{{chart.media_obj.title}}</a></td>
                            <td>{{chart.count}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% endif %}

    {% if current_artist_charts %}
    <div class="col-md">
        <h2>Top Artists</h2>

        <ul class="nav nav-tabs" id="artistTab" role="tablist">
            {% for chart_name in current_artist_charts.keys %}
            <li class="nav-item" role="presentation">
                <button class="nav-link {% if forloop.first %}active{% endif %}" id="artist-{{chart_name}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{chart_name}}"
                        type="button" role="tab" aria-controls="home" aria-selected="true">
                    {% if chart_name == "all" %}All Time{% else %}{% if chart_name != "today" %}This {% endif %}{{chart_name|capfirst}}{% endif %}
                </button>
            </li>
            {% endfor %}
        </ul>

        <div class="tab-content" id="artistTabContent">
            {% for chart_name, artists in current_artist_charts.items %}
            <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="artist-{{chart_name}}" role="tabpanel"
                aria-labelledby="artist-{[chart}}-tab">
                <div class="table-responsive">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th scope="col">Artist</th>
                                <th scope="col">Scrobbles</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for artist in artists %}
                            <tr>
                                <td><a href="{{artist.get_absolute_url}}">{{artist}}</a></td>
                                <td>{{artist.num_scrobbles}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    {% if current_track_charts %}
    <div class="col-md">
        <h2>Top Tracks</h2>

        <ul class="nav nav-tabs" id="artistTab" role="tablist">
            {% for chart_name in current_track_charts.keys %}
            <li class="nav-item" role="presentation">
                <button class="nav-link {% if forloop.first %}active{% endif %}" id="track-{{chart_name}}-tab" data-bs-toggle="tab" data-bs-target="#track-{{chart_name}}"
                        type="button" role="tab" aria-controls="home" aria-selected="true">
                    {% if chart_name == "all" %}All Time{% else %}{% if chart_name != "today" %}This {% endif %}{{chart_name|capfirst}}{% endif %}
                </button>
            </li>
            {% endfor %}
        </ul>

        <div class="tab-content" id="trackTabContent">
            {% for chart_name, tracks in current_track_charts.items %}
            <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="track-{{chart_name}}" role="tabpanel"
                aria-labelledby="track-{[chart_name}}-tab">
                <div class="table-responsive">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th scope="col">Track</th>
                                <th scope="col">Artist</th>
                                <th scope="col">Scrobbles</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for track in tracks %}
                            <tr>
                                <td><a href="{{track.get_absolute_url}}">{{track.title}}</a></td>
                                <td><a href="{{track.artist.get_absolute_url}}">{{track.artist}}</a></td>
                                <td>{{track.num_scrobbles}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

{% endblock %}