{#- 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),
    "relecture" (relecture du dossier par un recruteur simulé). "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 == "relecture" -%}
<small class="vie-privee">Pour établir la fiche de la société, l'intitulé de l'offre, le nom de la société et l'adresse de l'annonce sont envoyés à Claude (Anthropic), qui peut consulter cette page en ligne. Ensuite, le CV adapté, la lettre, l'offre, la fiche et vos règles de relecture sont envoyés à Claude, sans accès au web.</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 %}