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

{% block signage_title %}Videos{% endblock %}

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

{% block signage_content %}
{% set editor = is_granted('ROLE_SIGNAGE_EDITOR') %}
{% set total_bytes = rows|reduce((sum, r) => sum + r.media.size, 0) %}
<div class="sg-header">
    <div>
        <h1 class="sg-title">Videos</h1>
        <div class="sg-subtitle">
            <span class="sg-chip"><i class="fas fa-film"></i>{{ rows|length }} Videos</span>
            <span class="sg-chip"><i class="far fa-hdd"></i>{{ sg.bytes(total_bytes) }}</span>
        </div>
    </div>
</div>

{% if editor %}
    <div data-sg-uploader
         data-csrf="{{ csrf_token(upload_csrf_id) }}"
         data-chunk-bytes="{{ chunk_bytes }}"
         data-max-bytes="{{ max_bytes }}"
         data-start-url="{{ path('signage_media_upload_start') }}">
        <div class="sg-dropzone" data-dropzone role="button" tabindex="0" aria-label="Videos zum Hochladen auswählen">
            <span class="sg-dropzone-icon"><i class="fas fa-cloud-upload-alt"></i></span>
            <div>
                <div class="sg-dropzone-title">Videos hierher ziehen oder klicken zum Auswählen</div>
                <div class="sg-dropzone-hint">MP4, MOV, MKV, AVI, WebM und weitere Videodateien, bis {{ (max_bytes / 1073741824)|number_format(0) }} GB. Was nicht schon H.264 mit AAC ist (zum Beispiel MOV vom Handy), wird beim Hochladen in MP4 umgewandelt.</div>
            </div>
            <input type="file" accept="video/*,.mp4,.m4v,.mov,.qt,.mkv,.webm,.avi,.wmv,.mpeg,.mpg,.m2ts,.mts,.ts,.3gp,.flv,.ogv,.vob" multiple hidden>
        </div>
        <ul class="sg-queue" data-queue aria-live="polite"></ul>
    </div>
    <div class="sg-drop-overlay" aria-hidden="true"><div><i class="fas fa-cloud-upload-alt me-2"></i>Loslassen zum Hochladen</div></div>
{% endif %}

{% if rows is empty %}
    <div class="sg-card mt-4">
        <div class="sg-empty">
            <div class="sg-empty-icon"><i class="fas fa-film"></i></div>
            <div class="sg-empty-title">Noch keine Videos</div>
            <p class="mb-0">{{ editor ? 'Ziehe die ersten Videos in das Feld oben.' : 'Ein Bearbeiter kann hier Videos hochladen.' }}</p>
        </div>
    </div>
{% else %}
    <div class="sg-toolbar">
        <label class="sg-search">
            <i class="fas fa-search"></i>
            <input type="search" class="form-control" placeholder="Videos durchsuchen …" data-filter="#sg-media-grid" data-filter-empty="#sg-media-none" aria-label="Videos durchsuchen">
        </label>
        <select class="form-select w-auto" data-sort="#sg-media-grid" aria-label="Sortierung">
            <option value="uploaded:desc">Neueste zuerst</option>
            <option value="name:asc">Name A–Z</option>
            <option value="duration:desc">Längste zuerst</option>
            <option value="size:desc">Größte zuerst</option>
        </select>
    </div>

    <div class="sg-grid sg-grid-media" id="sg-media-grid">
        {% for row in rows %}
            {% set m = row.media %}
            <article class="sg-card sg-media-card"
                     data-filter-text="{{ m.name }} {{ m.videoCodec }} {{ m.uploadedBy }}"
                     data-sort-name="{{ m.name }}" data-sort-duration="{{ m.durationS ?? 0 }}" data-sort-size="{{ m.size }}" data-sort-uploaded="{{ m.uploadedAt|date('U') }}">
                {% if row.stored %}
                    <button type="button" class="sg-thumb p-0" data-hover-play data-video-preview="{{ path('signage_media_stream', {id: m.id}) }}" data-video-title="{{ m.name }}" aria-label="„{{ m.name }}“ abspielen">
                        <span class="sg-thumb-fallback"><i class="fas fa-film"></i></span>
                        {% if row.stored %}<img class="sg-poster" src="{{ path('signage_media_thumb', {id: m.id}) }}" alt="" loading="lazy" decoding="async">{% endif %}
                        <video muted playsinline preload="none" loop data-src="{{ path('signage_media_stream', {id: m.id}) }}"></video>
                        <span class="sg-thumb-play"><i class="fas fa-play"></i></span>
                        {% if m.durationS %}<span class="sg-thumb-badge">{{ sg.duration(m.durationS) }}</span>{% endif %}
                    </button>
                {% else %}
                    {{ sg.thumb(m, false) }}
                {% endif %}
                <div class="sg-card-body">
                    {% if editor %}
                        <form method="post" action="{{ path('signage_media_rename', {id: m.id}) }}" class="sg-inline-edit" title="Klicken zum Umbenennen">
                            <input type="hidden" name="_token" value="{{ csrf_token('signage_media_' ~ m.id) }}">
                            <input type="text" name="name" value="{{ m.name }}" maxlength="200" required aria-label="Name">
                            <button class="sg-icon-btn" title="Speichern (Enter)"><i class="fas fa-check"></i></button>
                        </form>
                    {% else %}
                        <div class="sg-inline-edit-static">{{ m.name }}</div>
                    {% endif %}
                    <div class="sg-media-meta">
                        <span class="sg-chip">{{ sg.format(m) }}</span>
                        <span class="sg-chip">{{ sg.bytes(m.size) }}</span>
                        {% if row.in_use %}<span class="sg-chip sg-chip-ok" title="In einer Playlist oder veröffentlichten Version verwendet"><i class="fas fa-link"></i>verwendet</span>{% endif %}
                        {% if not row.stored %}<span class="sg-chip sg-chip-bad"><i class="fas fa-exclamation-triangle"></i>Datei fehlt</span>{% endif %}
                    </div>
                    <div class="sg-media-foot">
                        <span title="{{ m.uploadedAt|date('d.m.Y H:i', 'Europe/Berlin') }} · sha256 {{ m.sha256 }}">{{ m.uploadedAt|date('d.m.Y', 'Europe/Berlin') }}{{ m.uploadedBy ? ' · ' ~ m.uploadedBy }}</span>
                        {% if editor %}
                            <form method="post" action="{{ path('signage_media_delete', {id: m.id}) }}" data-confirm="„{{ m.name }}“ löschen?" data-confirm-text="Die Datei wird endgültig entfernt." data-confirm-button="Löschen">
                                <input type="hidden" name="_token" value="{{ csrf_token('signage_media_' ~ m.id) }}">
                                <button class="sg-icon-btn is-danger" {{ row.in_use ? 'disabled' }} title="{{ row.in_use ? 'Wird verwendet – erst aus Playlists entfernen' : 'Löschen' }}"><i class="fas fa-trash-alt"></i></button>
                            </form>
                        {% endif %}
                    </div>
                </div>
            </article>
        {% endfor %}
    </div>
    <div class="sg-empty" id="sg-media-none" hidden>
        <div class="sg-empty-icon"><i class="fas fa-search"></i></div>
        <div class="sg-empty-title">Keine Treffer</div>
    </div>
{% endif %}
{% endblock %}