{% extends 'signage/_layout.html.twig' %}

{% block signage_title %}Protokoll{% endblock %}

{% set kinds = {
    device: ['is-device', 'fa-desktop'],
    release: ['is-release', 'fa-upload'],
    command: ['is-command', 'fa-bolt'],
    playlist: ['is-playlist', 'fa-layer-group'],
    media: ['is-media', 'fa-film'],
    event: ['is-event', 'far fa-calendar-alt'],
} %}

{% block signage_content %}
<div class="sg-header">
    <div>
        <h1 class="sg-title">Protokoll</h1>
        <div class="sg-subtitle">Wer hat wann was geändert.</div>
    </div>
    <div class="sg-actions">
        <label class="sg-search sg-minw-220">
            <i class="fas fa-search"></i>
            <input type="search" class="form-control" placeholder="Einträge filtern …" data-filter="#sg-feed" data-filter-empty="#sg-feed-none" aria-label="Einträge filtern">
        </label>
        <form method="get">
            <select name="device" class="form-select" data-autosubmit aria-label="Gerät">
                <option value="">Alle Geräte und Inhalte</option>
                {% for d in devices %}<option value="{{ d.id }}" {{ device and device.id == d.id ? 'selected' }}>{{ d.name }}</option>{% endfor %}
            </select>
            <noscript><button class="btn btn-outline-secondary">Filtern</button></noscript>
        </form>
    </div>
</div>

<section class="sg-card">
    <div class="sg-card-body">
        {% if entries is empty %}
            <div class="sg-empty">
                <div class="sg-empty-icon"><i class="fas fa-history"></i></div>
                <div class="sg-empty-title">Noch keine Einträge</div>
            </div>
        {% else %}
            <ul class="sg-feed" id="sg-feed">
                {% set current_day = null %}
                {% for e in entries %}
                    {% set day = e.createdAt|date('Y-m-d', 'Europe/Berlin') %}
                    {% if day != current_day %}
                        {% set current_day = day %}
                        <li class="sg-feed-day">
                            {% if day == 'now'|date('Y-m-d', 'Europe/Berlin') %}Heute{% elseif day == 'yesterday'|date('Y-m-d', 'Europe/Berlin') %}Gestern{% else %}{{ e.createdAt|date('d.m.Y', 'Europe/Berlin') }}{% endif %}
                        </li>
                    {% endif %}
                    {% set kind = kinds[e.action|split('.')|first] ?? ['', 'fa-circle'] %}
                    <li class="sg-feed-item" data-filter-text="{{ e.summary }} {{ e.actor }} {{ e.action }} {{ e.device ? e.device.name }}">
                        <span class="sg-feed-icon {{ kind[0] }}"><i class="{{ kind[1] starts with 'far ' ? kind[1] : 'fas ' ~ kind[1] }}"></i></span>
                        <div class="sg-minw-0">
                            <div class="sg-feed-summary">{{ e.summary }}</div>
                            <div class="sg-feed-meta">
                                <span><i class="far fa-clock me-1"></i>{{ e.createdAt|date('H:i:s', 'Europe/Berlin') }}</span>
                                <span><i class="far fa-user me-1"></i>{{ e.actor ?? 'system' }}</span>
                                {% if e.device %}<span><i class="fas fa-desktop me-1"></i>{{ e.device.name }}</span>{% endif %}
                                <span class="sg-mono">{{ e.action }}</span>
                            </div>
                            {% if e.details %}
                                <details>
                                    <summary>Details</summary>
                                    <pre class="sg-mono">{{ e.details|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES')) }}</pre>
                                </details>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
            <div class="sg-empty py-4" id="sg-feed-none" hidden><div class="sg-empty-title">Keine Treffer</div></div>
        {% endif %}
    </div>
</section>
{% endblock %}