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

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

{% block vendor_stylesheets %}<link rel="stylesheet" href="{{ asset('js/vendor/fullcalendar.min.css') }}">{% endblock %}

{% block signage_javascripts %}
    <script src="{{ asset('js/vendor/fullcalendar.min.js') }}" defer></script>
    <script src="{{ asset('js/vendor/fullcalendar-de.js') }}" defer></script>
    <script src="{{ asset('js/admin/signage-device.js') }}?v={{ sg_v }}" defer></script>
    <script src="{{ asset('js/admin/signage-calendar.js') }}?v={{ sg_v }}" defer></script>
{% endblock %}

{% set weekday_labels = {1: 'Mo', 2: 'Di', 3: 'Mi', 4: 'Do', 5: 'Fr', 6: 'Sa', 7: 'So'} %}
{% set source_labels = {'default': 'Standard', 'event': 'Termin', 'command': 'Sofort'} %}
{% set tz = zone.name %}

{% block signage_content %}
{% set s = status %}
{% set editor = is_granted('ROLE_SIGNAGE_EDITOR') %}
{% set admin = is_granted('ROLE_SIGNAGE_ADMIN') %}
{% set colors = {} %}
{% for p in draft.manifest.playlists %}{% set colors = colors|merge({('k' ~ p.id): loop.index0 % 8}) %}{% endfor %}
{% set can_publish = draft.errors is empty and draft_changed %}

<a href="{{ path('signage_device_index') }}" class="sg-back"><i class="fas fa-arrow-left"></i>Alle Geräte</a>
<div class="sg-header">
    <div>
        <h1 class="sg-title">{{ device.name }}</h1>
        <div class="sg-subtitle">
            {{ sg.reachability(s) }}
            <span class="sg-chip sg-mono">{{ device.deviceKey }}</span>
            <span class="sg-chip"><i class="fas {{ device.mode == 'split' ? 'fa-columns' : 'fa-clone' }}"></i>{{ device.mode == 'split' ? 'Zwei Bildschirme' : 'Gespiegelt' }}</span>
            <span class="sg-chip"><i class="fas {{ device.playback == 'browser' ? 'fa-tv' : 'fa-plug' }}"></i>{{ constant('App\\Entity\\Signage\\SignageDevice::PLAYBACKS')[device.playback] }}</span>
            {% for target in device.targets %}{{ sg.orientation(device.orientation(target), device.targets|length > 1 ? target ~ ': ') }}{% endfor %}
            <span class="sg-chip"><i class="far fa-clock"></i>{{ tz }}</span>
            {% if device.hostname %}<span class="sg-chip"><i class="fas fa-server"></i>{{ device.hostname }}</span>{% endif %}
            {% if device.playerVersion %}<span class="sg-chip"><i class="fas fa-code-branch"></i>Player {{ device.playerVersion }}</span>{% endif %}
        </div>
    </div>
    <div class="sg-actions">
        <a href="{{ path('signage_device_show', {id: device.id}) }}" class="btn btn-outline-secondary" title="Neu laden"><i class="fas fa-sync-alt"></i></a>
        {% if editor %}
            <form method="post" action="{{ path('signage_device_publish', {id: device.id}) }}"
                  data-confirm="Version {{ draft.manifest.version }} veröffentlichen?" data-confirm-text="Das Gerät holt die neue Version beim nächsten Abruf (≤ 15 s)." data-confirm-button="Veröffentlichen" data-confirm-variant="primary">
                <input type="hidden" name="_token" value="{{ csrf_token('signage_device_publish_' ~ device.id) }}">
                <button class="btn {{ can_publish ? 'btn-primary' : 'btn-outline-secondary' }} position-relative" {{ not can_publish ? 'disabled' }}
                        title="{{ draft.errors is not empty ? 'Entwurf hat Fehler – siehe Übersicht' : (not draft_changed ? 'Keine Änderungen gegenüber der veröffentlichten Version' : 'Änderungen veröffentlichen') }}">
                    {% if draft.errors is empty and not draft_changed %}<i class="fas fa-check me-1"></i>Veröffentlicht{% else %}<i class="fas fa-upload me-1"></i>Veröffentlichen{% endif %}
                    {% if can_publish %}<span class="position-absolute top-0 start-100 translate-middle p-1 bg-warning border border-light rounded-circle"><span class="visually-hidden">Ungespeicherte Änderungen</span></span>{% endif %}
                </button>
            </form>
        {% endif %}
    </div>
</div>

<nav class="sg-tabs" role="tablist" data-sg-tabs>
    <button type="button" class="active" data-bs-toggle="tab" data-bs-target="#tab-uebersicht" data-hash="uebersicht" role="tab"><i class="fas fa-chart-pie"></i>Übersicht</button>
    <button type="button" data-bs-toggle="tab" data-bs-target="#tab-kalender" data-hash="kalender" role="tab"><i class="far fa-calendar-alt"></i>Zeitplan <span class="sg-counter">{{ events|length }}</span></button>
    <button type="button" data-bs-toggle="tab" data-bs-target="#tab-einstellungen" data-hash="einstellungen" role="tab"><i class="fas fa-sliders-h"></i>Einstellungen</button>
    <button type="button" data-bs-toggle="tab" data-bs-target="#tab-versionen" data-hash="versionen" role="tab"><i class="fas fa-history"></i>Versionen <span class="sg-counter">{{ releases|length }}</span></button>
