{#- Bandeau IA collant (Lettre, CV adapté, Mon CV, mode libre) et barre de décision. À importer :
        {% from "_bandeau_ia.html" import pilule, bandeau, barre_decision %}

    Types : `Agent` = {disponible: bool, cause: str} (le bandeau `agent` déjà passé aux
    pages) ; `Decision` = {url, vals, inclure, cible, echange} (un POST htmx ; `inclure` :
    sélecteur `hx-include`, vide sinon).

    Le bandeau est posé dans le `<form data-brouillon>` de la page : le bouton d'envoi
    poste donc tout le formulaire (brouillon compris), plus ses champs `consigne`,
    `portee`, `adresse`, `debut`, `fin`, `texte`. La réponse remplace `#editeur-<zone>`
    (`innerHTML`) : la barre de décision prend la place du bandeau, la différence celle du
    champ. Comportement (ouverture, Ctrl K, suggestions, portée) : `statique/ilot.js`,
    d'après les attributs `data-bandeau-ia`, `data-suggestion`, `data-portee`,
    `data-portee-element` et `data-libelle-*`. -#}
{% from "_composants.html" import vie_privee as mention_vie_privee %}

{% macro icone() -%}
<svg class="icone-ia" width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"></path></svg>
{%- endmacro %}

{#- Le bouton « <libelle> · Ctrl K » qui déplie le bandeau. Agent indisponible : grisé,
    et la cause est affichée. -#}
{% macro pilule(zone, libelle, agent) -%}
<button type="button" class="pilule-ia" id="pilule-{{ zone }}" aria-controls="corps-{{ zone }}" aria-expanded="false" aria-keyshortcuts="Control+K"{% if not agent.disponible %} disabled{% endif %}>
  {{ icone() }}<span class="pilule-texte">{{ libelle }}</span><kbd class="raccourci">Ctrl K</kbd>
</button>
{%- endmacro %}

{#- Le bandeau : la pilule, et la partie dépliée (consigne, bouton d'envoi, ×, suggestions,
    portée, mention de vie privée). `proposer` : URL du POST de proposition ; `portee` :
    {libelle, valeur} (« Portée : toute la lettre », `lettre`) ; `suggestions` : textes
    des boutons à bascule ; `libelles` : chaque entrée devient `data-libelle-<cle>` lu
    par l'îlot. Clés : `pilule`, `consigne` (exemple de consigne), `bouton_tout`,
    `portee_tout`, et selon la page `bouton_selection` / `portee_selection` (lettre, mode
    libre ; `{n}` : nombre de mots) ou `bouton_puce`, `portee_puce` (`{debut}` : 38
    premiers caractères), `bouton_accroche`, `portee_accroche`, `consigne_puce`,
    `consigne_accroche`, `lien_tout` (CV). `vie_privee` : sorte de la mention ;
    `ouvert` : partie dépliée dès l'affichage. -#}
{% macro bandeau(zone, proposer, agent, portee, suggestions, libelles, vie_privee="ia", ouvert=False) -%}
<section id="bandeau-{{ zone }}" class="bandeau-ia" data-bandeau-ia{% for cle, texte in libelles.items() %} data-libelle-{{ cle | replace("_", "-") }}="{{ texte }}"{% endfor %} aria-label="Assistant IA">
  {{ pilule(zone, libelles.pilule, agent) }}
  <div id="corps-{{ zone }}" class="bandeau-corps"{% if not ouvert %} hidden{% endif %}>
    <div class="bandeau-ligne">
      {{ icone() }}
      <label class="cache-visuel" for="consigne-{{ zone }}">Consigne pour l'IA</label>
      <input type="text" id="consigne-{{ zone }}" name="consigne" class="consigne-champ" placeholder="{{ libelles.consigne }}" autocomplete="off">
      <button type="button" class="bouton principal" id="envoyer-{{ zone }}" hx-post="{{ proposer }}" hx-target="#editeur-{{ zone }}" hx-swap="innerHTML" hx-indicator="#indicateur-{{ zone }}" hx-sync="this:drop"{% if not agent.disponible %} disabled{% endif %}>{{ libelles.bouton_tout }}</button>
      <button type="button" class="bouton-fermer" aria-label="Fermer">×</button>
    </div>
    <div class="bandeau-ligne bandeau-ligne-suggestions">
      {% for suggestion in suggestions %}
      <button type="button" class="suggestion" data-suggestion aria-pressed="false">{{ suggestion }}</button>
      {% endfor %}
      <span class="portee"><span data-portee>{{ portee.libelle }}</span>{% if libelles.get("lien_tout") %} <button type="button" class="bouton-lien" data-portee-element="tout" hidden>{{ libelles.lien_tout }}</button>{% endif %}</span>
    </div>
    <input type="hidden" name="portee" value="{{ portee.valeur }}">
    <input type="hidden" name="adresse" value="">
    <input type="hidden" name="debut" value="">
    <input type="hidden" name="fin" value="">
    <input type="hidden" name="texte" value="">
    {{ mention_vie_privee(vie_privee) }}
    <span id="indicateur-{{ zone }}" class="indicateur">L'IA travaille…</span>
  </div>
  {% if not agent.disponible %}<p class="cause">{{ agent.cause }}</p>{% endif %}
</section>
{%- endmacro %}

{#- Un bouton de décision (Accepter, Refuser, Tout accepter...) : POST htmx d'une
    `Decision`. -#}
{% macro _decision(d, libelle, principal=False) -%}
<button type="button" class="bouton{% if principal %} principal{% endif %}" hx-post="{{ d.url }}" hx-vals='{{ (d.get("vals") or {}) | tojson }}' hx-target="{{ d.cible }}" hx-swap="{{ d.echange }}"{% if d.get("inclure") %} hx-include="{{ d.inclure }}"{% endif %}>{{ libelle }}</button>
{%- endmacro %}

{#- Barre de décision (`role="status"`), à la place du bandeau pendant qu'une proposition
    attend. `nombre_ecarts` None (lettre, mode libre) : « Proposition de l'IA · <resume> »,
    légende « ajouté · retiré », boutons Refuser / Accepter. `nombre_ecarts` entier (CV,
    spec § 5.4) : « Proposition de l'IA · N modifications, affichées sous les champs
    concernés ; acceptez-les une à une ou toutes ensemble. », boutons Tout refuser / Tout
    accepter (`refuser` et `accepter` portent alors `action=tout-refuser` /
    `tout-accepter`). -#}
{% macro barre_decision(zone, accepter, refuser, resume="", nombre_ecarts=None) -%}
<div id="decision-{{ zone }}" class="barre-decision" role="status">
  <div class="decision-texte">
    <strong>Proposition de l'IA</strong>
    {% if nombre_ecarts is none %}
    {% if resume %}<span class="doux"> · {{ resume }}</span>{% endif %}
    <div class="legende"><span class="ajout">ajouté</span> · <span class="retrait">retiré</span></div>
    {% elif nombre_ecarts == 1 %}
    <span class="doux"> · 1 modification, affichée sous le champ concerné ; acceptez-la ou refusez-la.</span>
    {% else %}
    <span class="doux"> · {{ nombre_ecarts }} modifications, affichées sous les champs concernés ; acceptez-les une à une ou toutes ensemble.</span>
    {% endif %}
  </div>
  <div class="decision-boutons">
    {{ _decision(refuser, "Refuser" if nombre_ecarts is none else "Tout refuser") }}
    {{ _decision(accepter, "Accepter" if nombre_ecarts is none else "Tout accepter", principal=True) }}
  </div>
</div>
{%- endmacro %}