{% extends 'admin_base.html.twig' %}

{% block title %}{{ template ? 'Vorlage bearbeiten' : 'Vorlage anlegen' }} – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-envelope-open-text me-2"></i>Textvorlage{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: template ? 'Vorlage bearbeiten' : 'Vorlage anlegen',
    icon: 'envelope-open-text',
    subtitle: 'Betreff und Inhalt mit Platzhaltern; ohne eigene Vorlage gilt der Standardtext',
    breadcrumb_current: 'Textvorlagen'
} %}

<form method="post" action="{{ path('admin_fisch_email_templates_save') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('fisch_email_template') }}">
    <input type="hidden" name="id" value="{{ template ? template.id : 0 }}">

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="fisch-card">
                <div class="card-header"><i class="fas fa-pen"></i> Inhalt</div>
                <div class="card-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="tplType">Anlass</label>
                            <select class="form-select" name="type" id="tplType" required>
                                {% for value, label in types %}
                                    <option value="{{ value }}" {{ presetType == value ? 'selected' : '' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="tplName">Name der Vorlage</label>
                            <input type="text" class="form-control" name="name" id="tplName" maxlength="160" required
                                   value="{{ template ? template.name : '' }}" placeholder="z. B. Kursbestätigung Standard">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="tplSubject">Betreff</label>
                        <input type="text" class="form-control" name="subject" id="tplSubject" maxlength="255" required
                               value="{{ presetSubject }}">
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-semibold" for="tplContent">Inhalt (HTML)</label>
                        <textarea class="form-control font-monospace" name="content" id="tplContent" rows="18" required>{{ presetContent }}</textarea>
                    </div>
                    <p class="text-muted small mb-0">
                        Platzhalter per Klick rechts einfügen. Nicht belegte Platzhalter bleiben leer.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="fisch-card mb-4">
                <div class="card-header"><i class="fas fa-paper-plane"></i> Versand</div>
                <div class="card-body">
                    <div class="alert alert-warning small">
                        Eigene Fisch-Absenderadresse steht noch aus. Bis dahin wird
                        <code>{{ senderEmail ?: 'die allgemeine Adresse' }}</code> verwendet.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="tplFromEmail">Absenderadresse (optional)</label>
                        <input type="email" class="form-control" name="from_email" id="tplFromEmail" maxlength="255"
                               value="{{ template ? template.fromEmail : '' }}" placeholder="{{ senderEmail }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="tplFromName">Absendername</label>
                        <input type="text" class="form-control" name="from_name" id="tplFromName" maxlength="160"
                               value="{{ template ? template.fromName : '' }}" placeholder="Fit wie ein Fisch">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="tplPool">Gilt für</label>
                        <select class="form-select" name="pool_id" id="tplPool">
                            <option value="0">Alle Schwimmbäder</option>
                            {% for pool in pools %}
                                <option value="{{ pool.id }}" {{ template and template.pool and template.pool.id == pool.id ? 'selected' : '' }}>
                                    {{ pool.name }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="form-text">Eine bad-spezifische Vorlage hat Vorrang vor der allgemeinen.</div>
                    </div>
                    <div class="form-check form-switch">
                        <input type="hidden" name="is_active" value="0">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="tplActive"
                               {{ (template is null or template.isActive) ? 'checked' : '' }}>
                        <label class="form-check-label" for="tplActive">Vorlage aktiv</label>
                    </div>
                </div>
            </div>

            <div class="fisch-card">
                <div class="card-header"><i class="fas fa-code"></i> Platzhalter</div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush" style="max-height: 420px; overflow-y: auto;">
                        {% for key, description in placeholders %}
                            <li class="list-group-item py-2">
                                <button type="button" class="btn btn-sm btn-link p-0 js-insert-placeholder"
                                        data-value="{{ key }}"><code>{{ key }}</code></button>
                                <div class="small text-muted">{{ description }}</div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between mt-4">
        <a href="{{ path('admin_fisch_email_templates_index') }}" class="btn btn-outline-secondary">Abbrechen</a>
        <button type="submit" class="btn btn-fisch-primary">
            <i class="fas fa-save me-1"></i>Speichern
        </button>
    </div>
</form>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const content = document.getElementById('tplContent');
    if (!content) return;
    document.querySelectorAll('.js-insert-placeholder').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const value = btn.dataset.value || '';
            const start = content.selectionStart || 0;
            const end = content.selectionEnd || 0;
            content.value = content.value.slice(0, start) + value + content.value.slice(end);
            content.focus();
            content.selectionStart = content.selectionEnd = start + value.length;
        });
    });
})();
</script>
{% endblock %}