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

{% block title %}Mailing{% endblock %}

{% block content %}
    <div class="flex items-start justify-between pb-4">
        <h1 class="text-2xl font-bold">
            Mailing an das Team
        </h1>
        <a href="{{ returnUrl }}" class="btn btn--small btn--secondary shrink-0">
            Zurück zur Teamübersicht
        </a>
    </div>

    <div class="pb-6">
        {{ include('admin/teamer/_mailing_filter_summary.html.twig', { 'filterDto': filterDto }) }}
    </div>

    <div class="pb-6">
        <div class="text-xl font-bold">
            {{ recipients.eligibleCount }} Empfänger:innen
        </div>
        {% if recipients.hasSkipped %}
            <div class="text-sm text-gray-500">
                {{ include('admin/teamer/_mailing_skipped.html.twig', { 'recipients': recipients }) }}
            </div>
        {% endif %}
    </div>

    {# the draft is parked on every keystroke so that a trip to the filter and back keeps it,
       hx-trigger replaces htmx' default submit trigger, the preview button still posts natively #}
    {{ form_start(form, { 'attr': {
        'hx-post': path('app_admin_teamer_mailing_draft'),
        'hx-trigger': 'input changed delay:500ms',
        'hx-swap': 'none',
    } }) }}
    <div class="flex flex-col space-y-4 pb-4 max-w-3xl">
        {{ form_row(form.subject) }}
        {{ form_row(form.message) }}
    </div>

    <div class="pb-8 max-w-3xl text-sm text-gray-500">
        <div class="pb-2">
            Platzhalter für Betreff und Nachricht, sie werden beim Senden pro Person ersetzt:
        </div>
        <div class="flex flex-wrap gap-2">
            {% for placeholder, label in placeholders %}
                <span class="inline-flex items-center space-x-1 py-1 px-2 bg-gray-50 border border-gray-200 rounded">
                    <code>{{ placeholder }}</code>
                    <span>{{ label }}</span>
                </span>
            {% endfor %}
        </div>
    </div>

    <div class="flex items-center space-x-2">
        {# nobody to write to means there is nothing to confirm, only the preview stays useful #}
        {% if recipients.eligibleCount > 0 %}
            <button type="button"
                    class="btn"
                    hx-post="{{ path('app_admin_teamer_mailing_confirm') }}"
                    hx-include="closest form"
                    hx-target="body"
                    hx-swap="beforeend">
                {{ icon('mail', 'w-4 h-4 shrink-0') }}
                <span>Senden</span>
            </button>
        {% endif %}
        <button type="submit" class="btn btn--secondary">
            Vorschau an mich senden
        </button>
        {% if hasDraft %}
            <a href="{{ path('app_admin_teamer_mailing_discard') }}" class="btn btn--secondary">
                Entwurf verwerfen
            </a>
        {% endif %}
    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}