{% load static chart_tags %}

{% if maloja_charts %}
<div class="row">
    <h2>🎤 Top Artists</h2>
    <ul class="nav nav-tabs" id="artistTab" role="tablist">
        {% for key, name in chart_keys.items %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
                    id="artist-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{key}}"
                    type="button" role="tab">{{name}}</button>
        </li>
        {% endfor %}
    </ul>

    <div class="tab-content" id="artistTabContent" class="maloja-chart">
        {% for key, name in chart_keys.items %}
        {% with maloja_charts.artist|get_item:key as artists %}
        <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="artist-{{key}}" role="tabpanel">
            {% if artists.0 %}
            <div style="display:block">
                <div style="float:left;">
                    <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
                        <div class="caption">#1 {{artists.0.artist.name}}</div>
                        {% if artists.0.artist.thumbnail %}
                        <a href="{{artists.0.artist.get_absolute_url}}"><img alt="{{artists.0.artist.name}}" src="{{artists.0.artist.thumbnail_medium.url}}" width="300px"></a>
                        {% else %}
                        <a href="{{artists.0.artist.get_absolute_url}}"><img alt="{{artists.0.artist.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
                        {% endif %}
                    </div>
                </div>
                <div style="float:left; width:300px;">
                    <div style="display:flex; flex-wrap: wrap;">
                        {% for i in "2345" %}
                        {% with artists|get_item:forloop.counter as artist %}
                        {% if artist %}
                        <div class="image-wrapper" style="width:50%">
                            <div class="caption-medium">#{{forloop.counter|add:1}} {{artist.artist.name}}</div>
                            {% if artist.artist.thumbnail %}
                            <a href="{{artist.artist.get_absolute_url}}"><img src="{{artist.artist.thumbnail_medium.url}}" width="150px"></a>
                            {% else %}
                            <a href="{{artist.artist.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endwith %}
                        {% endfor %}
                    </div>
                </div>
                <div style="float:left; width:300px;">
                    <div style="display:flex; flex-wrap: wrap;">
                        {% for i in "67891011121314" %}
                        {% with artists|get_item:forloop.counter|add:5 as artist %}
                        {% if artist %}
                        <div class="image-wrapper" style="width:33%">
                            <div class="caption-small">#{{forloop.counter|add:6}} {{artist.artist.name}}</div>
                            {% if artist.artist.thumbnail %}
                            <a href="{{artist.artist.get_absolute_url}}"><img src="{{artist.artist.thumbnail_medium.url}}" width="100px"></a>
                            {% else %}
                            <a href="{{artist.artist.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endwith %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% else %}
            <p class="text-muted">No data for this period</p>
            {% endif %}
        </div>
        {% endwith %}
        {% endfor %}
    </div>
</div>

<div class="row">
    <h2>🎵 Top Tracks</h2>
    <ul class="nav nav-tabs" id="trackTab" role="tablist">
        {% for key, name in chart_keys.items %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
                    id="track-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#track-{{key}}"
                    type="button" role="tab">{{name}}</button>
        </li>
        {% endfor %}
    </ul>

    <div class="tab-content" id="trackTabContent" class="maloja-chart">
        {% for key, name in chart_keys.items %}
        {% with maloja_charts.track|get_item:key as tracks %}
        <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="track-{{key}}" role="tabpanel">
            {% if tracks.0 %}
            <div style="display:block">
                <div style="float:left;">
                    <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
                        <div class="caption">#1 {{tracks.0.track.title}}</div>
                        {% if tracks.0.track.album.cover_image %}
                        <a href="{{tracks.0.track.get_absolute_url}}"><img src="{{tracks.0.track.album.cover_image_medium.url}}" width="300px"></a>
                        {% else %}
                        <a href="{{tracks.0.track.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="300px"></a>
                        {% endif %}
                    </div>
                </div>
                <div style="float:left; width:300px;">
                    <div style="display:flex; flex-wrap: wrap;">
                        {% for i in "2345" %}
                        {% with tracks|get_item:forloop.counter as track %}
                        {% if track %}
                        <div class="image-wrapper" style="width:50%">
                            <div class="caption-medium">#{{forloop.counter|add:1}} {{track.track.title}}</div>
                            {% if track.track.album.cover_image %}
                            <a href="{{track.track.get_absolute_url}}"><img src="{{track.track.album.cover_image_medium.url}}" width="150px"></a>
                            {% else %}
                            <a href="{{track.track.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endwith %}
                        {% endfor %}
                    </div>
                </div>
                <div style="float:left; width:300px;">
                    <div style="display:flex; flex-wrap: wrap;">
                        {% for i in "67891011121314" %}
                        {% with tracks|get_item:forloop.counter|add:5 as track %}
                        {% if track %}
                        <div class="image-wrapper" style="width:33%">
                            <div class="caption-small">#{{forloop.counter|add:6}} {{track.track.title}}</div>
                            {% if track.track.album.cover_image %}
                            <a href="{{track.track.get_absolute_url}}"><img src="{{track.track.album.cover_image_medium.url}}" width="100px"></a>
                            {% else %}
                            <a href="{{track.track.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endwith %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% else %}
            <p class="text-muted">No data for this period</p>
            {% endif %}
        </div>
        {% endwith %}
        {% endfor %}
    </div>
</div>

<div class="row">
    <h2>📺 Top TV Shows</h2>
    <ul class="nav nav-tabs" id="tvshowTab" role="tablist">
        {% for key, name in chart_keys.items %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
                    id="tvshow-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#tvshow-{{key}}"
                    type="button" role="tab">{{name}}</button>
        </li>
        {% endfor %}
    </ul>

    <div class="tab-content" id="tvshowTabContent" class="maloja-chart">
        {% for key, name in chart_keys.items %}
        {% with maloja_charts.tv_series|get_item:key as shows %}
        <div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="tvshow-{{key}}" role="tabpanel">
            {% if shows.0 %}
            <div style="display:block">
                <div style="float:left;">
                    <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
                        <div class="caption">#1 {{shows.0.tv_series.name}}</div>
                        {% if shows.0.tv_series.cover_image %}
                        <a href="{{shows.0.tv_series.get_absolute_url}}"><img alt="{{shows.0.tv_series.name}}" src="{{shows.0.tv_series.cover_medium.url}}" width="300px" height="300px" style="object-fit: cover"></a>
                        {% else %}
                        <a href="{{shows.0.tv_series.get_absolute_url}}"><img alt="{{shows.0.tv_series.name}}" src="{% static "images/not-found.jpg" %}" width="300px" height="300px" style="object-fit: cover"></a>
                        {% endif %}
                    </div>
                </div>
                <div style="float:left; width:300px;">
                    <div style="display:flex; flex-wrap: wrap;">
                        {% for i in "2345" %}
                        {% with shows|get_item:forloop.counter as show %}
                        {% if show %}
                        <div class="image-wrapper" style="width:50%">
                            <div class="caption-medium">#{{forloop.counter|add:1}} {{show.tv_series.name}}</div>
                            {% if show.tv_series.cover_image %}
                            <a href="{{show.tv_series.get_absolute_url}}"><img src="{{show.tv_series.cover_small.url}}" width="150px" height="150px" style="object-fit: cover"></a>
                            {% else %}
                            <a href="{{show.tv_series.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px" height="150px" style="object-fit: cover"></a>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endwith %}
                        {% endfor %}
                    </div>
                </div>
                <div style="float:left; width:300px;">
                    <div style="display:flex; flex-wrap: wrap;">
                        {% for i in "67891011121314" %}
                        {% with shows|get_item:forloop.counter|add:5 as show %}
                        {% if show %}
                        <div class="image-wrapper" style="width:33%">
                            <div class="caption-small">#{{forloop.counter|add:6}} {{show.tv_series.name}}</div>
                            {% if show.tv_series.cover_image %}
                            <a href="{{show.tv_series.get_absolute_url}}"><img src="{{show.tv_series.cover_small.url}}" width="100px" height="100px" style="object-fit: cover"></a>
                            {% else %}
                            <a href="{{show.tv_series.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px" height="100px" style="object-fit: cover"></a>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% endwith %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% else %}
            <p class="text-muted">No data for this period</p>
            {% endif %}
        </div>
        {% endwith %}
        {% endfor %}
    </div>
</div>
{% endif %}