{% extends sitecopy_base %}
{% set sitecopy_screen = 'preview' %}
{% block title %}Previsualizar {{ group.title }}{% if sitecopy_brand %} · {{ sitecopy_brand }}{% endif %}{% endblock %}

{% block head %}<link rel="stylesheet" href="{{ url_for(sitecopy_bp ~ '.static', filename='css/sitecopy-shell.css') }}"><link rel="stylesheet" href="{{ url_for(sitecopy_bp ~ '.static', filename='css/sitecopy-admin.css') }}">{% endblock %}

{% block content %}
<a class="adm-back" href="{{ url_for(sitecopy_bp ~ '.group_edit', group_key=group.key) }}">← Volver a editar</a>

<div class="ct-head">
    <div>
        <h1 class="adm-title">Previsualización · {{ group.title }}</h1>
        <p class="ct-lead">
            Así se va a ver la página <code>{{ preview_path }}</code> con los cambios sin
            publicar aplicados. Nadie más ve esto hasta que publiques.
        </p>
    </div>
    {% if pending %}
    <form method="post" action="{{ url_for(sitecopy_bp ~ '.group_save', group_key=group.key) }}">
        <input type="hidden" name="_sitecopy_csrf" value="{{ sitecopy_csrf }}">
        <button type="submit" name="action" value="publish" class="btn btn-primary btn-lg">
            Publicar {{ pending }} {{ 'cambio' if pending == 1 else 'cambios' }}
        </button>
    </form>
    {% endif %}
</div>

<div class="ct-preview" data-ct-preview
     data-preview-url="{{ preview_path }}?preview=1"
     data-site-url="{{ sitecopy_site_url }}"
     data-preview-path="{{ preview_path }}">

    {# Not a tablist: these buttons swap what the stage SHOWS (a device width, or a
       share-card facsimile), and there are no tabpanels wired with aria-controls. A
       tablist would promise arrow-key navigation that isn't here — same call the
       editor's device switcher makes. role=group + aria-pressed instead. #}
    <div class="ct-formats" role="group" aria-label="Formato de previsualización">
        {% for device in devices %}
        <button type="button" class="ct-format{% if loop.first %} is-current{% endif %}"
                data-ct-format="device" data-width="{{ device.width }}" data-height="{{ device.height }}"
                aria-pressed="{{ 'true' if loop.first else 'false' }}">
            {{ device.label }}
            <small>{{ device.width }}px</small>
        </button>
        {% endfor %}
        {% for card in cards %}
        <button type="button" class="ct-format" data-ct-format="card" data-card="{{ card.key }}"
                aria-pressed="false">
            {{ card.label }}
            <small>al compartir</small>
        </button>
        {% endfor %}
    </div>

    <div class="ct-preview-bar">
        <span class="ct-preview-url">{{ sitecopy_site_url }}{{ preview_path }}</span>
        <span class="ct-preview-tools">
            <button type="button" class="ct-preview-reload" data-ct-reload>Actualizar</button>
            <a href="{{ preview_path }}?preview=1" target="_blank" rel="noopener">Abrir en otra pestaña ↗</a>
        </span>
    </div>

    {# Device frame: the REAL page, rendered with the pending drafts applied. #}
    <div class="ct-stage" data-ct-stage>
        <div class="ct-frame" data-ct-frame>
            <iframe title="Previsualización del sitio" data-ct-iframe
                    src="{{ preview_path }}?preview=1" loading="lazy"></iframe>
        </div>
    </div>

    {# Share/search cards. Filled from the previewed document's own <title> and
       meta tags, so they show exactly what Google and WhatsApp will read — no
       second implementation of the meta logic to drift out of sync. #}
    <div class="ct-cards" data-ct-cards hidden>
        <div class="ct-card-panel" data-ct-card-panel="google" hidden>
            <p class="ct-card-kind">Resultado en Google</p>
            <div class="serp">
                <div class="serp-site">
                    <span class="serp-favicon" aria-hidden="true">{{ sitecopy_brand[:1] }}</span>
                    <span>
                        <span class="serp-name">{{ sitecopy_brand }}</span>
                        <span class="serp-url" data-ct-serp-url></span>
                    </span>
                </div>
                <p class="serp-title" data-ct-serp-title></p>
                <p class="serp-desc" data-ct-serp-desc></p>
            </div>
        </div>

        <div class="ct-card-panel" data-ct-card-panel="whatsapp" hidden>
            <p class="ct-card-kind">Link compartido en WhatsApp</p>
            <div class="wa-bubble">
                <div class="wa-preview">
                    <img class="wa-image" alt="" data-ct-og-image hidden>
                    <div class="wa-text">
                        <p class="wa-title" data-ct-og-title></p>
                        <p class="wa-desc" data-ct-og-desc></p>
                        <p class="wa-host" data-ct-og-host></p>
                    </div>
                </div>
                <p class="wa-link" data-ct-og-url></p>
            </div>
        </div>

        <div class="ct-card-panel" data-ct-card-panel="twitter" hidden>
            <p class="ct-card-kind">Tarjeta en Twitter/X</p>
            <div class="tw-card">
                <img class="tw-image" alt="" data-ct-tw-image hidden>
                <div class="tw-text">
                    <p class="tw-host" data-ct-tw-host></p>
                    <p class="tw-title" data-ct-tw-title></p>
                    <p class="tw-desc" data-ct-tw-desc></p>
                </div>
            </div>
        </div>

        <p class="ct-card-fallback" data-ct-card-fallback hidden>
            No pudimos leer los datos de la página. Probá con «Actualizar».
        </p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for(sitecopy_bp ~ '.static', filename='js/sitecopy-admin.js') }}"></script>
{% endblock %}