{% load i18n %}

{% comment %}
    One card in the Club identity page's Email/PDF tabs -- included with
    `preview` (a dict: key/label/description, plus subject/text for an email),
    `render_url` (the iframe's src, already resolved via {% url %} by the
    caller since {% url %} can't take a variable view name here), and
    `show_text_toggle` (True for an email, which has a plain-text body to
    switch to; False for a PDF, which doesn't).
{% endcomment %}
<div class="card overflow-hidden" data-doc-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>
            {% if preview.subject %}
                <div class="mt-2 font-mono text-xs text-muted"><span class="text-dim">{% trans "Subject:" %}</span> {{ preview.subject }}</div>
            {% endif %}
        </div>
        {% if show_text_toggle %}
            <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>
        {% endif %}
    </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="{{ render_url }}" loading="lazy" title="{{ preview.label }}"></iframe>
    </div>
    {% if show_text_toggle %}
        <pre class="hidden overflow-x-auto overflow-y-visible p-4.5 font-mono text-sm whitespace-pre-wrap text-ink" data-view-panel="text">{{ preview.text }}</pre>
    {% endif %}
</div>