{% extends 'swimmonitor/base.html.twig' %}

{% block title %}{% block signage_title %}Übersicht{% endblock %} · Signage{% endblock %}
{% block body_attr %} class="sg-app" data-sg-route="{{ app.request.get('_route') }}"{% endblock %}

{% block breadcrumb %}
    <li><a href="{{ path('signage_device_index') }}">Signage</a></li>
    <li>{{ block('signage_title') }}</li>
{% endblock %}

{% block page_head %}
    {% set route = app.request.get('_route') ?? '' %}
    <nav class="sg-nav" aria-label="Signage-Bereiche">
        <a class="{{ route starts with 'signage_device_' or route starts with 'signage_event_' ? 'active' }}" href="{{ path('signage_device_index') }}"><i class="fas fa-desktop"></i>Geräte</a>
        <a class="{{ route starts with 'signage_media_' ? 'active' }}" href="{{ path('signage_media_index') }}"><i class="fas fa-film"></i>Videos</a>
        <a class="{{ route starts with 'signage_playlist_' ? 'active' }}" href="{{ path('signage_playlist_index') }}"><i class="fas fa-layer-group"></i>Playlists</a>
        <a class="{{ route starts with 'signage_text_' ? 'active' }}" href="{{ path('signage_text_index') }}"><i class="fas fa-font"></i>Text-Videos</a>
        <a class="{{ route starts with 'signage_audit_' ? 'active' }}" href="{{ path('signage_audit_index') }}"><i class="fas fa-history"></i>Protokoll</a>
        <button type="button" class="sg-tour-start" data-sg-tour-start title="Schritt für Schritt: Video auf einen Bildschirm bringen"><i class="far fa-compass"></i>Anleitung</button>
    </nav>
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/admin/signage.css') }}?v={{ sm_v }}">
{% endblock %}

{% block flashes %}
    {% for message in app.flashes('enrollment_code') %}
        <div class="sg-code-card" role="alert">
            <div class="flex-grow-1">
                <div class="fw-semibold"><i class="fas fa-key me-1"></i>Einrichtungscode für das Gerät</div>
                <div class="small sg-muted">24 Stunden gültig, nur einmal verwendbar. Wird nicht erneut angezeigt – jetzt notieren oder kopieren.</div>
            </div>
            <div class="sg-code">{{ message }}</div>
            <button type="button" class="btn btn-secondary btn-sm" data-copy="{{ message }}"><i class="far fa-copy me-1"></i>Kopieren</button>
        </div>
    {% endfor %}
    {{ parent() }}
{% endblock %}

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

{% block content %}
    {% block signage_content %}{% endblock %}
{% endblock %}