{% extends 'signage/_layout.html.twig' %}
{% import 'signage/_macros.html.twig' as sg %}

{% block signage_title %}Playlists{% endblock %}

{% block signage_content %}
{% set editor = is_granted('ROLE_SIGNAGE_EDITOR') %}
<div class="sg-header">
    <div>
        <h1 class="sg-title">Playlists</h1>
        <div class="sg-subtitle">Geordnete Folgen von Videos. Geräte spielen sie als Standard, per Termin oder sofort.</div>
    </div>
</div>

<div class="sg-grid">
    {% if editor %}
        <form method="post" action="{{ path('signage_playlist_new') }}" class="sg-card sg-new-card">
            <input type="hidden" name="_token" value="{{ csrf_token('signage_playlist_new') }}">
            <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-plus-circle"></i>Neue Playlist</h2></div>
            <div class="sg-card-body">
                <div class="mb-2">
                    <label class="form-label small mb-1" for="pl-name">Name</label>
                    <input type="text" name="name" id="pl-name" maxlength="200" class="form-control" required placeholder="z. B. Foyer Tagesprogramm" {{ playlists is empty ? 'autofocus' }}>
                </div>
                <details class="mb-3">
                    <summary class="small sg-muted">Kennung selbst festlegen</summary>
                    <input type="text" name="playlist_key" maxlength="100" pattern="[A-Za-z0-9_.:\-]{1,100}" class="form-control form-control-sm sg-mono mt-2" placeholder="wird sonst aus dem Namen gebildet" aria-label="Kennung">
                    <div class="form-text">Geht unverändert ins Manifest und lässt sich später nicht ändern.</div>
                </details>
                <button class="btn btn-primary w-100"><i class="fas fa-plus me-1"></i>Anlegen und bearbeiten</button>
            </div>
        </form>
    {% endif %}

    {% for p in playlists %}
        {% set items = p.items %}
        <article class="sg-card sg-playlist-card">
            <div class="sg-card-body">
                <div class="d-flex justify-content-between align-items-start gap-2">
                    <h2><a href="{{ path('signage_playlist_show', {id: p.id}) }}">{{ p.name }}</a></h2>
                    {% if p.empty %}<span class="sg-chip sg-chip-warn" title="Leere Playlists werden nicht veröffentlicht">leer</span>{% endif %}
                </div>
                <div class="sg-mono sg-muted sg-key-line">{{ p.playlistKey }}</div>
                <div class="sg-filmstrip sg-filmstrip-lg">
                    {% for item in items %}<span class="sg-c{{ item.media.id % 8 }}" data-sm-grow="{{ max(1, item.media.durationS ?? 1) }}" title="{{ item.media.name }}"></span>{% endfor %}
                </div>
                <div class="sg-device-foot">
                    <span><i class="fas fa-film"></i>{{ items|length }} Video{{ items|length != 1 ? 's' }}</span>
                    <span><i class="far fa-clock"></i>{{ sg.duration(p.totalDurationS) }}</span>
                    <span><i class="fas {{ p.volume == 0 ? 'fa-volume-mute' : 'fa-volume-up' }}"></i>{{ p.volume }} %</span>
                    <span title="Zuletzt geändert"><i class="fas fa-pen"></i>{{ p.updatedAt|date('d.m.Y', 'Europe/Berlin') }}</span>
                </div>
            </div>
        </article>
    {% endfor %}
</div>

{% if playlists is empty and not editor %}
    <div class="sg-card mt-3"><div class="sg-empty"><div class="sg-empty-icon"><i class="fas fa-layer-group"></i></div><div class="sg-empty-title">Noch keine Playlist</div></div></div>
{% endif %}
{% endblock %}