{# Now Playing Widget Template #}
<div class="fedistream-now-playing" data-widget="now-playing">
    <div class="fedistream-now-playing__idle">
        <span class="fedistream-now-playing__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>
        <span class="fedistream-now-playing__message">{{ __('Nothing playing', 'wp-fedistream') }}</span>
    </div>
    <div class="fedistream-now-playing__active" style="display: none;">
        <div class="fedistream-now-playing__track">
            <img src="" alt="" class="fedistream-now-playing__artwork">
            <div class="fedistream-now-playing__info">
                <span class="fedistream-now-playing__title"></span>
                <span class="fedistream-now-playing__artist"></span>
            </div>
        </div>
        {% if show_player %}
            <div class="fedistream-now-playing__controls">
                <button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--prev" aria-label="{{ __('Previous', 'wp-fedistream') }}">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
                </button>
                <button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--play" aria-label="{{ __('Play/Pause', 'wp-fedistream') }}">
                    <svg class="fedistream-now-playing__icon fedistream-now-playing__icon--play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                    <svg class="fedistream-now-playing__icon fedistream-now-playing__icon--pause" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                </button>
                <button type="button" class="fedistream-now-playing__btn fedistream-now-playing__btn--next" aria-label="{{ __('Next', 'wp-fedistream') }}">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
                </button>
            </div>
            <div class="fedistream-now-playing__progress">
                <div class="fedistream-now-playing__bar">
                    <div class="fedistream-now-playing__bar-progress"></div>
                </div>
                <div class="fedistream-now-playing__times">
                    <span class="fedistream-now-playing__time fedistream-now-playing__time--current">0:00</span>
                    <span class="fedistream-now-playing__time fedistream-now-playing__time--total">0:00</span>
                </div>
            </div>
        {% endif %}
    </div>
</div>