{#- Onglet Gabarit de Mon CV (gabarit Typst personnel). Ce fichier ne contient que des
    macros : il s'importe sans contexte. Ids : `#gabarit-etat` (etat du gabarit installe,
    remplace par « Revenir au gabarit integre » / « Reutiliser mon gabarit »),
    `#gabarit-suite` (designation du CV d'exemple, puis comparaison : remplace par chaque
    reponse de depot ou de proposition), `#etat-gabarit` (cible de toutes les erreurs).
    Les libelles qui nomment un fichier technique arrivent en arguments : le texte de
    ces gabarits n'en montre aucun. -#}
{% from "_composants.html" import vie_privee %}

{#- Etat du gabarit installe. `e` : `gabarit_import.EtatPage`. -#}
{% macro etat_gabarit(e, libelle_non_places) -%}
<div id="gabarit-etat" class="pile">
  {% if not e.installe %}
  <p><strong>Gabarit intégré</strong> : l'aperçu, le PDF de Mon CV et les CV adaptés utilisent le gabarit de job2apply.</p>
  {% else %}
  <p>
    {% if e.actif %}<strong>Gabarit personnel actif</strong> : l'aperçu, le PDF de Mon CV et les CV adaptés l'utilisent.{% else %}<strong>Gabarit personnel désactivé</strong> : le gabarit intégré est utilisé.{% endif %}
  </p>
  <p class="doux">Adaptateur : <span data-contenu>{{ e.chemin }}</span></p>
  <p class="doux">Dernière version de l'adaptateur : {% if e.version %}{{ e.version }}{% else %}aucune{% endif %}</p>
  {% if e.reperes_anciens %}
  <p class="avertissement" role="status">Les repères de l'aperçu sont anciens dans ce gabarit : il faut redéposer le gabarit pour les mettre à jour.</p>
  {% endif %}
  {% if e.paquets %}
  <p class="avertissement" role="status">Ce gabarit importe des paquets Typst (<span data-contenu>{{ e.paquets | join(", ") }}</span>) : paquet téléchargé par Typst à la compilation (accès réseau du compilateur, pas de job2apply). L'aperçu et les CV adaptés peuvent échouer hors ligne.</p>
  {% endif %}
  {% if e.non_places %}
  <div>
    <p><strong data-contenu>{{ libelle_non_places }}</strong></p>
    <ul>{% for ligne in e.non_places %}<li data-contenu>{{ ligne }}</li>{% endfor %}</ul>
  </div>
  {% endif %}
  <div class="ligne-flex">
    {% if e.actif %}
    <button type="button" class="bouton" hx-post="/cv-base/gabarit/activer" hx-vals='{{ {"actif": "0"} | tojson }}' hx-target="#gabarit-etat" hx-swap="outerHTML">Revenir au gabarit intégré</button>
    {% else %}
    <button type="button" class="bouton principal" hx-post="/cv-base/gabarit/activer" hx-vals='{{ {"actif": "1"} | tojson }}' hx-target="#gabarit-etat" hx-swap="outerHTML">Réutiliser mon gabarit</button>
    {% endif %}
  </div>
  {% endif %}
</div>
{%- endmacro %}

{#- Le depot : un dossier, ou des fichiers (dont un fichier Typst seul). Il part des la
    selection (`change`), sans bouton ni JavaScript de plus. -#}
{% macro depot_gabarit(installe) -%}
<form id="depot-gabarit" class="pile" hx-post="/cv-base/gabarit/deposer" hx-encoding="multipart/form-data" hx-trigger="change" hx-target="#gabarit-suite" hx-swap="innerHTML" hx-indicator="#indicateur-depot-gabarit">
  <h3>{% if installe %}Redéposer le gabarit{% else %}Importer mon gabarit Typst{% endif %}</h3>
  <p class="aide">{% if installe %}Le nouveau dépôt remplace l'actuel, qui part dans la corbeille ; vos retouches de l'adaptateur restent dans son historique.{% else %}Donnez le dossier de votre CV Typst, ou ses fichiers : l'IA écrit un adaptateur qui le branche sur votre CV de base, sans réécrire votre style.{% endif %}</p>
  <div class="depot-choix">
    <label class="depot">
      <input type="file" name="fichiers" webkitdirectory>
      <strong>Un dossier</strong>
      <span>Le gabarit entier, sous-dossiers compris</span>
    </label>
    <label class="depot">
      <input type="file" name="fichiers" multiple>
      <strong>Des fichiers</strong>
      <span>Un ou plusieurs fichiers : Typst, images, polices</span>
    </label>
  </div>
  <span id="indicateur-depot-gabarit" class="indicateur">Dépôt en cours…</span>
</form>
{%- endmacro %}

{#- Apres le depot : fichiers refuses (avec leur raison), avertissements, choix du CV
    d'exemple et consigne. `typ` : fichiers Typst deposes ; `retenu` : presélection ('' :
    aucune) ; `nombre` : fichiers deposes ; `refus`, `notes` : listes de textes ; `agent` :
    le bandeau de l'agent. -#}
{% macro designation(jeton, typ, retenu, nombre, refus, notes, agent) -%}
<div id="gabarit-designation" class="pile">
  <h3>Fichiers reçus</h3>
  <p>{{ nombre }} fichier{{ "s" if nombre > 1 else "" }} déposé{{ "s" if nombre > 1 else "" }} dans un brouillon : rien n'est encore installé.</p>
  {% if refus %}
  <div class="avertissement" role="status">
    <p>Fichiers refusés (rien n'est renommé ni ignoré en silence) :</p>
    <ul>{% for ligne in refus %}<li data-contenu>{{ ligne }}</li>{% endfor %}</ul>
  </div>
  {% endif %}
  {% if notes %}
  <div class="avertissement" role="status">
    <ul>{% for ligne in notes %}<li data-contenu>{{ ligne }}</li>{% endfor %}</ul>
  </div>
  {% endif %}
  <form id="proposition-gabarit" class="pile" hx-post="/cv-base/gabarit/proposer" hx-target="#gabarit-suite" hx-swap="innerHTML" hx-indicator="#indicateur-gabarit">
    <input type="hidden" name="jeton" value="{{ jeton }}">
    <label class="champ-etiquette" for="cv-exemple-gabarit">Quel fichier est votre CV d'exemple ?
      <select id="cv-exemple-gabarit" name="cv_exemple">
        {% if not retenu %}<option value="">Choisissez un fichier…</option>{% endif %}
        {% for nom in typ %}<option value="{{ nom }}"{% if nom == retenu %} selected{% endif %}>{{ nom }}</option>{% endfor %}
      </select>
    </label>
    <label class="champ-etiquette" for="consigne-gabarit">Consigne pour l'IA (facultative)
      <textarea id="consigne-gabarit" name="consigne" rows="2"></textarea>
    </label>
    <div class="ligne-flex">
      <button type="submit" class="bouton principal"{% if not agent.disponible %} disabled{% endif %}>Écrire l'adaptateur</button>
      <button type="button" class="bouton" hx-post="/cv-base/gabarit/annuler" hx-vals='{{ {"jeton": jeton} | tojson }}' hx-target="#gabarit-suite" hx-swap="innerHTML">Annuler</button>
      <span id="indicateur-gabarit" class="indicateur">L'IA travaille…</span>
    </div>
    {{ vie_privee("gabarit") }}
    {% if not agent.disponible %}<p class="cause">{{ agent.cause }}</p>{% endif %}
  </form>
</div>
{%- endmacro %}

{#- La comparaison : la reference a gauche, l'apercu cliquable avec l'adaptateur a droite,
    puis ce qui n'a pas pu etre place et ce qui manque au rendu, puis l'enregistrement.
    `champs` : jeton, cv_exemple, adaptateur, cv_yaml, non_places (champs caches) ;
    `reference`, `apercu` : pages de `cv_formulaire.pages_apercu` ; `fragments` : textes
    absents du rendu (None : controle indisponible), `reste` : leur nombre au-dela ;
    `cv_existe` : un CV de base existe deja. -#}
{% macro comparaison(champs, reference, apercu, libelle_non_places, libelle_couverture, fragments, reste, cv_existe) -%}
<div id="gabarit-comparaison" class="pile">
  <h3>Comparaison</h3>
  <div class="gabarit-comparaison">
    <section aria-label="Votre CV d'exemple">
      <h4>Votre CV d'exemple <span class="doux">· référence</span></h4>
      {% for page in reference %}
      <div class="apercu-page"><img src="{{ page.src }}" alt="Page {{ page.numero }} de votre CV d'exemple"></div>
      {% endfor %}
    </section>
    <section aria-label="Aperçu avec l'adaptateur">
      <h4>Avec l'adaptateur <span class="doux">· aperçu cliquable</span></h4>
      {% for page in apercu %}
      <div class="apercu-page">
        <img src="{{ page.src }}" alt="Page {{ page.numero }} du CV avec l'adaptateur">
        <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 %}
    </section>
  </div>
  <div>
    <p><strong data-contenu>{{ libelle_non_places }}</strong></p>
    {% if champs.non_places %}
    <ul>{% for ligne in champs.non_places %}<li data-contenu>{{ ligne }}</li>{% endfor %}</ul>
    {% else %}
    <p class="aide">Rien à signaler.</p>
    {% endif %}
  </div>
  <div>
    <p><strong>{{ libelle_couverture }}</strong></p>
    {% if fragments is none %}
    <p class="avertissement" role="status">Contrôle indisponible : le texte du rendu n'a pas pu être relevé.</p>
    {% elif fragments %}
    <ul>{% for texte in fragments %}<li data-contenu>{{ texte }}</li>{% endfor %}</ul>
    {% if reste %}<p>et {{ reste }} autres</p>{% endif %}
    <p class="aide">Ce contrôle ne bloque pas l'enregistrement ; un texte calculé peut y figurer à tort.</p>
    {% else %}
    <p class="aide">Rien à signaler.</p>
    {% endif %}
  </div>
  <form id="enregistrement-gabarit" class="pile" hx-post="/cv-base/gabarit/enregistrer" hx-target="#onglet-cv-base" hx-swap="outerHTML" hx-push-url="/cv-base">
    <input type="hidden" name="jeton" value="{{ champs.jeton }}">
    <input type="hidden" name="cv_exemple" value="{{ champs.cv_exemple }}">
    <input type="hidden" name="adaptateur" value="{{ champs.adaptateur }}">
    <input type="hidden" name="cv_yaml" value="{{ champs.cv_yaml }}">
    {% for ligne in champs.non_places %}<input type="hidden" name="non_places" value="{{ ligne }}">{% endfor %}
    <p class="aide">{% if cv_existe %}Votre CV de base reste intact : l'IA vous le propose ensuite élément par élément, pour ce gabarit.{% else %}Le CV proposé deviendra votre CV de base, que vous pourrez relire et modifier.{% endif %}</p>
    <div class="ligne-flex">
      <button type="submit" class="bouton principal">Enregistrer le gabarit</button>
    </div>
  </form>
  <div>
    <button type="button" class="bouton" hx-post="/cv-base/gabarit/annuler" hx-vals='{{ {"jeton": champs.jeton} | tojson }}' hx-target="#gabarit-suite" hx-swap="innerHTML">Annuler</button>
  </div>
</div>
{%- endmacro %}