{% extends "management/base.html" %}
{% load i18n lucide %}

{% block heading %}{% trans "Email previews" %}{% endblock heading %}
{% block topbar_context %}<span class="text-sm text-muted">{% trans "Exactly what a member or parent receives -- with sample data, nothing is sent." %}</span>{% endblock topbar_context %}

{% block panel %}
    {% for preview in previews %}
        <div class="card overflow-hidden" data-email-card>
            <div class="flex flex-wrap items-start justify-between gap-3 border-b border-line px-4.5 py-3.5">
                <div>
                    <div class="font-display text-sm font-extrabold tracking-wide text-ink uppercase">{{ preview.label }}</div>
                    <p class="mt-1 max-w-2xl text-sm text-muted">{{ preview.description }}</p>
                    <div class="mt-2 font-mono text-xs text-muted"><span class="text-dim">{% trans "Subject:" %}</span> {{ preview.subject }}</div>
                </div>
                <div class="flex items-center gap-1 rounded-full bg-steel p-1">
                    <button type="button" class="view-toggle-btn active" data-view-btn="html">{% trans "Email" %}</button>
                    <button type="button" class="view-toggle-btn" data-view-btn="text">{% trans "Plain text" %}</button>
                </div>
            </div>

            <div class="bg-subhead p-4" data-view-panel="html">
                <iframe class="h-[560px] w-full rounded-lg border border-line bg-white" src="{% url 'management:email_preview_render' preview.key %}" loading="lazy" title="{{ preview.label }}"></iframe>
            </div>
            <pre class="hidden overflow-x-auto p-4.5 font-mono text-sm whitespace-pre-wrap text-ink" data-view-panel="text">{{ preview.text }}</pre>
        </div>
    {% endfor %}
{% endblock panel %}

{% block extra_body %}
    <script>
        (() => {
            document.querySelectorAll("[data-email-card]").forEach((card) => {
                card.querySelectorAll("[data-view-btn]").forEach((button) => {
                    button.addEventListener("click", () => {
                        card.querySelectorAll("[data-view-btn]").forEach((b) => b.classList.toggle("active", b === button));
                        card.querySelectorAll("[data-view-panel]").forEach((el) => el.classList.toggle("hidden", el.dataset.viewPanel !== button.dataset.viewBtn));
                    });
                });
            });
        })();
    </script>
{% endblock extra_body %}