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

{% block signage_title %}Text-Videos{% endblock %}

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

{% block signage_content %}
{% set editor = is_granted('ROLE_SIGNAGE_EDITOR') %}
<div class="sg-header">
    <div>
        <h1 class="sg-title">Text-Videos</h1>
        <div class="sg-subtitle">Vorlage = Hintergrundvideo + Textlayout. Text eintippen, Vorschau ansehen, der Server erstellt daraus ein neues Video für die Mediathek.</div>
    </div>
    {% if editor %}
        <div class="sg-actions"><a href="{{ path('signage_text_new') }}" class="btn btn-primary"><i class="fas fa-plus me-1"></i>Neue Vorlage</a></div>
    {% endif %}
</div>

{% if templates is empty %}
    <section class="sg-card">
        <div class="sg-empty py-5">
            <div class="sg-empty-icon"><i class="fas fa-font"></i></div>
            <div class="sg-empty-title">Noch keine Vorlage</div>
            <p class="mb-0">Zum Beispiel ein ruhiges Hintergrundvideo mit „Herzlich willkommen“ und einer zweiten Zeile für die Gruppe.</p>
        </div>
    </section>
{% else %}
    <div class="sg-grid">
        {% for t in templates %}
            <article class="sg-card sg-text-card">
                <a href="{{ path('signage_text_show', {id: t.id}) }}" class="sg-text-preview is-loading">
                    <img loading="lazy" alt="Vorschau {{ t.name }}" src="{{ path('signage_text_preview', {template: t.id, line1: t.line1Default ?: t.name, line2: t.line2Default}) }}" data-preview-img>
                </a>
                <div class="sg-card-body">
                    <h2 class="h6 mb-1"><a href="{{ path('signage_text_show', {id: t.id}) }}">{{ t.name }}</a></h2>
                    <div class="small sg-muted"><i class="fas fa-film me-1"></i>{{ t.background.name }}</div>
                </div>
            </article>
        {% endfor %}
    </div>
{% endif %}

<section class="sg-card mt-3">
    <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-history"></i>Zuletzt erstellt</h2></div>
    <div class="sg-card-body">
        {% include 'signage/text/_renders.html.twig' with {renders: renders, show_template: true} %}
    </div>
</section>
{% endblock %}