{#- Macros partagées. À importer : {% from "_composants.html" import alerte, zone_etat %}

    Aucune de ces macros ne lit le contexte de la page : tout passe par les arguments.
    Elles posent les attributs `data-*` que lit `statique/ilot.js` (liste fermée de la
    spec § 1.3) ; les libellés que l'îlot affiche passent par `data-libelle-*`.

    Contenu : zone_etat, alerte, vie_privee, attributs_brouillon (attributs d'un formulaire
    modifiable), bouton_enregistrer, barre_enregistrement, actions, bloc_actions,
    actions_fiche, action_principale, toast, avancement, pastilles_motifs et onglets_page. -#}

{#- Zone d'état d'un formulaire ou d'une page : cible des erreurs (`HX-Retarget:
    #etat-<zone>`, plan §2.10). `contenu` : message initial facultatif. -#}
{% macro zone_etat(zone, contenu="") -%}
<div id="etat-{{ zone }}" class="etat" role="status" aria-live="polite">{{ contenu }}</div>
{%- endmacro %}

{#- Alerte d'erreur (`role="alert"`). -#}
{% macro alerte(message) -%}
<div class="alerte" role="alert">{{ message }}</div>
{%- endmacro %}

{#- Texte de vie privée : une fois par zone IA (spec § 1.6), jamais sous chaque bouton.
    sorte : "offres" (page Offres, sous les onglets), "fiche" (sous l'en-tête de la fiche
    quand une préparation est proposée), "ia" (bandeau de la lettre), "ia_cv" (bandeau du
    CV adapté), "ia_cv_libre" (bandeau du CV adapté en mode libre), "ia_cv_base" (bandeau de Mon CV), "creation" (parcours guidé de Mon CV),
    "documents" (recréer le CV depuis les documents), "gabarit" (écrire l'adaptateur du gabarit Typst personnel). "generation" : ancien nom de
    "offres", gardé jusqu'à CB1. -#}
{% macro vie_privee(sorte="ia") -%}
{% if sorte in ("offres", "fiche", "generation") -%}
<small class="vie-privee">Préparer un dossier envoie l'offre, vos règles de rédaction et votre CV de base à Claude (Anthropic).</small>
{%- elif sorte == "ia_cv" -%}
<small class="vie-privee">Le CV (ou l'élément choisi), l'offre, vos règles et votre profil sont envoyés à Claude (Anthropic). Cliquez dans une puce ou dans l'accroche pour ne réécrire qu'elle.</small>
{%- elif sorte == "ia_cv_libre" -%}
<small class="vie-privee">Le CV (ou le passage choisi), l'offre, vos règles et votre profil sont envoyés à Claude (Anthropic).</small>
{%- elif sorte == "ia_cv_base" -%}
<small class="vie-privee">Le CV (ou l'élément choisi), vos règles et votre profil sont envoyés à Claude (Anthropic). Cliquez dans une puce ou dans l'accroche pour ne réécrire qu'elle.</small>
{%- elif sorte == "creation" -%}
<small class="vie-privee">Les documents, votre consigne, vos règles de rédaction et votre profil sont envoyés à Claude (Anthropic). Rien n'est inventé : ce qui manque dans vos documents reste à compléter.</small>
{%- elif sorte == "documents" -%}
<small class="vie-privee">L'IA propose un nouveau CV ; vous le comparez à l'actuel, élément par élément, avant d'accepter. Les documents cochés, vos règles et votre profil sont envoyés à Claude (Anthropic).</small>
{%- elif sorte == "gabarit" -%}
<small class="vie-privee">Les fichiers Typst du gabarit et de votre CV d'exemple, ainsi que votre consigne, sont envoyés à Claude (Anthropic). Les images et polices restent sur le poste ; ni profil ni règles de rédaction ne sont envoyés.</small>
{%- else -%}
<small class="vie-privee">La lettre (ou le passage choisi), l'offre, vos règles et votre profil sont envoyés à Claude (Anthropic).</small>
{%- endif %}
{%- endmacro %}

{#- Attributs d'un `<form>` dont le brouillon est suivi par l'îlot : modifié ou non,
    état « modifié » (`data-libelle-modifie`), proposition en attente, garde de sortie.
    À poser dans la balise : `<form {{ attributs_brouillon(modifie) }} ...>`.
    `modifie` : le serveur rend un brouillon qui diffère du fichier (`data-modifie="1"`) ;
    `objet` : de quoi parle la garde de sortie (« La lettre », « Le CV »...) ;
    `libelle_modifie` : texte d'état d'un formulaire modifié (propre à la page). -#}
{% macro attributs_brouillon(modifie=False, objet="La page", libelle_modifie="● Modifications non enregistrées") -%}
data-brouillon{% if modifie %} data-modifie="1"{% endif %} data-libelle-modifie="{{ libelle_modifie }}" data-libelle-proposition="Une proposition de l'IA attend votre décision." data-libelle-garde-titre="Modifications non enregistrées" data-libelle-garde-texte="{{ objet }} a changé depuis le dernier enregistrement. Que voulez-vous faire avant de quitter ?" data-libelle-rester="Rester" data-libelle-quitter="Quitter sans enregistrer" data-libelle-enregistrer-quitter="Enregistrer et quitter"
{%- endmacro %}

{#- Le bouton Enregistrer (envoi du formulaire). `oob` : version échangée hors bande,
    pour une réponse partielle qui doit le désactiver (proposition en attente). -#}
{% macro bouton_enregistrer(zone, libelle="Enregistrer", desactive=False, oob=False) -%}
<button type="submit" id="enregistrer-{{ zone }}" class="bouton principal"{% if desactive %} disabled{% endif %}{% if oob %} hx-swap-oob="true"{% endif %}>{{ libelle }}</button>
{%- endmacro %}

{#- Barre d'enregistrement (spec § 1.2), à poser en dernier dans le `<form>`. Collante
    en bas de page. `zone` : suffixe des ids (`#etat-<zone>` reçoit aussi les erreurs) ;
    `etat` : texte initial (« ✓ Version 3, enregistrée il y a 2 h ») ; `modifie` : le
    formulaire diffère du fichier (Annuler visible, Enregistrer actif) ; `boutons` :
        enregistrer  libellé du bouton (« Enregistrer »)
        annuler      {url, cible, select} : GET qui recharge l'éditeur depuis le disque ;
                     `cible` (défaut `#formulaire-<zone>`) et `select` (défaut `cible`)
        telecharger  {url, libelle} : lien « Télécharger le PDF »
        proposition_en_attente  vrai : Enregistrer désactivé
    L'îlot met à jour l'état, Annuler et Enregistrer quand l'utilisateur saisit. -#}
{% macro barre_enregistrement(zone, etat, modifie, boutons) -%}
{% set b = boutons or {} %}
{% set annuler = b.get("annuler") %}
{% set telecharger = b.get("telecharger") %}
<div class="barre-enregistrement" id="barre-{{ zone }}">
  <div class="barre-contenu">
    <div id="etat-{{ zone }}" class="etat etat-barre" role="status" aria-live="polite">{{ etat }}</div>
    <span class="barre-note" hidden></span>
    <div class="barre-boutons">
      {% if telecharger %}
      <a class="bouton" href="{{ telecharger.url }}">{{ telecharger.get("libelle") or "Télécharger le PDF" }}</a>
      {% endif %}
      {% if annuler %}
      {% set cible = annuler.get("cible") or "#formulaire-" ~ zone %}
      <button type="button" class="bouton" id="annuler-{{ zone }}"{% if not modifie %} hidden{% endif %} hx-get="{{ annuler.url }}" hx-target="{{ cible }}" hx-select="{{ annuler.get('select') or cible }}" hx-swap="outerHTML">Annuler les modifications</button>
      {% endif %}
      {{ bouton_enregistrer(zone, b.get("enregistrer") or "Enregistrer", desactive=(not modifie) or b.get("proposition_en_attente")) }}
    </div>
  </div>
</div>
{%- endmacro %}

{#- Une action (bouton, lien, entrée de menu) d'un `contexte.Action`. -#}
{% macro _action(a, cible, principale=False, dans_menu=False) -%}
{% set classes = "bouton-menu" if dans_menu else ("bouton principal" if principale else "bouton") %}
{% if a.methode == "lien" -%}
<a href="{{ a.url }}" class="{{ classes }}"{% if dans_menu %} role="menuitem"{% endif %}>{{ a.libelle }}</a>
{%- elif a.desactive or a.occupe -%}
<button type="button" class="{{ classes }}"{% if dans_menu %} role="menuitem"{% endif %} disabled{% if a.occupe %} aria-busy="true"{% endif %}>{{ a.libelle }}</button>
{%- else -%}
<button type="button" class="{{ classes }}"{% if dans_menu %} role="menuitem"{% endif %} hx-post="{{ a.url }}" hx-vals='{{ a.vals | tojson }}' hx-target="{{ cible }}" hx-swap="outerHTML"{% if a.confirmer %} hx-confirm="{{ a.confirmer }}"{% endif %}>{{ a.libelle }}</button>
{%- endif %}
{%- endmacro %}

{#- Actions d'une offre (règle du § 1.5 : un menu « ⋯ » à partir de trois actions, compte
    de la principale compris ; « Effacer le dossier… » est toujours dans le menu).
    `principale`, `autres`, `reservee_au_menu`, `etiquette` : ceux d'un
    `contexte.Actions` ; `id` : id de l'offre ; `titre` : nom lu par les lecteurs d'écran
    (« Autres actions pour <titre> ») ; `cible` : élément que remplace une action `post`
    (défaut : la carte `#carte-<id>`). -#}
{% macro actions(id, principale, autres, reservee_au_menu, titre="cette offre", etiquette="", cible="") -%}
{% set zone = cible or "#carte-" ~ id %}
{% set total = (autres | length) + (1 if principale else 0) + (1 if reservee_au_menu else 0) %}
{% set dans_menu = (autres + [reservee_au_menu]) if reservee_au_menu else autres %}
{% set menu = dans_menu if total >= 3 else ([reservee_au_menu] if reservee_au_menu else []) %}
{% set directes = [] if total >= 3 else autres %}
<div class="actions-offre">
  {% if etiquette %}<span class="etiquette-candidatee">{{ etiquette }}</span>{% endif %}
  {% if principale %}{{ _action(principale, zone, principale=True) }}{% endif %}
  {% for a in directes %}{{ _action(a, zone) }}{% endfor %}
  {% if menu %}
  <details class="menu-actions" data-menu>
    <summary aria-label="Autres actions pour {{ titre }}" aria-haspopup="menu" aria-expanded="false"><span aria-hidden="true">⋯</span></summary>
    <div class="menu-liste" role="menu">
      {% for a in menu %}{{ _action(a, zone, dans_menu=True) }}{% endfor %}
    </div>
  </details>
  {% endif %}
</div>
{%- endmacro %}

{#- Les actions d'une offre et ce qu'il faut dire dessous : pièces manquantes, échec,
    cause d'indisponibilité de l'IA, et les zones d'erreur `#etat-generation-<id>` et
    `#etat-carte-<id>` (cibles des erreurs des routes de génération et de statut).
    `acts` : un `contexte.Actions`. Rend la carte et l'en-tête de la fiche. -#}
{% macro bloc_actions(id, titre, acts, cible="") -%}
{{ actions(id, acts.principale, acts.autres, acts.reservee_au_menu, titre=titre, etiquette=acts.etiquette, cible=cible) }}
{% if acts.manquantes %}<p class="manquantes">Pièces manquantes : {{ acts.manquantes | join(", ") }}.</p>{% endif %}
{% if acts.message %}<p class="message-echec">{{ acts.message }}</p>{% endif %}
{% if acts.cause and acts.principale and acts.principale.desactive %}<p class="cause">{{ acts.cause }}</p>{% endif %}
{% if acts.lien_cv %}<p class="manquantes">Il manque un CV : créez-le dans <a href="/cv-base">Mon CV</a>, puis utilisez « Utiliser mon CV de base » dans l'onglet CV adapté.</p>{% endif %}
<div id="etat-generation-{{ id }}" class="etat" role="status" aria-live="polite"></div>
<div id="etat-carte-{{ id }}" class="etat" role="status" aria-live="polite"></div>
{%- endmacro %}

{#- Zone d'actions de l'en-tête de la fiche : `#generation-<id>`. Tant qu'une préparation
    tourne (`en_cours`), elle se sonde toute seule (`every 3s`, `GET /offre/<id>/etat`)
    et se remplace (`outerHTML`). Rendue par `offre_base.html` et, seule, par la route
    `/etat`. `entete` : `Actions` de `contexte_offre` ; `titre` : nom de l'offre. -#}
{% macro actions_fiche(id, entete, en_cours, titre="cette offre") -%}
<div id="generation-{{ id }}" class="generation"{% if en_cours %} hx-get="/offre/{{ id }}/etat" hx-trigger="every 3s" hx-target="this" hx-swap="outerHTML"{% endif %}>
  {{ bloc_actions(id, titre, entete, cible="#generation-" ~ id) }}
</div>
{%- endmacro %}

{#- L'action de préparation d'une offre (Préparer, Compléter, Préparation en cours…), à
    poser dans l'état vide d'un onglet (« Pas encore de lettre pour cette offre. »).
    `etat` : un `contexte.Actions` (celui de l'en-tête) ; ne rend rien si l'offre n'a
    plus de préparation à proposer. -#}
{% macro action_principale(etat, id) -%}
{% set p = etat.principale %}
{% if p and p.cle in ("preparer", "completer", "en_cours") %}
<div class="action-principale">
  {{ _action(p, "#generation-" ~ id, principale=True) }}
  {% if etat.cause and p.desactive %}<p class="cause">{{ etat.cause }}</p>{% endif %}
  {% if etat.message %}<p class="message-echec">{{ etat.message }}</p>{% endif %}
  {% if etat.manquantes %}<p class="manquantes">Pièces manquantes : {{ etat.manquantes | join(", ") }}.</p>{% endif %}
</div>
{% endif %}
{%- endmacro %}

{#- Message éphémère (spec § 1.4), échangé hors bande dans `#toasts` : à mettre dans la
    réponse d'un POST. `action` : None, ou {libelle, url, methode, vals, cible, echange}
    (`methode` "post" : formulaire htmx, par exemple « Annuler » qui reposte l'ancien
    statut ; "lien" : lien, par exemple « Voir »). Disparaît après 6 s (l'îlot arrête le
    minuteur tant que le toast a le focus ou le survol). -#}
{% macro toast(texte, action=None) -%}
<div hx-swap-oob="beforeend:#toasts">
  <div class="toast" data-ephemere="6000">
    <span class="toast-texte">{{ texte }}</span>
    {% if action and action.get("methode") == "lien" %}
    <a class="bouton discret" href="{{ action.url }}">{{ action.libelle }}</a>
    {% elif action %}
    <button type="button" class="bouton discret" hx-post="{{ action.url }}" hx-vals='{{ (action.get("vals") or {}) | tojson }}'{% if action.get("cible") %} hx-target="{{ action.cible }}" hx-swap="{{ action.get('echange') or 'outerHTML' }}"{% else %} hx-swap="none"{% endif %}>{{ action.libelle }}</button>
    {% endif %}
  </div>
</div>
{%- endmacro %}

{#- Ligne d'avancement d'une carte : `etapes` = [{libelle, etat}], `etat` ∈ "fait"
    (✓), "en_cours" (…), "a_faire" (○). Le symbole est caché aux lecteurs d'écran, qui
    lisent « Lettre : fait ». -#}
{% macro avancement(etapes) -%}
<ol class="avancement" aria-label="Avancement">
  {% for e in etapes %}
  {% set mot = {"fait": "fait", "en_cours": "en cours", "a_faire": "à faire"}[e.etat] %}
  <li class="etape {{ e.etat }}" aria-label="{{ e.libelle }} : {{ mot }}"><span aria-hidden="true">{{ {"fait": "✓", "en_cours": "…", "a_faire": "○"}[e.etat] }}</span> {{ e.libelle }}</li>
  {% endfor %}
</ol>
{%- endmacro %}

{#- Motifs du score en pastilles : « python +4 » (`motifs` = [{terme, points}]). -#}
{% macro pastilles_motifs(motifs) -%}
{% if motifs %}
<ul class="motifs" aria-label="Motifs du score">
  {% for m in motifs %}
  <li class="pastille-motif">{{ m.terme }}{% if m.points %} {{ "+" if m.points > 0 else "" }}{{ m.points }}{% endif %}</li>
  {% endfor %}
</ul>
{% endif %}
{%- endmacro %}

{#- Onglets d'une page (liens, `aria-current="page"`). `onglets` : [{cle, libelle, href,
    pret, aria_label}] (`pret` vrai ✓, faux ○, None sans symbole) ; `courant` : cle de
    l'onglet affiché ; `nom` : nom de la barre pour les lecteurs d'écran. -#}
{% macro onglets_page(onglets, courant, nom="Sections de l'offre") -%}
<nav class="onglets-page" aria-label="{{ nom | safe }}">
  <ul>
    {% for o in onglets %}
    <li><a href="{{ o.href }}"{% if o.cle == courant %} aria-current="page"{% endif %}{% if o.aria_label %} aria-label="{{ o.aria_label }}"{% endif %}>{{ o.libelle }}{% if o.pret is not none %} <span aria-hidden="true">{{ "✓" if o.pret else "○" }}</span>{% endif %}</a></li>
    {% endfor %}
  </ul>
</nav>
{%- endmacro %}