{# Single track template #}
<article class="fedistream-single fedistream-single--track">
    <header class="fedistream-single__header fedistream-single__header--track">
        <div class="fedistream-single__artwork">
            {% if post.thumbnail %}
                <img src="{{ post.thumbnail }}" alt="{{ post.title|e('html_attr') }}" class="fedistream-single__image fedistream-single__image--track">
            {% else %}
                <div class="fedistream-single__placeholder fedistream-single__placeholder--track">
                    <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 %}
            <button type="button" class="fedistream-single__play-overlay" 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>
        </div>
        <div class="fedistream-single__info">
            <h1 class="fedistream-single__title">{{ post.title }}</h1>
            {% if post.artists is not empty %}
                <p class="fedistream-single__artists">
                    {% for artist in post.artists %}
                        <a href="{{ artist.link }}">{{ artist.name }}</a>{% if not loop.last %}, {% endif %}
                    {% endfor %}
                </p>
            {% endif %}
            {% if post.album %}
                <p class="fedistream-single__album">
                    {{ __('From', 'wp-fedistream') }} <a href="{{ post.album_link }}">{{ post.album }}</a>
                </p>
            {% endif %}
            <div class="fedistream-single__meta">
                {% if post.duration_formatted %}
                    <span class="fedistream-single__duration">{{ post.duration_formatted }}</span>
                {% endif %}
                {% if post.play_count %}
                    <span class="fedistream-single__plays">{{ post.play_count }} {{ post.play_count == 1 ? __('play', 'wp-fedistream') : __('plays', 'wp-fedistream') }}</span>
                {% endif %}
                {% if post.explicit %}
                    <span class="fedistream-badge fedistream-badge--explicit">{{ __('Explicit', 'wp-fedistream') }}</span>
                {% endif %}
            </div>
            {% if post.genres is not empty %}
                <div class="fedistream-single__genres">
                    {% for genre in post.genres %}
                        <a href="{{ genre.link }}" class="fedistream-tag">{{ genre.name }}</a>
                    {% endfor %}
                </div>
            {% endif %}
            {% if post.moods is not empty %}
                <div class="fedistream-single__moods">
                    {% for mood in post.moods %}
                        <a href="{{ mood.link }}" class="fedistream-tag fedistream-tag--mood">{{ mood.name }}</a>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </header>

    {% if post.audio_url %}
        <section class="fedistream-single__player">
            <div class="fedistream-player" data-track-id="{{ post.id }}" data-audio-url="{{ post.audio_url }}">
                <div class="fedistream-player__controls">
                    <button type="button" class="fedistream-player__btn fedistream-player__btn--play" aria-label="{{ __('Play', 'wp-fedistream') }}">
                        <svg class="fedistream-player__icon fedistream-player__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                        <svg class="fedistream-player__icon fedistream-player__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                    </button>
                </div>
                <div class="fedistream-player__progress">
                    <span class="fedistream-player__time fedistream-player__time--current">0:00</span>
                    <div class="fedistream-player__bar">
                        <div class="fedistream-player__bar-progress"></div>
                        <input type="range" class="fedistream-player__seek" min="0" max="100" value="0" aria-label="{{ __('Seek', 'wp-fedistream') }}">
                    </div>
                    <span class="fedistream-player__time fedistream-player__time--total">{{ post.duration_formatted|default('0:00') }}</span>
                </div>
                <div class="fedistream-player__volume">
                    <button type="button" class="fedistream-player__btn fedistream-player__btn--volume" aria-label="{{ __('Volume', 'wp-fedistream') }}">
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
                    </button>
                    <input type="range" class="fedistream-player__volume-slider" min="0" max="100" value="80" aria-label="{{ __('Volume', 'wp-fedistream') }}">
                </div>
            </div>
        </section>
    {% endif %}

    {% if post.content %}
        <section class="fedistream-single__content">
            <h2 class="fedistream-section__title">{{ __('About This Track', 'wp-fedistream') }}</h2>
            <div class="fedistream-single__description">
                {{ post.content|raw }}
            </div>
        </section>
    {% endif %}

    {% if post.lyrics %}
        <section class="fedistream-single__lyrics">
            <h2 class="fedistream-section__title">{{ __('Lyrics', 'wp-fedistream') }}</h2>
            <div class="fedistream-lyrics">
                {{ post.lyrics|nl2br }}
            </div>
        </section>
    {% endif %}

    {% if post.credits %}
        <section class="fedistream-single__credits">
            <h2 class="fedistream-section__title">{{ __('Credits', 'wp-fedistream') }}</h2>
            <div class="fedistream-credits">
                {{ post.credits|raw }}
            </div>
        </section>
    {% endif %}

    {% if post.license %}
        <section class="fedistream-single__license">
            <p class="fedistream-license">
                <strong>{{ __('License:', 'wp-fedistream') }}</strong>
                <a href="{{ post.license.link }}">{{ post.license.name }}</a>
            </p>
        </section>
    {% endif %}
</article>