{# Popular tracks list shortcode template #}
<div class="fedistream-shortcode fedistream-shortcode--tracks">
    {% if title %}
        <h3 class="fedistream-shortcode__title">{{ title }}</h3>
    {% endif %}

    {% if posts is not empty %}
        <div class="fedistream-tracklist fedistream-tracklist--numbered">
            {% for post in posts %}
                <div class="fedistream-tracklist__item" data-track-id="{{ post.id }}">
                    <span class="fedistream-tracklist__rank">{{ loop.index }}</span>
                    {% if post.thumbnail %}
                        <img src="{{ post.thumbnail }}" alt="" class="fedistream-tracklist__artwork">
                    {% else %}
                        <div class="fedistream-tracklist__artwork fedistream-tracklist__artwork--placeholder">
                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
                        </div>
                    {% endif %}
                    <div class="fedistream-tracklist__info">
                        <a href="{{ post.permalink }}" class="fedistream-tracklist__title">{{ post.title }}</a>
                        <span class="fedistream-tracklist__artist">
                            {% if post.artists is iterable %}
                                {% for artist in post.artists %}
                                    <a href="{{ artist.link }}">{{ artist.name }}</a>{% if not loop.last %}, {% endif %}
                                {% endfor %}
                            {% else %}
                                {{ post.artist }}
                            {% endif %}
                        </span>
                    </div>
                    {% if post.play_count %}
                        <span class="fedistream-tracklist__plays">{{ post.play_count|number_format }}</span>
                    {% endif %}
                    {% if post.duration_formatted %}
                        <span class="fedistream-tracklist__duration">{{ post.duration_formatted }}</span>
                    {% endif %}
                    <button type="button" class="fedistream-tracklist__play" aria-label="{{ __('Play', 'wp-fedistream') }}">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                    </button>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="fedistream-empty">
            <p>{{ __('No tracks found.', 'wp-fedistream') }}</p>
        </div>
    {% endif %}
</div>