</nav>

<div class="tab-content">

{# ================= Übersicht ================= #}
<div class="tab-pane fade show active" id="tab-uebersicht" role="tabpanel">
    <div class="row g-3">
        <div class="col-xl-7">
            <section class="sg-card h-100">
                <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-upload"></i>Veröffentlichung</h2></div>
                <div class="sg-card-body d-flex flex-column gap-3">
                    {{ sg.release_steps(s) }}

                    {% if s.download and s.download.percent is not null and s.release_state == 'transferring' %}
                        <div>
                            <div class="d-flex justify-content-between small mb-1">
                                <span>Version {{ s.download.version ?? '?' }} wird übertragen · {{ s.download.missing ?? '?' }} Dateien fehlen</span>
                                <span class="sg-tabular">{{ sg.bytes(s.download.bytes_done) }} / {{ sg.bytes(s.download.bytes_total) }}</span>
                            </div>
                            <div class="sg-progress"><span data-sm-width="{{ s.download.percent }}"></span></div>
                        </div>
                    {% endif %}

                    {% if draft.errors is not empty %}
                        <div class="sg-publish is-error">
                            <i class="fas fa-exclamation-triangle fa-lg sg-text-bad"></i>
                            <div class="sg-publish-text">
                                <strong>Der Entwurf kann so nicht veröffentlicht werden</strong>
                                <ul class="mb-0 ps-3">{% for e in draft.errors %}<li>{{ e }}</li>{% endfor %}</ul>
                            </div>
                        </div>
                    {% elseif draft_changed %}
                        <div class="sg-publish is-changed">
                            <i class="fas fa-pen-nib fa-lg sg-text-accent"></i>
                            <div class="sg-publish-text">
                                <strong>{{ latest ? 'Änderungen gegenüber Version ' ~ latest.version : 'Noch nichts veröffentlicht' }}</strong>
                                Neue Version {{ draft.manifest.version }}: {{ draft.manifest.media|length }} Videos, {{ draft.manifest.playlists|length }} Playlists, {{ draft.manifest.events|length }} Termine.
                                {% if editor %}Oben rechts auf „Veröffentlichen“ klicken.{% endif %}
                            </div>
                        </div>
                    {% else %}
                        <div class="sg-publish">
                            <i class="fas fa-check-circle fa-lg sg-text-ok"></i>
                            <div class="sg-publish-text"><strong>Alles veröffentlicht</strong>Der Entwurf entspricht Version {{ latest.version }}.</div>
                        </div>
                    {% endif %}

                    <dl class="sg-meta">
                        <dt>Veröffentlicht</dt>
                        <dd>{% if latest %}Version {{ latest.version }} <span class="sg-muted">· {{ latest.createdAt|date('d.m.Y H:i', tz) }} · {{ latest.createdBy ?? 'system' }}</span>{% else %}–{% endif %}</dd>
                        <dt>Auf dem Gerät</dt>
                        <dd>aktiv {{ s.active_version ?? '–' }}{% if s.pending_version %} <span class="sg-muted">· ausstehend {{ s.pending_version }}</span>{% endif %}</dd>
                    </dl>
                </div>
            </section>
        </div>

        <div class="col-xl-5">
            <section class="sg-card h-100">
                <div class="sg-card-header">
                    <h2 class="sg-card-title"><i class="fas fa-satellite-dish"></i>Live vom Gerät</h2>
                    {% if s.last_heartbeat_at %}<span class="small sg-muted" title="{{ s.last_heartbeat_at|date('d.m.Y H:i:s', tz) }}">Rückmeldung <span data-relative-time="{{ s.last_heartbeat_at|date('U') }}">{{ s.last_heartbeat_at|date('H:i:s', tz) }}</span></span>{% endif %}
                </div>
                <div class="sg-card-body d-flex flex-column gap-3">
                    {% if not s.reachable and s.last_heartbeat_at %}
                        <div class="small sg-muted"><i class="fas fa-info-circle me-1"></i>Keine Rückmeldung seit über 2 Minuten. Das heißt nicht, dass die Wiedergabe steht.</div>
                    {% elseif not s.last_heartbeat_at %}
                        <div class="small sg-muted"><i class="fas fa-info-circle me-1"></i>Das Gerät hat sich noch nie gemeldet. Einrichtung siehe Tab „Einstellungen“.</div>
                    {% endif %}
                    <div class="sg-outputs">
                        {% for o in s.outputs %}
                            <div class="sg-output">
                                <span class="sg-output-icon"><i class="fas {{ o.alive ? 'fa-play sg-text-ok' : 'fa-pause sg-text-bad' }}"></i></span>
                                <div class="sg-output-body">
                                    <div class="sg-output-target">{{ o.target }} · {{ o.alive ? 'läuft' : 'steht' }}</div>
                                    <div class="sg-output-playlist">{{ playlist_names[o.playlist_id] ?? o.playlist_id ?? 'keine Playlist' }}</div>
                                    {% for e in o.errors %}<div class="small text-danger">{{ e }}</div>{% endfor %}
                                </div>
                                {% if o.source %}<span class="sg-chip {{ o.source == 'command' ? 'sg-chip-warn' : (o.source == 'event' ? 'sg-chip-accent') }}" title="{{ o.reference }}">{{ source_labels[o.source] ?? o.source }}</span>{% endif %}
                            </div>
                        {% else %}
                            <div class="sg-output"><span class="sg-output-icon"><i class="fas fa-question"></i></span><div class="sg-output-body small sg-muted">Keine Angaben.</div></div>
                        {% endfor %}
                    </div>
                    <div class="sg-stats">
                        <div class="sg-stat"><div class="sg-stat-label">Speicher frei</div><div class="sg-stat-value">{{ sg.bytes(s.disk_free_bytes) }}</div></div>
                        <div class="sg-stat"><div class="sg-stat-label">Uhrabweichung</div><div class="sg-stat-value">{{ s.clock_offset_s is not null ? s.clock_offset_s|number_format(1, ',', '.') ~ ' s' : '–' }}</div></div>
                        <div class="sg-stat"><div class="sg-stat-label">IP</div><div class="sg-stat-value small">{{ device.lastHeartbeatIp ?? '–' }}</div></div>
                    </div>
                    {% if s.errors is not empty %}
                        <ul class="sg-errors">{% for e in s.errors %}<li><i class="fas fa-exclamation-circle me-1"></i>{{ e }}</li>{% endfor %}</ul>
                    {% endif %}
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="sg-card">
                <div class="sg-card-header">
                    <h2 class="sg-card-title"><i class="fas fa-bolt"></i>Sofortwiedergabe</h2>
                    <span class="sg-card-hint">Spielt eine Playlist für begrenzte Zeit – unabhängig vom Kalender.</span>
                </div>
                <div class="sg-card-body">
                    {% if editor %}
                        {% if latest %}
                            <form method="post" action="{{ path('signage_device_command_start', {id: device.id}) }}" class="row g-3 align-items-end mb-4" data-command-form data-timezone="{{ tz }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('signage_device_command_' ~ device.id) }}">
                                {% set outputs = latest.manifest.device.outputs %}
                                <div class="col-auto">
                                    <label class="form-label small">Ausgabe</label>
                                    {% if outputs|length > 1 %}
                                        <div class="sg-segmented d-flex">
                                            {% for o in outputs %}
                                                <input type="radio" class="btn-check" name="target" id="cmd-target-{{ loop.index }}" value="{{ o.target }}" {{ loop.first ? 'checked' }}>
                                                <label for="cmd-target-{{ loop.index }}">{{ o.target }}</label>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <input type="hidden" name="target" value="{{ outputs[0].target ?? '' }}">
                                        <div class="form-control-plaintext py-1">{{ outputs[0].target ?? '–' }}</div>
                                    {% endif %}
                                </div>
                                <div class="col-md-4 col-lg-3">
                                    <label class="form-label small" for="cmd-playlist">Playlist <span class="sg-muted">(aus Version {{ latest.version }})</span></label>
                                    <select name="playlist" id="cmd-playlist" class="form-select">
                                        {% for key, name in published_playlists %}<option value="{{ key }}">{{ name }}</option>{% endfor %}
                                    </select>
                                </div>
                                <div class="col-auto">
                                    <label class="form-label small" for="cmd-minutes">Dauer</label>
                                    <div class="d-flex flex-wrap align-items-center gap-2">
                                        <div class="sg-quick">
                                            {% for m in [15, 30, 60, 120] %}<button type="button" data-minutes-preset="{{ m }}">{{ m < 60 ? m ~ ' min' : (m // 60) ~ ' h' }}</button>{% endfor %}
                                        </div>
                                        <div class="input-group sg-w-9">
                                            <input type="number" name="minutes" id="cmd-minutes" min="1" max="1440" value="30" class="form-control">
                                            <span class="input-group-text">min</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-auto">
                                    <button class="btn btn-warning"><i class="fas fa-play me-1"></i>Jetzt starten</button>
                                    <div class="small sg-muted mt-1" data-command-end></div>
                                </div>
                            </form>
                        {% else %}
                            <p class="sg-muted small">Erst eine Version veröffentlichen.</p>
                        {% endif %}
                    {% endif %}

                    <ul class="sg-list">
                        {% for row in commands %}
                            {% set c = row.command %}
                            {% set last = c.results|last %}
                            <li class="sg-list-item">
                                <div class="sg-list-main">
                                    <div class="sg-list-title">{{ playlist_names[c.playlistKey] ?? c.playlistKey }} <span class="sg-muted fw-normal">auf {{ c.target }}</span></div>
                                    <div class="sg-list-sub">
                                        <span>{{ c.issuedAt|date('d.m. H:i', tz) }} – {{ c.expiresAt|date('H:i', tz) }}</span>
                                        {% if c.lastState %}<span>Gerät: {{ c.lastState }} {{ c.lastStateAt|date('H:i:s', tz) }}{% if last and last.detail %} · {{ last.detail }}{% endif %}</span>{% endif %}
                                        <span class="sg-mono">{{ c.commandKey }}</span>
                                    </div>
                                    {% if row.open %}
                                        <div class="sg-progress mt-2 sg-maxw-360"><span data-progress-from="{{ c.issuedAt|date('U') }}" data-progress-until="{{ c.expiresAt|date('U') }}"></span></div>
                                    {% endif %}
                                </div>
                                <div class="sg-list-side">
                                    {% if row.open %}<span class="sg-chip sg-chip-warn"><span class="sg-dot is-warn"></span><span data-countdown="{{ c.expiresAt|date('U') }}">{{ row.state }}</span></span>{% else %}<span class="sg-chip">{{ row.state }}</span>{% endif %}
                                    {% if row.open and editor %}
                                        <form method="post" action="{{ path('signage_device_command_cancel', {id: device.id, commandId: c.id}) }}" data-confirm="Sofortwiedergabe beenden?" data-confirm-button="Beenden">
                                            <input type="hidden" name="_token" value="{{ csrf_token('signage_command_cancel_' ~ c.id) }}">
                                            <button class="btn btn-outline-danger btn-sm"><i class="fas fa-stop me-1"></i>Beenden</button>
                                        </form>
                                    {% endif %}
                                </div>
                            </li>
                        {% else %}
                            <li class="sg-muted small">Bisher keine Sofortaufträge.</li>
                        {% endfor %}
                    </ul>
                </div>
            </section>
        </div>
    </div>
</div>

{# ================= Zeitplan ================= #}
{% set cal_orientations = {} %}
{% for target in device.targets %}{% set cal_orientations = cal_orientations|merge({(target): device.orientation(target)}) %}{% endfor %}
<div class="tab-pane fade" id="tab-kalender" role="tabpanel">
    <section class="sg-card">
        <div class="sg-card-header">
            <h2 class="sg-card-title"><i class="far fa-calendar-check"></i>Planen
                <span class="sg-muted fw-normal small">{{ editor ? 'Playlist oder Video in den Kalender ziehen · Termin verschieben · Unterkante ziehen ändert das Ende' : 'nur Ansicht' }}</span>
            </h2>
            {% if device.targets|length > 1 %}
                <div class="sg-segmented d-flex" role="group" aria-label="Ausgabe">
                    {% for target in device.targets %}
                        <input type="radio" class="btn-check" name="cal-target" id="cal-target-{{ loop.index }}" value="{{ target }}" data-cal-target {{ loop.first ? 'checked' }}>
                        <label for="cal-target-{{ loop.index }}"><i class="fas fa-tv me-1"></i>{{ target }}</label>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        <div class="sg-card-body">
            <div class="sg-cal{{ editor ? ' has-side' }}">
                {% if editor %}
                    <aside class="sg-cal-side" data-cal-source>
                        <input type="search" class="form-control form-control-sm" placeholder="Playlist oder Video suchen …" data-filter="#sg-cal-items" data-filter-empty="#sg-cal-none" aria-label="Suchen">
                        <div id="sg-cal-items" class="sg-cal-items">
                            <div class="sg-cal-group">Playlists</div>
                            {% for p in playlists %}
                                <div class="sg-cal-item sg-c{{ colors['k' ~ p.playlistKey] ?? 6 }}{{ p.empty ? ' is-empty' }}" data-filter-text="{{ p.name }} {{ p.playlistKey }}"
                                     {% if not p.empty %}data-cal-item data-source="playlist" data-id="{{ p.id }}" data-title="{{ p.name }}" data-orientations="{{ p.orientations|join(' ') }}"{% endif %}
                                     title="{{ p.empty ? 'Leer – erst Videos hinzufügen' : 'In den Kalender ziehen' }}">
                                    <i class="sg-cal-swatch"></i><span class="sg-cal-item-name">{{ p.name }}</span>
                                    <small>{{ p.empty ? 'leer' : sg.duration(p.totalDurationS) }}</small>
                                </div>
                            {% endfor %}
                            <div class="sg-cal-group">Einzelne Videos</div>
                            {% for m in media %}
                                <div class="sg-cal-item is-video" data-cal-item data-source="media" data-id="{{ m.id }}" data-title="{{ m.name }}" data-orientations="{{ m.orientation in ['portrait', 'landscape'] ? m.orientation }}" data-filter-text="{{ m.name }}" title="In den Kalender ziehen – läuft in Schleife">
                                    <img class="sg-poster sg-cal-thumb" src="{{ path('signage_media_thumb', {id: m.id}) }}" alt="" loading="lazy" decoding="async">
                                    <span class="sg-cal-item-name">{{ m.name }}</span>
                                    <small>{{ m.durationS ? sg.duration(m.durationS) : '' }}</small>
                                </div>
                            {% else %}
                                <div class="small sg-muted px-2">Noch keine Videos.</div>
                            {% endfor %}
                            <div id="sg-cal-none" class="small sg-muted px-2" hidden>Nichts gefunden.</div>
                        </div>
                        <p class="small sg-muted mb-0">Ein Video wird als eigene Playlist „Video: …“ angelegt und läuft im Termin in Schleife.</p>
                    </aside>
                {% endif %}
                <div class="sg-cal-main" data-calendar
                     data-events-url="{{ path('signage_calendar_feed', {id: device.id}) }}"
                     data-edit-url="{{ path('signage_event_edit', {id: device.id, eventId: 999999999}) }}"
                     data-csrf="{{ editor ? csrf_token('signage_calendar_' ~ device.id) }}"
                     data-editable="{{ editor ? '1' : '0' }}"
                     data-timezone="{{ tz }}"
                     data-initial-date="{{ preview_from|date('Y-m-d', false) }}"
                     data-target="{{ device.targets|first }}"
                     data-orientations="{{ cal_orientations|json_encode }}"></div>
            </div>
            <p class="small sg-muted mt-3 mb-0"><i class="fas fa-info-circle me-1"></i>Lokale Gerätezeit ({{ tz }}). Änderungen werden sofort gespeichert und auf Überschneidungen geprüft, aufs Gerät kommen sie erst mit „Veröffentlichen“.</p>
        </div>
    </section>

    <section class="sg-card">
        <div class="sg-card-header">
            <h2 class="sg-card-title"><i class="fas fa-stream"></i>Was läuft wann? <span class="sg-muted fw-normal small">Vorschau des Entwurfs</span></h2>
            {% set step = preview_days ~ ' days' %}
            <form method="get" action="{{ path('signage_device_show', {id: device.id}) }}#kalender" class="sg-timeline-nav">
                <a class="btn btn-outline-secondary btn-sm" href="{{ path('signage_device_show', {id: device.id, date: preview_from|date_modify('-' ~ step)|date('Y-m-d', false), days: preview_days, _fragment: 'kalender'}) }}" title="Zurück"><i class="fas fa-chevron-left"></i></a>
                <a class="btn btn-outline-secondary btn-sm" href="{{ path('signage_device_show', {id: device.id, days: preview_days, _fragment: 'kalender'}) }}">Heute</a>
                <a class="btn btn-outline-secondary btn-sm" href="{{ path('signage_device_show', {id: device.id, date: preview_from|date_modify('+' ~ step)|date('Y-m-d', false), days: preview_days, _fragment: 'kalender'}) }}" title="Weiter"><i class="fas fa-chevron-right"></i></a>
                <input type="date" name="date" value="{{ preview_from|date('Y-m-d', false) }}" class="form-control form-control-sm" data-autosubmit>
                <select name="days" class="form-select form-select-sm sg-w-auto" data-autosubmit>
                    {% for d in [1, 3, 7, 14] %}<option value="{{ d }}" {{ d == preview_days ? 'selected' }}>{{ d }} {{ d == 1 ? 'Tag' : 'Tage' }}</option>{% endfor %}
                </select>
                <noscript><button class="btn btn-outline-secondary btn-sm">Anzeigen</button></noscript>
            </form>
        </div>
        <div class="sg-card-body">
            <div class="sg-legend mb-3">
                {% for p in draft.manifest.playlists %}<span><i class="sg-c{{ loop.index0 % 8 }}"></i>{{ p.name }}</span>{% endfor %}
                <span><i class="is-default"></i>blass: Standard-Playlist</span>
                <span><i class="sg-c3 is-command"></i>schraffiert: Sofortauftrag</span>
            </div>
            {% for target, rows in preview %}
                <div class="sg-tl-target"><i class="fas fa-tv sg-muted"></i>{{ target }}</div>
                <div class="sg-tl-row mb-1"><div></div><div class="sg-tl-hours"><span>0</span><span>3</span><span>6</span><span>9</span><span>12</span><span>15</span><span>18</span><span>21</span><span>24</span></div></div>
                {% for row in rows %}
                    {% set dow = row.date|date('N', false) %}
                    <div class="sg-tl-row{{ dow >= 6 ? ' is-weekend' }}">
                        <div class="sg-tl-day"><b>{{ weekday_labels[dow] }}</b> {{ row.date|date('d.m.', false) }}</div>
                        <div class="sg-tl-track" data-day-start="{{ row.date|date('U') }}" data-day-end="{{ row.date|date_modify('+1 day')|date('U') }}">
                            {% for seg in row.segments %}
                                {% set label = playlist_names[seg.playlist_id] ?? (seg.playlist_id ?: 'keine Playlist') %}
                                <div class="sg-seg sg-c{{ seg.color }} is-{{ seg.source }}" data-sm-left="{{ seg.left }}" data-sm-width="{{ seg.width }}"
                                     data-bs-toggle="tooltip" title="{{ label }} · {{ source_labels[seg.source] ?? seg.source }}{{ seg.reference ? ' ' ~ seg.reference }} · {{ seg.clip_start|date('H:i', tz) }}–{{ seg.clip_end|date('H:i', tz) }}">{{ label }}</div>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            {% endfor %}
            <p class="small sg-muted mt-3 mb-0"><i class="fas fa-info-circle me-1"></i>Lokale Gerätezeit ({{ tz }}). Der Player rechnet selbst; maßgeblich ist das Gerät.</p>
        </div>
    </section>

    <section class="sg-card">
        <div class="sg-card-header">
            <h2 class="sg-card-title"><i class="far fa-calendar-alt"></i>Termine</h2>
            {% if editor %}<a href="{{ path('signage_event_new', {id: device.id}) }}" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>Termin anlegen</a>{% endif %}
        </div>
        <div class="sg-card-body">
            {% if events is empty %}
                <div class="sg-empty py-4">
                    <div class="sg-empty-icon"><i class="far fa-calendar-plus"></i></div>
                    <div class="sg-empty-title">Keine Termine</div>
                    <p class="mb-0">Es läuft die Standard-Playlist. Mit Terminen spielst du zu festen Zeiten etwas anderes.</p>
                </div>
            {% else %}
                <ul class="sg-list">
                    {% for e in events %}
                        <li class="sg-list-item">
                            <span class="sg-swatch sg-c{{ colors['k' ~ e.playlist.playlistKey] ?? 6 }}"></span>
                            <div class="sg-list-main">
                                <div class="sg-list-title">{{ e.title }}</div>
                                <div class="sg-list-sub">
                                    <span><i class="fas fa-layer-group me-1"></i>{{ e.playlist.name }}</span>
                                    <span><i class="fas fa-tv me-1"></i>{{ e.target }}</span>
                                    <span>ab {{ e.startDate|date('d.m.Y') }}{% if e.untilDate %} bis {{ e.untilDate|date('d.m.Y') }}{% endif %}</span>
                                    {% if e.exceptions|length %}<span>{{ e.exceptions|length }} Ausnahme{{ e.exceptions|length > 1 ? 'n' }}</span>{% endif %}
                                    {% if e.target not in device.targets %}<span class="sg-chip sg-chip-bad">passt nicht zum Modus</span>{% endif %}
                                </div>
                            </div>
                            <div class="sg-list-side">
                                <span class="sg-daybar" aria-label="Wochentage">{% for n, l in weekday_labels %}<span class="{{ n in e.weekdays ? 'is-on' }}">{{ l }}</span>{% endfor %}</span>
                                <span class="sg-chip sg-tabular"><i class="far fa-clock"></i>{{ e.startTime|slice(0, 5) }}–{{ e.endTime|slice(0, 5) }}{{ e.endDayOffset ? ' +1' }}</span>
                                <span class="sg-chip" title="Priorität: höher gewinnt bei Überschneidung"><i class="fas fa-sort-amount-up"></i>{{ e.priority }}</span>
                                {% if editor %}
                                    <a href="{{ path('signage_event_edit', {id: device.id, eventId: e.id}) }}" class="sg-icon-btn" title="Bearbeiten"><i class="fas fa-pen"></i></a>
                                    <form method="post" action="{{ path('signage_event_delete', {id: device.id, eventId: e.id}) }}" data-confirm="Termin „{{ e.title }}“ löschen?" data-confirm-text="Wirksam erst nach dem Veröffentlichen." data-confirm-button="Löschen">
                                        <input type="hidden" name="_token" value="{{ csrf_token('signage_event_delete_' ~ e.id) }}">
                                        <button class="sg-icon-btn is-danger" title="Löschen"><i class="fas fa-trash-alt"></i></button>
                                    </form>
                                {% endif %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </section>
</div>

{# ================= Einstellungen ================= #}
<div class="tab-pane fade" id="tab-einstellungen" role="tabpanel">
    <div class="row g-3">
        <div class="col-lg-6">
            <section class="sg-card h-100">
                <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-layer-group"></i>Standard-Playlist</h2></div>
                <form method="post" action="{{ path('signage_device_defaults', {id: device.id}) }}" class="sg-card-body">
                    <input type="hidden" name="_token" value="{{ csrf_token('signage_device_defaults_' ~ device.id) }}">
                    <p class="sg-card-hint">Läuft immer dann, wenn kein Termin und keine Sofortwiedergabe aktiv ist.</p>
                    {% for target in device.targets %}
                        {% set current = device.outputConfig(target).default_playlist %}
                        <div class="mb-3">
                            <label class="form-label" for="default-{{ target }}"><i class="fas fa-tv sg-muted me-1"></i>{{ target }}</label>
                            <select name="default_playlist[{{ target }}]" id="default-{{ target }}" class="form-select" {{ not editor ? 'disabled' }}>
                                <option value="">– bitte wählen –</option>
                                {% for p in playlists %}
                                    <option value="{{ p.id }}" {{ p.id == current ? 'selected' }}>{{ p.name }}{{ p.empty ? ' (leer)' }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endfor %}
                    {% if editor %}<button class="btn btn-primary">Speichern</button>{% endif %}
                </form>
            </section>
        </div>

        <div class="col-lg-6">
            <section class="sg-card h-100">
                <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-key"></i>Einrichtung und Zugang</h2></div>
                <div class="sg-card-body">
                    <dl class="sg-meta mb-3">
                        <dt>Eingerichtet</dt><dd>{{ device.enrolledAt ? device.enrolledAt|date('d.m.Y H:i', tz) : 'noch nicht' }}</dd>
                        <dt>Aktive Tokens</dt>
                        <dd>{{ active_tokens|length }}
                            {% for t in active_tokens %}<div class="small sg-muted">seit {{ t.createdAt|date('d.m.Y H:i', tz) }} · zuletzt {{ t.lastUsedAt ? t.lastUsedAt|date('d.m.Y H:i', tz) : 'nie' }}</div>{% endfor %}
                        </dd>
                    </dl>
                    {% if admin %}
                        <div class="d-flex flex-wrap gap-2">
                            <form method="post" action="{{ path('signage_device_enrollment_code', {id: device.id}) }}"
                                  {% if active_tokens is not empty %}data-confirm="Neuen Einrichtungscode erzeugen?" data-confirm-text="Beim Einlösen werden alle bisherigen Tokens ersetzt." data-confirm-button="Code erzeugen" data-confirm-variant="warning"{% endif %}>
                                <input type="hidden" name="_token" value="{{ csrf_token('signage_device_enroll_' ~ device.id) }}">
                                <button class="btn btn-outline-primary"><i class="fas fa-key me-1"></i>Einrichtungscode erzeugen</button>
                            </form>
                            {% if active_tokens is not empty %}
                                <form method="post" action="{{ path('signage_device_revoke_tokens', {id: device.id}) }}" data-confirm="Token widerrufen?" data-confirm-text="Das Gerät verliert die Verbindung, spielt aber die letzte Version weiter." data-confirm-button="Widerrufen">
                                    <input type="hidden" name="_token" value="{{ csrf_token('signage_device_revoke_' ~ device.id) }}">
                                    <button class="btn btn-outline-danger"><i class="fas fa-ban me-1"></i>Token widerrufen</button>
                                </form>
                            {% endif %}
                        </div>
                        <p class="small sg-muted mt-3 mb-0">Ein neuer Einrichtungscode ersetzt beim Einlösen alle bisherigen Tokens.</p>
                    {% endif %}
                </div>
            </section>
        </div>

        <div class="col-12">
            <section class="sg-card">
                <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-cog"></i>Gerätekonfiguration</h2></div>
                <div class="sg-card-body">
                    {% if admin %}
                        <form method="post" action="{{ path('signage_device_settings', {id: device.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('signage_device_settings_' ~ device.id) }}">
                            <div class="sg-form-section">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label" for="cfg-name">Name</label>
                                        <input type="text" name="name" id="cfg-name" value="{{ device.name }}" maxlength="160" class="form-control" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label" for="cfg-tz">Zeitzone</label>
                                        <select name="timezone" id="cfg-tz" class="form-select">
                                            {% for t in timezones %}<option value="{{ t }}" {{ t == device.timezone ? 'selected' }}>{{ t }}</option>{% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="sg-form-section">
                                <div class="sg-form-section-title">Bildschirme</div>
                                <div class="sg-choices">
                                    <div>
                                        <input type="radio" class="btn-check" name="mode" id="cfg-mirror" value="mirror" {{ device.mode == 'mirror' ? 'checked' }}>
                                        <label class="sg-choice" for="cfg-mirror"><i class="fas fa-clone"></i><span><strong>Gespiegelt</strong><small>Beide zeigen dasselbe (mirror).</small></span></label>
                                    </div>
                                    <div>
                                        <input type="radio" class="btn-check" name="mode" id="cfg-split" value="split" {{ device.mode == 'split' ? 'checked' }}>
                                        <label class="sg-choice" for="cfg-split"><i class="fas fa-columns"></i><span><strong>Getrennt</strong><small>Zwei eigene Programme (split).</small></span></label>
                                    </div>
                                </div>
                                <div class="form-text">Nach einem Moduswechsel erneut speichern, um Anschlüsse der neuen Ausgaben einzutragen.</div>
                            </div>
                            <div class="sg-form-section">
                                <div class="sg-form-section-title">Wiedergabe</div>
                                <div class="sg-choices">
                                    {% for key, label in constant('App\\Entity\\Signage\\SignageDevice::PLAYBACKS') %}
                                        <div>
                                            <input type="radio" class="btn-check" name="playback" id="cfg-playback-{{ key }}" value="{{ key }}" {{ device.playback == key ? 'checked' }}>
                                            <label class="sg-choice" for="cfg-playback-{{ key }}"><i class="fas {{ key == 'browser' ? 'fa-tv' : 'fa-plug' }}"></i><span><strong>{{ label }}</strong><small>{{ key == 'browser' ? 'Samsung öffnet die Seite des Players.' : 'mpv auf dem angeschlossenen Bildschirm.' }}</small></span></label>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="form-text">Bei „Browser“ enthält das Manifest <code>device.playback</code> mit dem Wert <code>browser</code>. Bei HDMI fehlt das Feld, damit ältere Player die Version annehmen. Der Player muss die Option kennen, sonst lehnt er eine Browser-Version ab. Adressen am Gerät: bei gleichem Bild <code>/wand/shared</code>, sonst <code>/wand/screen-1</code> und <code>/wand/screen-2</code>.</div>
                            </div>
                            <div class="sg-form-section">
                                <div class="sg-form-section-title">Ausgaben</div>
                                {% for target in device.targets %}
                                    {% set cfg = device.outputConfig(target) %}
                                    <div class="row g-2 mb-3">
                                        <div class="col-12 fw-semibold small"><i class="fas fa-tv sg-muted me-1"></i>{{ target }}</div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Drehung</label>
                                            <select name="outputs[{{ target }}][rotation]" class="form-select form-select-sm">
                                                {% for key, label in constant('App\\Entity\\Signage\\SignageDevice::ROTATIONS') %}
                                                    <option value="{{ key }}" {{ cfg.rotation == key ? 'selected' }}>{{ label }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Anschluss</label>
                                            <input type="text" name="outputs[{{ target }}][connector]" value="{{ cfg.connector }}" placeholder="leer = automatisch, z. B. HDMI-1" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">Audiogerät (mpv)</label>
                                            <input type="text" name="outputs[{{ target }}][audio_device]" value="{{ cfg.audio_device }}" placeholder="leer = stumm" class="form-control form-control-sm">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label small mb-1">EDID-Hash</label>
                                            <input type="text" name="outputs[{{ target }}][edid_hash]" value="{{ cfg.edid_hash }}" placeholder="optional" class="form-control form-control-sm sg-mono">
                                        </div>
                                    </div>
                                {% endfor %}
                                <div class="form-text">Das Gerät dreht den Bildschirm, sobald die nächste Version aktiv wird. Im gespiegelten Modus gilt die Drehung für beide Bildschirme, im getrennten Modus braucht jede gedrehte Ausgabe ihren eigenen Anschluss (z. B. HDMI-1). Welche Richtung zur Montage passt, sieht man erst am Bild: Steht es auf dem Kopf, die andere Richtung veröffentlichen.</div>
                            </div>
                            <button class="btn btn-primary">Konfiguration speichern</button>
                            <span class="small sg-muted ms-2">Wirksam erst nach dem Veröffentlichen.</span>
                        </form>
                    {% else %}
                        <dl class="sg-meta">
                            <dt>Wiedergabe</dt>
                            <dd>{{ constant('App\\Entity\\Signage\\SignageDevice::PLAYBACKS')[device.playback] }}</dd>
                            {% for target in device.targets %}
                                {% set cfg = device.outputConfig(target) %}
                                <dt>{{ target }}</dt>
                                <dd>{{ constant('App\\Entity\\Signage\\SignageDevice::ROTATIONS')[cfg.rotation] }} · Anschluss {{ cfg.connector ?? 'automatisch' }} · Audio {{ cfg.audio_device ?? 'stumm' }}</dd>
                            {% endfor %}
                        </dl>
                    {% endif %}
                </div>
            </section>
        </div>
    </div>
</div>

{# ================= Versionen ================= #}
<div class="tab-pane fade" id="tab-versionen" role="tabpanel">
    <section class="sg-card">
        <div class="sg-card-body">
            {% if releases is empty %}
                <div class="sg-empty py-4">
                    <div class="sg-empty-icon"><i class="fas fa-box-open"></i></div>
                    <div class="sg-empty-title">Noch keine Version</div>
                    <p class="mb-0">Sobald du veröffentlichst, erscheint hier jede Version mit ihrem Manifest.</p>
                </div>
            {% else %}
                <ul class="sg-list">
                    {% for r in releases %}
                        <li class="sg-list-item">
                            <span class="sg-counter is-lg">v{{ r.version }}</span>
                            <div class="sg-list-main">
                                <div class="sg-list-title">Version {{ r.version }}
                                    {% if r.version == s.active_version %}<span class="sg-chip sg-chip-ok ms-1"><span class="sg-dot is-ok"></span>aktiv auf dem Gerät</span>{% endif %}
                                    {% if r.version == s.pending_version and r.version != s.active_version %}<span class="sg-chip sg-chip-warn ms-1">ausstehend</span>{% endif %}
                                </div>
                                <div class="sg-list-sub"><span>{{ r.createdAt|date('d.m.Y H:i', tz) }}</span><span>{{ r.createdBy ?? 'system' }}</span></div>
                            </div>
                            <a href="{{ path('signage_device_release', {id: device.id, version: r.version}) }}" target="_blank" class="btn btn-outline-secondary btn-sm"><i class="fas fa-file-code me-1"></i>Manifest <span class="sg-mono">{{ r.manifestSha256|slice(0, 8) }}</span></a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </section>
</div>

</div>
{% endblock %}