{% extends 'admin/layout.html.twig' %}

{% block title %}Einstellungen - E-Mail-Text bearbeiten{% endblock %}

{% block content %}
    <h1 class="text-2xl font-bold pb-8">
        {{ definition.label }}
    </h1>
    <div class="grid lg:grid-cols-2 gap-8 items-start">
        {% include 'admin/system/email_text/_form.html.twig' %}
        <div class="lg:sticky lg:top-4">
            <div class="font-bold pb-2">
                Vorschau
            </div>
            {# The pane refreshes itself from the form while the admin types, so the
               wording is checked before it is saved rather than after. #}
            <div class="relative">
                <div id="email-text-preview"
                     hx-post="{{ path('app_admin_system_email_text_preview_draft', { 'key': definition.key.value }) }}"
                     hx-trigger="input from:#email-text-form delay:500ms"
                     hx-include="#email-text-form"
                     hx-target="this"
                     hx-swap="innerHTML"
                     hx-indicator="#email-text-preview-indicator">
                    {% include 'admin/system/email_text/_preview.html.twig' %}
                </div>
                {# Deliberately a sibling of the swap target, not a child: hx-swap replaces
                   the target's contents, which would carry the indicator away with them. #}
                <div class="htmx-indicator absolute inset-0 bg-white/75 flex items-center justify-center"
                     id="email-text-preview-indicator">
                    {% include '_partials/_spinner.html.twig' with { 'class': 'w-8 h-8' } %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}