{% extends "base_list.html" %}

{% block title %}Spotify Tracks{% endblock %}

{% block head_extra %}
<style>
    .container { margin-bottom: 100px; }
</style>
{% endblock %}

{% block lists %}
<div class="row">
    <div class="col-12">
        <h2>🎵 Top Spotify Tracks</h2>
        <p class="text-muted">Shows tracks scrobbled from Spotify (either via Last.fm or directly from Spotify)</p>
    </div>
</div>

<div class="row">
    <div class="col-md-6 col-lg-4 chart-section">
        <ul class="list-group">
            {% for item in spotify_tracks %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span class="me-2"><strong>#{{ forloop.counter }}</strong></span>
                <a href="{{ item.track.get_absolute_url }}">{{ item.track.title }}</a>
                <span class="badge bg-success rounded-pill">{{ item.count }}</span>
            </li>
            {% empty %}
            <li class="list-group-item">No Spotify tracks found.</li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}