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

{% block signage_title %}{{ playlist.name }}{% endblock %}

{% block signage_javascripts %}
    <script src="{{ asset('js/admin/signage-playlist.js') }}?v={{ sg_v }}" defer></script>
{% endblock %}

{% block signage_content %}
{% set editor = is_granted('ROLE_SIGNAGE_EDITOR') %}
{% set token = csrf_token('signage_playlist_' ~ playlist.id) %}
{% set items = playlist.items %}

<a href="{{ path('signage_playlist_index') }}" class="sg-back"><i class="fas fa-arrow-left"></i>Alle Playlists</a>
<div class="sg-header">
    <div>
        <h1 class="sg-title">{{ playlist.name }}</h1>
        <div class="sg-subtitle">
            <span class="sg-chip sg-mono">{{ playlist.playlistKey }}</span>
            <span class="sg-chip"><i class="far fa-calendar-alt"></i>in {{ event_count }} Termin{{ event_count != 1 ? 'en' }}</span>
            <span class="sg-chip"><i class="fas {{ playlist.volume == 0 ? 'fa-volume-mute' : 'fa-volume-up' }}"></i>{{ playlist.volume }} %</span>
        </div>
    </div>
</div>

<div class="sg-editor{{ editor ? ' sg-editable' }}" data-playlist-editor data-editable="{{ editor ? '1' : '0' }}"
     data-arrange-url="{{ path('signage_playlist_item_arrange', {id: playlist.id}) }}" data-csrf="{{ token }}">
    <div class="sg-stack">
        <section class="sg-card">
            <div class="sg-card-header">
                <h2 class="sg-card-title"><i class="fas fa-list-ol"></i>Ablauf</h2>
                {% if editor %}<span class="sg-savestate" data-save-state><i class="fas fa-check"></i> Änderungen werden automatisch gespeichert</span>{% endif %}
            </div>
            <div class="sg-card-body">
                <div class="sg-sequence-head">
                    <div class="sg-sequence-total">
                        <span><b data-total-count>{{ items|length }}</b> Videos</span>
                        <span>Gesamtdauer <b data-total-duration>{{ sg.duration(playlist.totalDurationS) }}</b></span>
                    </div>
                    {% if editor %}<span class="small sg-muted d-none d-md-inline"><i class="fas fa-hand-pointer me-1"></i>Zum Sortieren ziehen · Videos aus der Bibliothek hineinziehen</span>{% endif %}
                </div>
                <div class="sg-filmstrip sg-filmstrip-lg mb-3" data-filmstrip></div>

                <div class="sg-drop-area{{ items is empty ? ' is-empty' }}" data-drop-area>
                    <ol class="sg-seq" data-sequence>
                        {% for item in items %}
                            {% set m = item.media %}
                            <li class="sg-item" data-item="{{ item.id }}" data-media="{{ m.id }}" data-name="{{ m.name }}" data-duration="{{ m.durationS ?? 0 }}"
                                data-meta="{{ sg.duration(m.durationS) }} · {{ sg.format(m) }}" data-thumb="{{ path('signage_media_stream', {id: m.id}) }}" data-poster="{{ path('signage_media_thumb', {id: m.id}) }}">
                                {% if editor %}
                                    <button type="button" class="sg-handle" data-drag-handle title="Ziehen oder mit Pfeiltasten verschieben" aria-label="„{{ m.name }}“ verschieben (Pfeiltasten)"><i class="fas fa-grip-vertical"></i></button>
                                {% else %}<span></span>{% endif %}
                                <span class="sg-index">{{ loop.index }}</span>
                                {{ sg.thumb(m) }}
                                <div class="sg-minw-0">
                                    <div class="sg-item-name" data-slot="name">{{ m.name }}</div>
                                    <div class="sg-item-meta" data-slot="meta">{{ sg.duration(m.durationS) }} · {{ sg.format(m) }}</div>
                                </div>
                                <div class="sg-item-actions">
                                    {% if editor %}
                                        {% for action, cfg in {up: ['fa-arrow-up', 'Nach oben'], down: ['fa-arrow-down', 'Nach unten']} %}
                                            <form method="post" action="{{ path('signage_playlist_item_action', {id: playlist.id, itemId: item.id, action: action}) }}">
                                                <input type="hidden" name="_token" value="{{ token }}">
                                                <button class="sg-icon-btn" data-action="{{ action }}" title="{{ cfg[1] }}" aria-label="{{ cfg[1] }}"
                                                    {{ (action == 'up' and loop.parent.loop.first) or (action == 'down' and loop.parent.loop.last) ? 'disabled' }}><i class="fas {{ cfg[0] }}"></i></button>
                                            </form>
                                        {% endfor %}
                                        <button type="button" class="sg-icon-btn" data-action="duplicate" title="Duplizieren" aria-label="Duplizieren"><i class="far fa-clone"></i></button>
                                        <form method="post" action="{{ path('signage_playlist_item_action', {id: playlist.id, itemId: item.id, action: 'remove'}) }}">
                                            <input type="hidden" name="_token" value="{{ token }}">
                                            <button class="sg-icon-btn is-danger" data-action="remove" title="Entfernen" aria-label="Entfernen"><i class="fas fa-times"></i></button>
                                        </form>
                                    {% endif %}
                                </div>
                            </li>
                        {% endfor %}
                    </ol>
                    <div class="sg-seq-empty">
                        <i class="fas fa-film"></i>
                        {% if editor %}<strong>Noch leer.</strong> Videos aus der Bibliothek hierher ziehen oder dort auf <i class="fas fa-plus d-inline sg-icon-sm"></i> klicken.{% else %}Diese Playlist enthält noch keine Videos.{% endif %}
                        <div class="small mt-1">Leere Playlists werden nicht veröffentlicht.</div>
                    </div>
                </div>
                <div class="visually-hidden" aria-live="polite" data-live></div>
            </div>
        </section>

        <section class="sg-card">
            <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-sliders-h"></i>Einstellungen</h2></div>
            <div class="sg-card-body">
                <form method="post" action="{{ path('signage_playlist_update', {id: playlist.id}) }}" class="row g-3 align-items-end">
                    <input type="hidden" name="_token" value="{{ token }}">
                    <div class="col-md-6">
                        <label class="form-label" for="pl-name">Name</label>
                        <input type="text" name="name" id="pl-name" value="{{ playlist.name }}" maxlength="200" class="form-control" {{ not editor ? 'disabled' }} required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" for="pl-volume">Lautstärke</label>
                        <div class="sg-volume">
                            <i class="fas fa-volume-down sg-muted"></i>
                            <input type="range" name="volume" id="pl-volume" min="0" max="100" step="5" value="{{ playlist.volume }}" class="form-range" data-output="#pl-volume-out" data-output-suffix=" %" {{ not editor ? 'disabled' }}>
                            <output id="pl-volume-out" for="pl-volume">{{ playlist.volume }} %</output>
                        </div>
                    </div>
                    {% if editor %}<div class="col-md-2"><button class="btn btn-primary w-100">Speichern</button></div>{% endif %}
                </form>
                {% if editor %}
                    <hr class="my-4">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <div class="small sg-muted">
                            {% if event_count > 0 %}Wird in {{ event_count }} Termin{{ event_count != 1 ? 'en' }} verwendet und kann deshalb nicht gelöscht werden.{% else %}Bereits veröffentlichte Versionen bleiben beim Löschen unverändert.{% endif %}
                        </div>
                        <form method="post" action="{{ path('signage_playlist_delete', {id: playlist.id}) }}" data-confirm="Playlist „{{ playlist.name }}“ löschen?" data-confirm-text="Die Videos selbst bleiben erhalten." data-confirm-button="Löschen">
                            <input type="hidden" name="_token" value="{{ token }}">
                            <button class="btn btn-outline-danger btn-sm" {{ event_count > 0 ? 'disabled' }}><i class="fas fa-trash-alt me-1"></i>Playlist löschen</button>
                        </form>
                    </div>
                {% endif %}
            </div>
        </section>
    </div>

    {% if editor %}
        <aside class="sg-card sg-library">
            <div class="sg-card-header">
                <h2 class="sg-card-title"><i class="fas fa-photo-video"></i>Bibliothek</h2>
                <a href="{{ path('signage_media_index') }}" class="small">Videos hochladen</a>
            </div>
            <div class="sg-card-body">
                {% if media is empty %}
                    <div class="sg-empty py-3">
                        <div class="sg-empty-icon"><i class="fas fa-cloud-upload-alt"></i></div>
                        <p class="mb-0">Noch keine Videos. Erst unter <a href="{{ path('signage_media_index') }}">Videos</a> hochladen.</p>
                    </div>
                {% else %}
                    <label class="sg-search">
                        <i class="fas fa-search"></i>
                        <input type="search" class="form-control form-control-sm" placeholder="Suchen …" data-filter="#sg-library" data-filter-empty="#sg-library-none" aria-label="Bibliothek durchsuchen">
                    </label>
                    <ul class="sg-lib-list" id="sg-library" data-library>
                        {% for m in media %}
                            <li class="sg-lib-item" data-media="{{ m.id }}" data-name="{{ m.name }}" data-duration="{{ m.durationS ?? 0 }}"
                                data-meta="{{ sg.duration(m.durationS) }} · {{ sg.format(m) }}" data-thumb="{{ path('signage_media_stream', {id: m.id}) }}" data-poster="{{ path('signage_media_thumb', {id: m.id}) }}"
                                data-filter-text="{{ m.name }}" title="Ziehen oder doppelklicken zum Hinzufügen">
                                {{ sg.thumb(m) }}
                                <div class="sg-minw-0">
                                    <div class="sg-item-name">{{ m.name }}</div>
                                    <div class="sg-item-meta">{{ sg.duration(m.durationS) }}{{ m.width ? ' · ' ~ m.width ~ '×' ~ m.height }}</div>
                                    <div class="sg-item-meta sg-lib-used" data-used hidden></div>
                                </div>
                                <button type="button" class="sg-add-btn" data-action="append" title="Ans Ende anhängen" aria-label="„{{ m.name }}“ ans Ende anhängen"><i class="fas fa-plus"></i></button>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="small sg-muted text-center" id="sg-library-none" hidden>Keine Treffer.</div>
                    <noscript>
                        <form method="post" action="{{ path('signage_playlist_item_add', {id: playlist.id}) }}" class="d-flex gap-2">
                            <input type="hidden" name="_token" value="{{ token }}">
                            <select name="media" class="form-select form-select-sm" required>
                                <option value="">– Video wählen –</option>
                                {% for m in media %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
                            </select>
                            <button class="btn btn-primary btn-sm">Hinzufügen</button>
                        </form>
                    </noscript>
                {% endif %}
            </div>
        </aside>

        <template data-item-template>
            <li class="sg-item">
                <button type="button" class="sg-handle" data-drag-handle title="Ziehen oder mit Pfeiltasten verschieben" aria-label="Verschieben (Pfeiltasten)"><i class="fas fa-grip-vertical"></i></button>
                <span class="sg-index"></span>
                <div class="sg-thumb" data-hover-play>
                    <span class="sg-thumb-fallback"><i class="fas fa-film"></i></span>
                    <img class="sg-poster" alt="" decoding="async">
                    <video muted playsinline preload="none" loop></video>
                </div>
                <div class="sg-minw-0">
                    <div class="sg-item-name" data-slot="name"></div>
                    <div class="sg-item-meta" data-slot="meta"></div>
                </div>
                <div class="sg-item-actions">
                    <button type="button" class="sg-icon-btn" data-action="up" title="Nach oben" aria-label="Nach oben"><i class="fas fa-arrow-up"></i></button>
                    <button type="button" class="sg-icon-btn" data-action="down" title="Nach unten" aria-label="Nach unten"><i class="fas fa-arrow-down"></i></button>
                    <button type="button" class="sg-icon-btn" data-action="duplicate" title="Duplizieren" aria-label="Duplizieren"><i class="far fa-clone"></i></button>
                    <button type="button" class="sg-icon-btn is-danger" data-action="remove" title="Entfernen" aria-label="Entfernen"><i class="fas fa-times"></i></button>
                </div>
            </li>
        </template>
    {% endif %}
</div>
{% endblock %}