{% extends "base_list.html" %}

{% block title %}{{name}}{% endblock %}

{% block lists %}
<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">
                    {{chart_name}}
                </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">
                    {{chart_name}}
                </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>

{% endblock %}