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

{% block signage_title %}{{ template ? 'Vorlage bearbeiten' : 'Neue Text-Vorlage' }}{% endblock %}

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

{% block signage_content %}
<a href="{{ template ? path('signage_text_show', {id: template.id}) : path('signage_text_index') }}" class="sg-back"><i class="fas fa-arrow-left"></i>{{ template ? template.name : 'Text-Videos' }}</a>
<div class="sg-header">
    <div>
        <h1 class="sg-title">{{ template ? 'Vorlage bearbeiten' : 'Neue Text-Vorlage' }}</h1>
        <div class="sg-subtitle">Layout festlegen. Den eigentlichen Text tippst du später beim Erstellen eines Videos ein.</div>
    </div>
</div>

{% for error in errors %}
    <div class="alert alert-danger sg-flash py-2"><i class="fas fa-exclamation-circle me-1"></i>{{ error }}</div>
{% endfor %}

<form method="post" class="row g-3 align-items-start" data-text-preview="{{ path('signage_text_preview') }}">
    <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">

    <div class="col-xl-5">
        <section class="sg-card">
            <div class="sg-card-body">
                <div class="sg-form-section">
                    <div class="sg-form-section-title">Grundlage</div>
                    <div class="mb-3">
                        <label class="form-label" for="tt-name">Name der Vorlage</label>
                        <input type="text" name="name" id="tt-name" value="{{ values.name }}" maxlength="160" class="form-control" required placeholder="z. B. Begrüßung Foyer">
                    </div>
                    <label class="form-label" for="tt-background">Hintergrundvideo</label>
                    <select name="background" id="tt-background" class="form-select" required data-preview-field>
                        <option value="">– bitte wählen –</option>
                        {% for m in media %}
                            <option value="{{ m.id }}" {{ m.id ~ '' == values.background ~ '' ? 'selected' }}>{{ m.name }}{{ m.width ? ' (' ~ m.width ~ '×' ~ m.height ~ (m.orientation == 'portrait' ? ', hoch' : (m.orientation == 'landscape' ? ', quer')) ~ ')' }}</option>
                        {% endfor %}
                    </select>
                    <div class="form-text">Am besten ein ruhiges Video ohne eigenen Text. Erst unter „Videos“ hochladen.</div>
                    <div class="row g-3 mt-0">
                        <div class="col-sm-6">
                            <label class="form-label" for="tt-format">Format des Videos</label>
                            <select name="format" id="tt-format" class="form-select" data-preview-field>
                                {% for key, label in constant('App\\Entity\\Signage\\SignageTextTemplate::FORMATS') %}
                                    <option value="{{ key }}" {{ values.format == key ? 'selected' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label" for="tt-fit">Wenn das Format abweicht</label>
                            <select name="fit" id="tt-fit" class="form-select" data-preview-field>
                                {% for key, label in constant('App\\Entity\\Signage\\SignageTextTemplate::FITS') %}
                                    <option value="{{ key }}" {{ values.fit == key ? 'selected' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-text">Für hochkant montierte Bildschirme „Hochformat“ wählen. Ein Querformat-Hintergrund wird dann zugeschnitten oder mit unscharfem Rand eingepasst.</div>
                </div>

                <div class="sg-form-section">
                    <div class="sg-form-section-title">Text</div>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label d-block">Position</label>
                            <div class="sg-segmented d-inline-flex">
                                {% for key, label in constant('App\\Entity\\Signage\\SignageTextTemplate::POSITIONS') %}
                                    <input type="radio" class="btn-check" name="position" id="tt-pos-{{ key }}" value="{{ key }}" {{ values.position == key ? 'checked' }} data-preview-field>
                                    <label for="tt-pos-{{ key }}">{{ label }}</label>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label d-block">Schriftgröße</label>
                            <div class="sg-segmented d-inline-flex">
                                {% for key, label in constant('App\\Entity\\Signage\\SignageTextTemplate::SIZES') %}
                                    <input type="radio" class="btn-check" name="size" id="tt-size-{{ key }}" value="{{ key }}" {{ values.size == key ? 'checked' }} data-preview-field>
                                    <label for="tt-size-{{ key }}">{{ label }}</label>
                                {% endfor %}
                            </div>
                            <div class="form-text">Lange Zeilen werden automatisch kleiner, damit sie ins Bild passen.</div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label" for="tt-color">Textfarbe</label>
                            <div class="d-flex align-items-center gap-2">
                                <input type="color" name="color" id="tt-color" value="{{ values.color }}" class="form-control form-control-color" data-preview-field>
                                <div class="sg-quick">
                                    {% for c, l in {'#ffffff': 'Weiß', '#ffd60a': 'Gelb', '#111111': 'Schwarz'} %}<button type="button" data-color-preset="{{ c }}" title="{{ l }}"><i class="fas fa-circle sg-swatch" data-sm-color="{{ c }}"></i></button>{% endfor %}
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 d-flex align-items-end">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" role="switch" name="box" value="1" id="tt-box" {{ values.box ? 'checked' }} data-preview-field>
                                <label class="form-check-label" for="tt-box">Balken hinter dem Text</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sg-form-section">
                    <div class="sg-form-section-title">Vorbelegung</div>
                    <div class="mb-3">
                        <label class="form-label" for="tt-line1">Zeile 1 (groß)</label>
                        <input type="text" name="line1" id="tt-line1" value="{{ values.line1 }}" maxlength="{{ constant('App\\Entity\\Signage\\SignageTextTemplate::MAX_LINE1') }}" class="form-control" data-preview-field>
                    </div>
                    <label class="form-label" for="tt-line2">Zeile 2 (kleiner)</label>
                    <input type="text" name="line2" id="tt-line2" value="{{ values.line2 }}" maxlength="{{ constant('App\\Entity\\Signage\\SignageTextTemplate::MAX_LINE2') }}" class="form-control" placeholder="z. B. Wir begrüßen die Klasse 3b" data-preview-field>
                    <div class="form-text">Wird beim Erstellen vorgeschlagen und lässt sich jedes Mal ändern.</div>
                </div>
            </div>
            <div class="sg-card-footer d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-check me-1"></i>Speichern</button>
                <a href="{{ template ? path('signage_text_show', {id: template.id}) : path('signage_text_index') }}" class="btn btn-outline-secondary">Abbrechen</a>
            </div>
        </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">Standbild aus dem Video, so wie es der Server rendert</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>Hintergrundvideo wählen.</div>
                </div>
            </div>
        </section>
    </div>
</form>

{% if template %}
    <form method="post" action="{{ path('signage_text_delete', {id: template.id}) }}" class="mt-3" data-confirm="Vorlage „{{ template.name }}“ löschen?" data-confirm-text="Bereits erstellte Videos bleiben in der Mediathek." data-confirm-button="Löschen">
        <input type="hidden" name="_token" value="{{ csrf_token('signage_text_template_' ~ template.id) }}">
        <button class="btn btn-outline-danger btn-sm"><i class="fas fa-trash-alt me-1"></i>Vorlage löschen</button>
    </form>
{% endif %}
{% endblock %}