{% extends "base_list.html" %}

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

{% block lists %}
<div class="row">
    <h2>Top Artists</h2>

    <ul class="nav nav-tabs" id="artistTab" role="tablist">
        {% for chart_name in 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 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">Rank</th>
                            <th scope="col">Artist</th>
                            <th scope="col">Scrobbles</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for artist in artists %}
                        <tr>
                            <td>{{artist.rank}}</td>
                            <td><a href="{{artist.get_absolute_url}}">{{artist}}</a></td>
                            <td>{{artist.num_scrobbles}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div class="row">
    <h2>Top Tracks</h2>

    <ul class="nav nav-tabs" id="artistTab" role="tablist">
        {% for chart_name in 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 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">Rank</th>
                            <th scope="col">Artist</th>
                            <th scope="col">Track</th>
                            <th scope="col">Scrobbles</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for track in tracks %}
                        <tr>
                            <td>{{track.rank}}</td>
                            <td><a href="{{track.artist.get_absolute_url}}">{{track.artist}}</a></td>
                            <td><a href="{{track.get_absolute_url}}">{{track.title}}</a></td>
                            <td>{{track.num_scrobbles}}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}