{#- Editeur du CV au gabarit (onglet CV d'une offre et Mon CV). Ce fichier ne contient que
    des macros : il s'importe sans contexte.
    Ids : `#formulaire-cv` (le formulaire, cible de l'enregistrement et des operations de
    structure), `#editeur-cv` (bandeau IA ou barre de decision, puis les champs : cible
    des propositions et des ecarts), `#apercu-cv` (voir `_cv_apercu.html`), `#etat-cv`
    (zone d'etat de la barre, cible de toutes les erreurs).
    Chaque champ porte `data-repere="<adresse>"` (adresses du socle : `identite`,
    `accroche`, `sections[i]`, `sections[i].entrees[j]`, `...puces[k]`,
    `sections[i].lignes[j]`, `sections[i].texte`) et un `id` stable derive de l'adresse.
    Contrats de l'ilot : poignees `button[data-poignee][data-repere]` dans un
    `[data-parent]`, champs `adresse` et `vers` et bouton `[data-operation=deplacer]` ;
    portee de l'IA `textarea[data-portee-element]` et son bouton ✦ dans le meme <li>. -#}
{% from "_composants.html" import attributs_brouillon, barre_enregistrement, zone_etat, vie_privee %}

{#- `id` stable d'un champ, derive de son adresse : sections[0].titre -> c-sections-0-titre -#}
{%- macro ident(adresse) -%}
c-{{ adresse | replace("[", "-") | replace("]", "") | replace(".", "-") }}
{%- endmacro %}

{% macro icone_corbeille() -%}
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>
{%- endmacro %}

{% macro icone_ia() -%}
<svg 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><path d="M19 15l.7 1.8 1.8.7-1.8.7L19 20l-.7-1.8-1.8-.7 1.8-.7z" fill="currentColor"></path></svg>
{%- endmacro %}

{#- Poignee de deplacement : glisser-deposer, ou ↑ ↓ au clavier (ilot). `focus` : adresse
    de l'element qui vient d'etre deplace (la poignee reprend le focus). -#}
{% macro poignee(adresse, libelle, focus="") -%}
<button type="button" class="poignee" data-poignee data-repere="{{ adresse }}"{% if focus == adresse %} data-focus{% endif %} aria-label="Déplacer {{ libelle }}" aria-describedby="aide-deplacer" title="Glisser, ou ↑ ↓ au clavier"><svg width="12" height="18" viewBox="0 0 12 18" aria-hidden="true" focusable="false"><circle cx="3" cy="3" r="1.6" fill="currentColor"></circle><circle cx="9" cy="3" r="1.6" fill="currentColor"></circle><circle cx="3" cy="9" r="1.6" fill="currentColor"></circle><circle cx="9" cy="9" r="1.6" fill="currentColor"></circle><circle cx="3" cy="15" r="1.6" fill="currentColor"></circle><circle cx="9" cy="15" r="1.6" fill="currentColor"></circle></svg></button>
{%- endmacro %}

{#- Bouton d'operation de structure : poste le formulaire entier, rend le formulaire. -#}
{% macro bouton_op(contenu, operation, adresse, cibles, aria="", classe="bouton") -%}
<button type="button" class="{{ classe }}" hx-post="{{ cibles.structure }}" hx-vals='{{ {"operation": operation, "adresse": adresse} | tojson }}' hx-target="#formulaire-cv" hx-swap="outerHTML"{% if aria %} aria-label="{{ aria }}"{% endif %}>{{ contenu }}</button>
{%- endmacro %}

{#- Les ecarts de la proposition de l'IA qui s'affichent a cette adresse : difference,
    Accepter, Refuser. `en_liste` : l'ecart est un <li> (dans une liste de puces). -#}
{% macro ecarts_sous(ecarts, adresse, cibles, en_liste=False) -%}
{% set noms = {"modifie": "Modification proposée", "ajoute": "Ajout proposé", "retire": "Retrait proposé"} %}
{% for e in ecarts.get(adresse) or [] %}
<{{ "li" if en_liste else "div" }} class="ecart" role="group" aria-label="{{ noms[e.sorte] }} par l'IA">
  <p class="aide">{{ noms[e.sorte] }}</p>
  <div class="differences">{{ e.avant | diff_mots(e.apres) }}</div>
  <div class="ecart-actions">
    <button type="button" class="bouton principal" hx-post="{{ cibles.ecart }}" hx-vals='{{ {"action": "accepter", "cle": e.cle} | tojson }}' hx-target="#editeur-cv" hx-swap="innerHTML">Accepter</button>
    <button type="button" class="bouton" hx-post="{{ cibles.ecart }}" hx-vals='{{ {"action": "refuser", "cle": e.cle} | tojson }}' hx-target="#editeur-cv" hx-swap="innerHTML">Refuser</button>
  </div>
</{{ "li" if en_liste else "div" }}>
{% endfor %}
{%- endmacro %}

{#- CV dont le fichier est refuse (gabarit inconnu, YAML illisible, invalide) : alerte,
    rien a editer ; la page garde ses onglets. `diag` : `cv_formulaire.diagnostic` ;
    `lien_historique` : l'historique, pour restaurer une version. -#}
{% macro cv_illisible(diag, lien_historique) -%}
<div id="cv-illisible" class="bloc">
  <div class="alerte" role="alert">
    {% if diag.version %}
    Ce CV n'est pas au gabarit à jour de cette version de job2apply (gabarit lu : {{ diag.lu }}, attendu : {{ diag.attendu }}) : mettez job2apply à jour ou restaurez une version.
    {% else %}
    Le CV n'est pas lisible ou ne respecte pas le gabarit :
    {% endif %}
    <ul>{% for e in diag.erreurs[:20] %}<li>{{ e }}</li>{% endfor %}</ul>
  </div>
  <p><a href="{{ lien_historique }}">Voir l'historique pour restaurer une version</a></p>
  {{ zone_etat("cv") }}
</div>
{%- endmacro %}

{#- Contenu de `#editeur-cv` : de quoi glisser-deposer (champs `adresse` et `vers`, bouton
    cache), le gabarit et l'empreinte du fichier lu (une reponse partielle ramene ainsi un
    formulaire complet), le haut (bandeau IA ou barre de decision), les champs caches de
    la proposition en cours et de l'origine, puis l'identite, l'accroche et les sections. `d` :
    `cv_formulaire.vue(...)` ; `ecarts` : adresse -> ecarts a y afficher. -#}
{% macro contenu(d, empreinte, cibles, haut, ecarts, propose="", refuses="", origine="", focus="", avertissement="", identite_ouverte=False) -%}
{% set champs_identite = (("nom", "Nom"), ("titre", "Titre"), ("email", "E-mail"), ("telephone", "Téléphone"), ("ville", "Ville"), ("site", "Site")) %}
{% set types = {"experiences": "expériences", "paires": "liste de paires", "texte": "paragraphe"} %}
<input type="hidden" name="d.gabarit" value="{{ d.gabarit }}">
<input type="hidden" name="empreinte" value="{{ empreinte }}">
<input type="hidden" name="adresse" value="">
<input type="hidden" name="vers" value="">
<button type="button" hidden tabindex="-1" aria-hidden="true" data-operation="deplacer" hx-post="{{ cibles.structure }}" hx-vals='{"operation": "deplacer"}' hx-target="#formulaire-cv" hx-swap="outerHTML"></button>
<p id="aide-deplacer" class="cache-visuel">Glisser, ou ↑ ↓ au clavier</p>
{{ haut }}
{% if avertissement %}<p class="avertissement" role="status">{{ avertissement }}</p>{% endif %}
{% if propose %}
<input type="hidden" name="propose" value="{{ propose }}">
<input type="hidden" name="refuses" value="{{ refuses }}">
{% endif %}
{% if origine %}<input type="hidden" name="origine" value="{{ origine }}">{% endif %}

<details id="identite" class="cv-bloc"{% if identite_ouverte %} open{% endif %}>
  <summary>Identité <span class="doux">· {{ d.identite.nom }} · {{ d.identite.titre }}</span></summary>
  <div class="grille-champs">
    {% for cle, libelle in champs_identite %}
    {% set adr = "identite." ~ cle %}
    <div>
      <label class="champ-etiquette" for="{{ ident(adr) }}">{{ libelle }}
        <input type="text" id="{{ ident(adr) }}" name="d.identite.{{ cle }}" value="{{ d.identite[cle] }}"{% if cle == "nom" %} data-repere="identite"{% endif %}>
      </label>
      {{ ecarts_sous(ecarts, adr, cibles) }}
    </div>
    {% endfor %}
  </div>
</details>

<div class="cv-bloc">
  <label class="champ-etiquette" for="{{ ident('accroche') }}">Accroche</label>
  <div class="cv-puce">
    <textarea id="{{ ident('accroche') }}" name="d.accroche" rows="2" data-auto data-repere="accroche" data-portee-element="accroche">
{{ d.accroche }}</textarea>
    <button type="button" class="icone ia" data-portee-element="accroche" data-repere="accroche" aria-label="Réécrire l'accroche avec l'IA" title="Réécrire avec l'IA"{% if not cibles.proposer %} disabled{% endif %}>{{ icone_ia() }}</button>
  </div>
  {{ ecarts_sous(ecarts, "accroche", cibles) }}
</div>

<div class="cv-sections">
  {{ ecarts_sous(ecarts, "sections", cibles) }}
  {% for s in d.sections %}
  {% set i = loop.index0 %}
  {% set adr = "sections[" ~ i ~ "]" %}
  {% set base = "d.sections." ~ i %}
  <section class="cv-section" data-parent="sections" aria-label="Section {{ s.titre or (i + 1) }}">
    <div class="cv-section-tete">
      {{ poignee(adr, "la section " ~ s.titre, focus) }}
      <input type="text" id="{{ ident(adr) }}" name="{{ base }}.titre" value="{{ s.titre }}" data-repere="{{ adr }}" aria-label="Titre de la section ({{ types[s.type] | default(s.type) }})">
      <input type="hidden" name="{{ base }}.type" value="{{ s.type }}">
      {{ bouton_op(icone_corbeille(), "supprimer", adr, cibles, "Supprimer la section " ~ s.titre, "icone") }}
    </div>
    {{ ecarts_sous(ecarts, adr ~ ".titre", cibles) }}
    {% if s.type == "experiences" %}
    <div class="cv-entrees">
      {{ ecarts_sous(ecarts, adr ~ ".entrees", cibles) }}
      {% for e in s.entrees %}
      {% set j = loop.index0 %}
      {% set adr_e = adr ~ ".entrees[" ~ j ~ "]" %}
      {% set base_e = base ~ ".entrees." ~ j %}
      <div class="cv-entree" data-parent="entrees" role="group" aria-label="Expérience {{ e.role or (j + 1) }}">
        <div class="cv-entree-tete">
          {{ poignee(adr_e, "l'expérience " ~ e.role, focus) }}
          <div class="cv-entree-corps">
            <div class="cv-champs-entree">
              <label class="champ-etiquette" for="{{ ident(adr_e) }}">Poste
                <input type="text" id="{{ ident(adr_e) }}" name="{{ base_e }}.role" value="{{ e.role }}" data-repere="{{ adr_e }}">
              </label>
              <label class="champ-etiquette" for="{{ ident(adr_e ~ '.organisation') }}">Organisation
                <input type="text" id="{{ ident(adr_e ~ '.organisation') }}" name="{{ base_e }}.organisation" value="{{ e.organisation }}">
              </label>
              <label class="champ-etiquette" for="{{ ident(adr_e ~ '.dates') }}">Dates
                <input type="text" id="{{ ident(adr_e ~ '.dates') }}" name="{{ base_e }}.dates" value="{{ e.dates }}">
              </label>
            </div>
            {{ ecarts_sous(ecarts, adr_e ~ ".role", cibles) }}
            {{ ecarts_sous(ecarts, adr_e ~ ".organisation", cibles) }}
            {{ ecarts_sous(ecarts, adr_e ~ ".dates", cibles) }}
            <label class="champ-etiquette" for="{{ ident(adr_e ~ '.sous_titre') }}">Sous-titre
              <textarea id="{{ ident(adr_e ~ '.sous_titre') }}" name="{{ base_e }}.sous_titre" rows="1" data-auto>
{{ e.sous_titre }}</textarea>
            </label>
            {{ ecarts_sous(ecarts, adr_e ~ ".sous_titre", cibles) }}
            <ul class="cv-puces" aria-label="Puces de l'expérience {{ e.role or (j + 1) }}">
              {{ ecarts_sous(ecarts, adr_e ~ ".puces", cibles, True) }}
              {% for p in e.puces %}
              {% set k = loop.index0 %}
              {% set adr_p = adr_e ~ ".puces[" ~ k ~ "]" %}
              <li class="cv-puce" data-parent="puces">
                {{ poignee(adr_p, "cette puce", focus) }}
                <textarea id="{{ ident(adr_p) }}" name="{{ base_e }}.puces.{{ k }}" rows="1" data-auto data-repere="{{ adr_p }}" data-portee-element="puce" aria-label="Puce {{ k + 1 }}">
{{ p }}</textarea>
                <button type="button" class="icone ia" data-portee-element="puce" data-repere="{{ adr_p }}" aria-label="Réécrire cette puce avec l'IA" title="Réécrire avec l'IA"{% if not cibles.proposer %} disabled{% endif %}>{{ icone_ia() }}</button>
                {{ bouton_op(icone_corbeille(), "supprimer", adr_p, cibles, "Supprimer cette puce", "icone") }}
              </li>
              {{ ecarts_sous(ecarts, adr_p, cibles, True) }}
              {% endfor %}
            </ul>
            {{ bouton_op("+ Ajouter une puce", "ajouter", adr_e ~ ".puces", cibles, "", "ajouter") }}
          </div>
          {{ bouton_op("×", "supprimer", adr_e, cibles, "Supprimer l'expérience " ~ e.role, "bouton") }}
        </div>
      </div>
      {{ ecarts_sous(ecarts, adr_e, cibles) }}
      {% endfor %}
    </div>
    {{ bouton_op("+ Ajouter une expérience", "ajouter", adr ~ ".entrees", cibles, "", "ajouter") }}
    {% elif s.type == "paires" %}
    <div class="cv-lignes">
      {{ ecarts_sous(ecarts, adr ~ ".lignes", cibles) }}
      {% for l in s.lignes %}
      {% set j = loop.index0 %}
      {% set adr_l = adr ~ ".lignes[" ~ j ~ "]" %}
      <div class="cv-ligne" data-parent="lignes">
        {{ poignee(adr_l, "la ligne " ~ l.libelle, focus) }}
        <input type="text" class="libelle" id="{{ ident(adr_l) }}" name="{{ base }}.lignes.{{ j }}.libelle" value="{{ l.libelle }}" data-repere="{{ adr_l }}" aria-label="Libellé de la ligne {{ j + 1 }}">
        <input type="text" class="valeur" name="{{ base }}.lignes.{{ j }}.valeur" value="{{ l.valeur }}" aria-label="Valeur de la ligne {{ j + 1 }}">
        {{ bouton_op("×", "supprimer", adr_l, cibles, "Supprimer la ligne " ~ l.libelle, "bouton") }}
      </div>
      {{ ecarts_sous(ecarts, adr_l, cibles) }}
      {% endfor %}
    </div>
    {{ bouton_op("+ Ajouter une ligne", "ajouter", adr ~ ".lignes", cibles, "", "ajouter") }}
    {% else %}
    <label class="champ-etiquette" for="{{ ident(adr ~ '.texte') }}">Texte
      <textarea id="{{ ident(adr ~ '.texte') }}" name="{{ base }}.texte" rows="3" data-auto data-repere="{{ adr }}.texte">
{{ s.texte }}</textarea>
    </label>
    {{ ecarts_sous(ecarts, adr ~ ".texte", cibles) }}
    {% endif %}
  </section>
  {{ ecarts_sous(ecarts, adr, cibles) }}
  {% endfor %}
</div>

<div class="ligne-flex">
  <label class="champ-etiquette" for="type-nouvelle-section">Type de la nouvelle section
    <select id="type-nouvelle-section" name="type">
      <option value="experiences">Expériences</option>
      <option value="paires">Liste de paires (compétences, langues…)</option>
      <option value="texte">Paragraphe</option>
    </select>
  </label>
  {{ bouton_op("+ Ajouter une section", "ajouter", "sections", cibles, "", "ajouter") }}
</div>
{%- endmacro %}

{#- Le formulaire du CV en entier : l'editeur a gauche, l'apercu a droite, la barre
    d'enregistrement en bas. `contenu` et `apercu` : HTML deja rendus ; `erreur` : echec de
    la compilation du PDF ; `perime` : le PDF ne correspond plus au CV enregistre ;
    `boutons` : ceux de `barre_enregistrement`. Les erreurs ciblent `#etat-cv`. -#}
{% macro formulaire(cibles, contenu, apercu, message="", modifie=False, erreur="", perime=False, boutons=None) -%}
<form id="formulaire-cv" class="cv-formulaire" {{ attributs_brouillon(modifie, "Le CV") }} hx-post="{{ cibles.enregistrer }}" hx-target="#formulaire-cv" hx-swap="outerHTML">
  {% if erreur %}
  <div class="alerte" role="alert">La compilation du PDF a échoué ; le CV est enregistré.
    <pre>{{ erreur }}</pre></div>
  {% endif %}
  {% if perime %}<p class="avertissement" role="status">PDF périmé : il ne correspond plus au CV enregistré ; enregistrez le CV pour le recompiler.</p>{% endif %}
  <div class="cv-colonnes">
    <div id="editeur-cv" class="cv-editeur">{{ contenu }}</div>
    <aside class="apercu-colonne" aria-label="Aperçu du CV" hx-post="{{ cibles.apercu }}" hx-include="#formulaire-cv" hx-target="#apercu-cv" hx-swap="outerHTML" hx-sync="this:queue last" hx-trigger="input changed delay:500ms from:#formulaire-cv, change from:#formulaire-cv, htmx:afterSwap from:#editeur-cv">{{ apercu }}</aside>
  </div>
  {{ barre_enregistrement("cv", message, modifie, boutons) }}
</form>
{%- endmacro %}

{#- Le bouton qui lance la creation du CV par l'IA, avec le nombre de documents coches :
    « Créer mon CV » (parcours guide) ou « Recréer le CV à partir des documents cochés
    (N) ». Desactive sans document coche ou sans IA. `agent` : le bandeau de l'agent. -#}
{% macro bouton_creer(nombre, agent, guide) -%}
{% if guide %}
<button type="submit" id="bouton-creation" class="bouton principal"{% if nombre == 0 or not agent.disponible %} disabled{% endif %}>Créer mon CV</button>
{% else %}
<button type="submit" id="bouton-creation" class="bouton principal"{% if nombre == 0 or not agent.disponible %} disabled{% endif %}>Recréer le CV à partir des documents cochés ({{ nombre }})</button>
{% endif %}
{%- endmacro %}

{#- Les documents sources de Mon CV (`#documents`, remplace par chaque reponse des routes
    de documents) : depot de fichiers, texte a coller, liste des documents utiles avec
    leur case « Utiliser » et leur corbeille, consigne et creation du CV. `documents` :
    liste de {nom, affiche, meta, grise, note, coche} ; `guide` : parcours sans CV de
    base (etapes numerotees, « Créer mon CV », CV vierge) ; `refus` : fichiers refuses,
    nommes un a un ; `message` : texte d'etat. Les erreurs ciblent `#etat-documents`. -#}
{% macro region_documents(documents, agent, consigne="", guide=False, refus=None, message="") -%}
{% set nombre = documents | selectattr("coche") | list | length %}
<div id="documents" class="pile">
  {% if guide %}
  <h3><span class="etape-numero" aria-hidden="true">1</span>Vos documents</h3>
  {% else %}
  <p class="aide">Cochez les documents que l'IA doit lire pour recréer votre CV : elle vous le propose élément par élément, vous gardez la main.</p>
  {% endif %}
  <form id="depot" hx-post="/cv-base/documents/deposer" hx-encoding="multipart/form-data" hx-include="#recreation" hx-target="#documents" hx-swap="outerHTML">
    <label class="depot" data-depot>
      <input type="file" name="fichiers" multiple accept=".pdf,.md,.txt,.tex">
      <strong>Choisissez des fichiers</strong>
      <span>ou glissez-les ici</span>
      <span class="doux">Ancien CV, attestations… PDF ou texte</span>
    </label>
  </form>
  <div id="etat-documents" class="etat" role="status" aria-live="polite">{% for r in refus or [] %}<div class="alerte" role="alert">{{ r }}</div>{% endfor %}{{ message }}</div>
  <details class="coller">
    <summary>+ Coller un texte (profil LinkedIn, notes…)</summary>
    <form class="pile" hx-post="/cv-base/documents/coller" hx-include="#recreation" hx-target="#documents" hx-swap="outerHTML">
      <label class="champ-etiquette" for="nom-colle">Nom du document
        <input type="text" id="nom-colle" name="nom" placeholder="Ex. : Profil LinkedIn" autocomplete="off">
      </label>
      <label class="champ-etiquette" for="texte-colle">Texte
        <textarea id="texte-colle" name="texte" rows="6"></textarea>
      </label>
      <div><button type="submit" class="bouton principal">Ajouter</button></div>
    </form>
  </details>
  <form id="recreation" class="pile" hx-post="{{ '/cv-base/creer' if guide else '/cv-base/recreer' }}" hx-target="{{ '#parcours' if guide else '#onglet-cv-base' }}" hx-swap="outerHTML"{% if not guide %} hx-push-url="/cv-base"{% endif %} hx-indicator="#indicateur-creation">
    {% if documents %}
    <ul class="documents" aria-label="Documents sources" hx-post="/cv-base/documents/selection" hx-trigger="change" hx-target="#bouton-creation" hx-swap="outerHTML" hx-push-url="false">
      {% for d in documents %}
      <li class="document{% if d.grise %} grise{% endif %}">
        {% if not d.grise %}
        <input type="checkbox" id="document-{{ loop.index }}" name="documents" value="{{ d.nom }}"{% if d.coche %} checked{% endif %}>
        {% endif %}
        <div class="document-nom">
          {% if d.grise %}<strong data-contenu>{{ d.affiche }}</strong>{% else %}<label for="document-{{ loop.index }}"><span class="cache-visuel">Utiliser </span><strong data-contenu>{{ d.affiche }}</strong></label>{% endif %}
          <span>{{ d.meta }}</span>
          {% if d.note %}<span>{{ d.note }}</span>{% endif %}
        </div>
        <button type="button" class="icone" aria-label="Retirer {{ d.affiche }}" title="Retirer ce document" hx-post="/cv-base/documents/retirer" hx-push-url="false" hx-vals='{{ {"nom": d.nom} | tojson }}' hx-target="#documents" hx-swap="outerHTML">{{ icone_corbeille() }}</button>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="aide">Aucun document pour l'instant.</p>
    {% endif %}
    {% if guide %}
    <h3><span class="etape-numero" aria-hidden="true">2</span>Une consigne ? <span class="doux">(facultatif)</span></h3>
    {% endif %}
    <label class="champ-etiquette" for="consigne-creation">Consigne pour l'IA{% if not guide %} (facultative){% endif %}
      <textarea id="consigne-creation" name="consigne" rows="2">
{{ consigne }}</textarea>
    </label>
    <div class="ligne-flex">
      {{ bouton_creer(nombre, agent, guide) }}
      {% if guide %}
      <button type="button" class="bouton-lien" hx-post="/cv-base/vierge" hx-target="#parcours" hx-swap="outerHTML">ou partir d'un CV vierge</button>
      {% endif %}
      <span id="indicateur-creation" class="indicateur">L'IA travaille…</span>
    </div>
    {{ vie_privee("creation" if guide else "documents") }}
    {% if not agent.disponible %}<p class="cause">{{ agent.cause }}</p>{% endif %}
  </form>
</div>
{%- endmacro %}