{#- Apercu du CV compile a la volee (colonne droite de l'editeur). Ce fichier ne contient
    que des macros. Ids : `#apercu-cv` (la zone, remplacee par chaque apercu),
    `#message-apercu` (message « Apercu non mis a jour », echange hors bande).
    Chaque page est une image SVG en `data:` (un SVG en <img> n'execute rien) et, par
    dessus, une couche de reperes : un <rect data-cible="<adresse>"> par element, que
    l'ilot relie au champ correspondant. La couche est cachee aux lecteurs d'ecran : les
    champs de l'editeur restent le chemin accessible. -#}

{#- Message hors bande quand l'apercu ne peut pas etre mis a jour : l'ancien reste. -#}
{% macro message_apercu(raison) -%}
<p id="message-apercu" class="avertissement" role="status" hx-swap-oob="true">Aperçu non mis à jour : {{ raison }}</p>
{%- endmacro %}

{#- La zone d'apercu. `pages` : liste de {numero, src, largeur, hauteur, reperes} (ou
    None : rien a montrer encore) ; `url` : POST qui recompile le brouillon ; `etat` :
    `fichier` (identique au PDF) ou `volee` (recompile) ; `erreur` : pourquoi il n'y a
    pas d'apercu ; `charger` : la zone demande son apercu des son affichage. La
    recompilation apres une saisie, un changement ou un echange de l'editeur est portee
    par la colonne qui l'entoure (`_cv_editeur.html`, macro `formulaire`) : elle n'est
    jamais remplacee, donc ses declencheurs ne se perdent pas pendant un echange. -#}
{% macro apercu_cv(pages, url, etat="fichier", erreur="", charger=False) -%}
<div id="apercu-cv" class="apercu-zone" data-apercu{% if charger %} hx-post="{{ url }}" hx-include="#formulaire-cv" hx-target="this" hx-swap="outerHTML" hx-trigger="load"{% endif %}>
  <div class="apercu-entete">
    <h2>Aperçu <span class="doux">· {{ "identique au PDF" if etat == "fichier" else "recompilé à la volée" }}</span></h2>
    <span class="doux">Cliquez sur un élément pour le modifier</span>
  </div>
  <p id="message-apercu" class="etat" role="status" aria-live="polite">{% if erreur %}Aperçu non mis à jour : {{ erreur }}{% endif %}</p>
  {% if pages %}
  {% for page in pages %}
  <div class="apercu-page">
    <img src="{{ page.src }}" alt="Aperçu de la page {{ page.numero }} du CV">
    <svg class="reperes" viewBox="0 0 {{ page.largeur }} {{ page.hauteur }}" aria-hidden="true" focusable="false">
      {% for r in page.reperes %}
      <rect x="{{ r.x }}" y="{{ r.y }}" width="{{ r.largeur }}" height="{{ r.hauteur }}" data-cible="{{ r.adresse }}"></rect>
      {% endfor %}
    </svg>
  </div>
  {% endfor %}
  {% elif not erreur %}
  <p class="aide">Aperçu en préparation…</p>
  {% endif %}
</div>
{%- endmacro %}