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

{% block signage_title %}Geräte{% endblock %}

{% set source_labels = {'default': 'Standard', 'event': 'Termin', 'command': 'Sofort'} %}

{% block signage_content %}
<div class="sg-header">
    <div>
        <h1 class="sg-title">Geräte</h1>
        <div class="sg-subtitle">
            {% set online = rows|filter(r => r.status.reachable)|length %}
            <span class="sg-chip"><span class="sg-dot {{ online > 0 ? 'is-ok' }}"></span>{{ online }} von {{ rows|length }} online</span>
            <span class="small">Aktualisiert sich alle 30 Sekunden.</span>
        </div>
    </div>
    {% if is_granted('ROLE_SIGNAGE_ADMIN') %}
        <div class="sg-actions">
            <a href="{{ path('signage_device_new') }}" class="btn btn-primary"><i class="fas fa-plus me-1"></i>Gerät anlegen</a>
        </div>
    {% endif %}
</div>

{% if rows is empty %}
    <div class="sg-card">
        <div class="sg-empty">
            <div class="sg-empty-icon"><i class="fas fa-desktop"></i></div>
            <div class="sg-empty-title">Noch kein Gerät</div>
            <p class="mb-2">Lege ein Gerät an, wähle eine Standard-Playlist und richte den Player mit dem Einrichtungscode ein.</p>
            {% if is_granted('ROLE_SIGNAGE_ADMIN') %}<a href="{{ path('signage_device_new') }}" class="btn btn-primary"><i class="fas fa-plus me-1"></i>Gerät anlegen</a>{% endif %}
        </div>
    </div>
{% else %}
<div class="sg-grid" data-auto-refresh="30">
    {% for row in rows %}
        {% set s = row.status %}
        {% set d = row.device %}
        <article class="sg-card sg-device-card">
            <div class="sg-card-header">
                <h2 class="sg-device-name">
                    <span class="sg-dot {{ s.reachable ? 'is-ok' : (s.last_heartbeat_at ? 'is-bad') }}" title="{{ s.reachable ? 'Online' : 'Keine Rückmeldung' }}"></span>
                    <a href="{{ path('signage_device_show', {id: d.id}) }}">{{ d.name }}</a>
                </h2>
                <span class="sg-chip"><i class="fas {{ d.mode == 'split' ? 'fa-columns' : 'fa-clone' }}"></i>{{ d.mode == 'split' ? 'Zwei Bildschirme' : 'Gespiegelt' }}</span>
            </div>
            <div class="sg-card-body">
                <div class="sg-mono sg-muted sg-key-line">{{ d.deviceKey }}</div>

                {{ sg.release_steps(s, true) }}
                {% if s.release_state == 'transferring' and s.download and s.download.percent is not null %}
                    <div>
                        <div class="sg-progress"><span data-sm-width="{{ s.download.percent }}"></span></div>
                        <div class="small sg-muted mt-1">{{ s.download.percent }} % übertragen</div>
                    </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 }}</div>
                                <div class="sg-output-playlist">{{ o.playlist_id ?? 'keine Playlist' }}</div>
                            </div>
                            {% if o.source %}<span class="sg-chip {{ o.source == 'command' ? 'sg-chip-warn' : (o.source == 'event' ? 'sg-chip-accent') }}">{{ 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 sg-muted small">Noch keine Angaben vom Gerät.</div></div>
                    {% endfor %}
                </div>

                {% if s.errors is not empty %}
                    <ul class="sg-errors">{% for e in s.errors|slice(0, 3) %}<li><i class="fas fa-exclamation-circle me-1"></i>{{ e }}</li>{% endfor %}</ul>
                {% endif %}

                <div class="sg-device-foot">
                    <span title="Letzte Rückmeldung"><i class="far fa-clock"></i>{% if s.last_heartbeat_at %}<span data-relative-time="{{ s.last_heartbeat_at|date('U') }}">{{ s.last_heartbeat_at|date('d.m. H:i', 'Europe/Berlin') }}</span>{% else %}nie{% endif %}</span>
                    {% if s.disk_free_bytes is not null %}<span title="Speicher frei"><i class="far fa-hdd"></i>{{ sg.bytes(s.disk_free_bytes) }} frei</span>{% endif %}
                    {% if d.playerVersion %}<span title="Player-Version"><i class="fas fa-code-branch"></i>{{ d.playerVersion }}</span>{% endif %}
                </div>
            </div>
        </article>
    {% endfor %}
</div>
{% endif %}
{% endblock %}