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

{% block signage_title %}{{ template.name }}{% 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') %}
<a href="{{ path('signage_text_index') }}" class="sg-back"><i class="fas fa-arrow-left"></i>Text-Videos</a>
<div class="sg-header">
    <div>
        <h1 class="sg-title">{{ template.name }}</h1>
        <div class="sg-subtitle">
            <span class="sg-chip"><i class="fas fa-film"></i>{{ template.background.name }}</span>
            <span class="sg-chip">{{ constant('App\\Entity\\Signage\\SignageTextTemplate::POSITIONS')[template.position] }} · {{ constant('App\\Entity\\Signage\\SignageTextTemplate::SIZES')[template.size] }}</span>
            <span class="sg-chip">{{ constant('App\\Entity\\Signage\\SignageTextTemplate::FORMATS')[template.format] ?? template.format }}</span>
            <span class="sg-chip"><i class="fas fa-circle sg-swatch" data-sm-color="{{ template.color }}"></i>{{ template.box ? 'mit Balken' : 'ohne Balken' }}</span>
        </div>
    </div>
    {% if editor %}
        <div class="sg-actions"><a href="{{ path('signage_text_edit', {id: template.id}) }}" class="btn btn-outline-secondary"><i class="fas fa-sliders-h me-1"></i>Layout ändern</a></div>
    {% endif %}
</div>

<form method="post" action="{{ path('signage_text_render', {id: template.id}) }}" class="row g-3 align-items-start" data-text-preview="{{ path('signage_text_preview') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('signage_text_render_' ~ template.id) }}">
    <input type="hidden" name="template" value="{{ template.id }}" data-preview-field>

    <div class="col-xl-5">
        <section class="sg-card">
            <div class="sg-card-header"><h2 class="sg-card-title"><i class="fas fa-magic"></i>Neues Video</h2></div>
            <div class="sg-card-body">
                <div class="mb-3">
                    <label class="form-label" for="tr-line1">Zeile 1 (groß)</label>
                    <input type="text" name="line1" id="tr-line1" value="{{ template.line1Default }}" maxlength="{{ constant('App\\Entity\\Signage\\SignageTextTemplate::MAX_LINE1') }}" class="form-control form-control-lg" data-preview-field {{ not editor ? 'readonly' }}>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="tr-line2">Zeile 2 (kleiner)</label>
                    <input type="text" name="line2" id="tr-line2" value="{{ template.line2Default }}" maxlength="{{ constant('App\\Entity\\Signage\\SignageTextTemplate::MAX_LINE2') }}" class="form-control" placeholder="z. B. Wir begrüßen die Klasse 3b" data-preview-field {{ not editor ? 'readonly' }}>
                </div>
                <div>
                    <label class="form-label" for="tr-title">Name in der Mediathek</label>
                    <input type="text" name="title" id="tr-title" maxlength="200" class="form-control" placeholder="leer = Text der Zeilen" {{ not editor ? 'readonly' }}>
                </div>
            </div>
            {% if editor %}
                <div class="sg-card-footer">
                    <button class="btn btn-primary w-100"><i class="fas fa-film me-1"></i>Video erstellen</button>
                    <div class="small sg-muted mt-2">Danach unter „Videos“ und im Zeitplan zum Hineinziehen verfügbar.</div>
                </div>
            {% endif %}
        </section>
    </div>

    <div class="col-xl-7">
        <section class="sg-card sg-sticky">
            <div class="sg-card-header"><h2 class="sg-card-title"><i class="far fa-image"></i>Vorschau</h2><span class="sg-card-hint">aktualisiert sich beim Tippen</span></div>
            <div class="sg-card-body">
                <div class="sg-text-preview" data-preview-box>
                    <img alt="Vorschau" data-preview-img hidden>
                    <div class="sg-text-preview-msg" data-preview-msg>Vorschau wird geladen …</div>
                </div>
            </div>
        </section>
    </div>
</form>

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