{# Le thème des formulaires de l'administration.

   Ce que la mise en page par défaut ne sait pas faire : se figurer ce que
   donneront Google et un lien partagé, et garder sous les yeux la demande
   d'aide à la rédaction pendant qu'on écrit. #}

{% block search_preview_widget %}
    {# L'aperçu du résultat de recherche, alimenté par les champs voisins. #}
    <div class="search-preview" data-search-preview>
        <p class="search-preview__url">{{ app.request.host }}<span data-preview-slug></span></p>
        <p class="search-preview__title" data-preview-title>Le titre de recherche s’affichera ici</p>
        <p class="search-preview__description" data-preview-description>La description de recherche s’affichera ici, sur deux lignes environ.</p>
    </div>
{% endblock %}

{% block share_preview_widget %}
    {# La vignette d'un lien collé dans un message ou sur un réseau.

       La photo de la page est la vignette : elle est posée ici, par le serveur,
       et non attendue d'un script. Personne ne choisit d'image de partage à
       part, et un aperçu qui annonce un rectangle gris devant une page qui
       porte une photo raconte le contraire de ce qui sortira. #}
    {% set content = form.parent.vars.data|default(null) %}
    {% set photo = content and content.image and content.image.path ? content.image : null %}
    <div class="share-preview" data-share-preview>
        <div class="share-preview__image">
            <img src="{{ photo ? photo.path|imagine_filter('social') }}" alt="{{ photo ? photo.alternativeText }}" data-share-image{{ photo ? '' : ' hidden' }}>
            <span class="share-preview__empty" data-share-empty{{ photo ? ' hidden' : '' }}>Sans photo, le lien se partage en rectangle gris.</span>
        </div>
        <div class="share-preview__text">
            <p class="share-preview__host">{{ app.request.host|upper }}</p>
            <p class="share-preview__title" data-share-title>Le titre partagé s’affichera ici</p>
            <p class="share-preview__description" data-share-description>Le texte partagé s’affichera ici.</p>
        </div>
    </div>
{% endblock %}

{% block page_preview_widget %}
    {# La page publique, rendue en vrai et remise à jour à chaque phrase tapée.
       Le cadre est une fenêtre de bureau réduite : la mise en page est celle du
       site, pas une approximation dessinée ici. #}
    {% set endpoint = admin_preview_url(form.parent.vars.data|default(null)) %}

    <div class="page-preview"{% if endpoint %} data-page-preview="{{ endpoint }}"{% endif %}>
        <p class="page-preview__label">La page telle qu’elle sortira</p>

        {% if endpoint %}
            <div class="page-preview__screen">
                <iframe class="page-preview__frame" title="Aperçu de la page publique" data-preview-frame loading="lazy"></iframe>
            </div>
        {% else %}
            <p class="page-preview__caption">L’aperçu s’affiche une fois la fiche créée.</p>
        {% endif %}

        {% if caption %}<p class="page-preview__caption">{{ caption }}</p>{% endif %}
    </div>
{% endblock %}

{% block writing_prompt_widget %}
    {# Repliée par défaut : elle sert à qui la cherche, et laisse la place au
       texte à qui écrit déjà. #}
    <details class="writing-prompt">
        <summary>Aide à la rédaction</summary>
        <p class="writing-prompt__intro">
            Copiez ce texte, collez-le dans ChatGPT, puis rapportez la réponse dans les champs
            ci-dessous. Rien n’est envoyé nulle part depuis ce site : il n’y a ni clé, ni compte,
            ni appel automatique. Relisez toujours avant d’enregistrer.
        </p>
        <div class="writing-prompt__actions">
            <button type="button" class="btn btn-primary js-copy-prompt" data-copied="Copié">Copier le texte</button>
            <a href="https://chatgpt.com/" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">Ouvrir ChatGPT</a>
        </div>
        <textarea class="form-control font-monospace js-prompt-text" rows="18" readonly>{{ prompt }}</textarea>
    </details>
{% endblock %}