{# Popular Tracks Widget Template #}
{% if posts is not empty %}
    <ol class="fedistream-widget__list fedistream-widget__list--tracks">
        {% for post in posts %}
            <li class="fedistream-widget__item" data-track-id="{{ post.id }}">
                <a href="{{ post.permalink }}" class="fedistream-widget__link">
                    {% if post.thumbnail %}
                        <img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-widget__image">
                    {% else %}
                        <span class="fedistream-widget__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>
                        </span>
                    {% endif %}
                    <span class="fedistream-widget__info">
                        <span class="fedistream-widget__title">{{ post.title }}</span>
                        {% if post.artist %}
                            <span class="fedistream-widget__artist">{{ post.artist }}</span>
                        {% endif %}
                    </span>
                    {% if post.play_count %}
                        <span class="fedistream-widget__plays">{{ post.play_count|number_format }}</span>
                    {% endif %}
                </a>
                <button type="button" class="fedistream-widget__play" data-track-id="{{ post.id }}" aria-label="{{ __('Play', 'wp-fedistream') }}">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                </button>
            </li>
        {% endfor %}
    </ol>
{% else %}
    <p class="fedistream-widget__empty">{{ __('No tracks yet.', 'wp-fedistream') }}</p>
{% endif %}