{#- Le profil : formulaire par sections (Recherche, Tri des offres, Sources, Candidature,
    Avance) ou YAML brut. Ce fichier ne contient que des macros : `profil(ctx)` rend le
    bloc `#profil`, cible de toutes les reponses de la page.
    `ctx` : `brut`, `version` (celle du fichier lu), `texte` (YAML brut), `message`
    (etat de la barre), `champs` (`profil_champs.CHAMPS`), `affichages` (valeur affichee
    de chaque champ), `identifiants` (France Travail, Adzuna : variables presentes),
    `pays`, `seuil_max`, `simulation`, `cv` (identite de Mon CV, ou None).
    Noms de champs : `<section>.<cle>` ; les listes en pastilles postent un champ cache
    par pastille (`recherche.mots_cles`...), les villes et les termes bonus deux champs
    repetes (`recherche.villes.nom` et `.commune`, `scoring.bonus.terme` et `.poids`).
    Les pastilles se gerent dans l'ilot (`data-pastilles`, `<template>`). -#}
{% from "_composants.html" import attributs_brouillon, barre_enregistrement %}

{% 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 %}

{#- Liste de textes en pastilles : une pastille par valeur, un champ cache par pastille,
    et un champ pour en ajouter (Entree). `classe` : variante de couleur. -#}
{% macro pastilles_simples(c, valeurs, retirer, ajouter, classe="") -%}
<div class="pastilles-champ" data-pastilles>
  <strong id="libelle-{{ c.ident }}">{{ c.libelle }}</strong>
  <ul class="pastilles-liste" aria-labelledby="libelle-{{ c.ident }}">
    {% for v in valeurs %}
    <li class="pastille{% if classe %} {{ classe }}{% endif %}"><span>{{ v }}</span><input type="hidden" name="{{ c.nom }}" value="{{ v }}"><button type="button" class="retirer" aria-label="{{ retirer }} {{ v }}">×</button></li>
    {% endfor %}
  </ul>
  <input type="text" class="ajout-pastille" aria-label="{{ ajouter }}" placeholder="Ajouter… (Entrée)" autocomplete="off">
  <template><li class="pastille{% if classe %} {{ classe }}{% endif %}"><span>{valeur}</span><input type="hidden" name="{{ c.nom }}" value="{valeur}"><button type="button" class="retirer" aria-label="{{ retirer }} {valeur}">×</button></li></template>
</div>
{%- endmacro %}

{#- Villes : nom et code INSEE ensemble dans la meme pastille. -#}
{% macro pastilles_villes(c, villes) -%}
<div class="pastilles-champ" data-pastilles>
  <strong id="libelle-{{ c.ident }}">{{ c.libelle }}</strong>
  <ul class="pastilles-liste" aria-labelledby="libelle-{{ c.ident }}">
    {% for v in villes %}
    <li class="pastille"><span>{{ v.nom }}</span> <span class="doux">{{ v.commune }}</span><input type="hidden" name="{{ c.nom }}.nom" value="{{ v.nom }}"><input type="hidden" name="{{ c.nom }}.commune" value="{{ v.commune }}"><button type="button" class="retirer" aria-label="Retirer la ville {{ v.nom }}">×</button></li>
    {% endfor %}
  </ul>
  <div class="ligne-flex">
    <input type="text" class="ajout-pastille" aria-label="Ville" placeholder="Ville (Entrée)" autocomplete="off">
    <input type="text" class="ajout-pastille" aria-label="Code INSEE de la ville" placeholder="Code INSEE" maxlength="5" autocomplete="off">
  </div>
  <template><li class="pastille"><span>{valeur}</span> <span class="doux">{valeur2}</span><input type="hidden" name="{{ c.nom }}.nom" value="{valeur}"><input type="hidden" name="{{ c.nom }}.commune" value="{valeur2}"><button type="button" class="retirer" aria-label="Retirer la ville {valeur}">×</button></li></template>
</div>
{%- endmacro %}

{#- Termes bonus : « terme · − · poids · + · × ». Le poids est un champ cache de la
    pastille, affiche a cote ; − est desactive a 1. -#}
{% macro pastilles_bonus(c, termes) -%}
<div class="pastilles-champ" data-pastilles>
  <strong id="libelle-{{ c.ident }}">{{ c.libelle }}</strong>
  <ul class="pastilles-liste" aria-labelledby="libelle-{{ c.ident }}">
    {% for b in termes %}
    <li class="pastille bonus"><span>{{ b.terme }}</span><button type="button" class="moins" aria-label="Diminuer le poids de {{ b.terme }}"{% if (b.poids | float) <= 1 %} disabled{% endif %}>−</button><span class="poids-texte">{{ b.poids }}</span><button type="button" class="plus" aria-label="Augmenter le poids de {{ b.terme }}">+</button><input type="hidden" name="{{ c.nom }}.terme" value="{{ b.terme }}"><input type="hidden" class="poids" name="{{ c.nom }}.poids" value="{{ b.poids }}"><button type="button" class="retirer" aria-label="Retirer le terme {{ b.terme }}">×</button></li>
    {% endfor %}
  </ul>
  <input type="text" class="ajout-pastille" aria-label="Ajouter un terme bonus" placeholder="Ajouter… (Entrée)" autocomplete="off">
  <template><li class="pastille bonus"><span>{valeur}</span><button type="button" class="moins" aria-label="Diminuer le poids de {valeur}" disabled>−</button><span class="poids-texte">1</span><button type="button" class="plus" aria-label="Augmenter le poids de {valeur}">+</button><input type="hidden" name="{{ c.nom }}.terme" value="{valeur}"><input type="hidden" class="poids" name="{{ c.nom }}.poids" value="1"><button type="button" class="retirer" aria-label="Retirer le terme {valeur}">×</button></li></template>
  <small class="aide">Le terme est cherché en début de mot : « python » trouve aussi « pythonista ».</small>
</div>
{%- endmacro %}

{#- Cases a cocher en boutons a bascule (la coche ✓ accompagne la couleur). -#}
{% macro bascules(c, cochees) -%}
<div class="pastilles-champ">
  <strong id="libelle-{{ c.ident }}">{{ c.libelle }}</strong>
  <div class="contrats" role="group" aria-labelledby="libelle-{{ c.ident }}">
    {% for code, libelle in c.options %}
    <label class="bascule-case"><input type="checkbox" name="{{ c.nom }}" value="{{ code }}"{% if code in cochees %} checked{% endif %}><span>{{ libelle }}</span></label>
    {% endfor %}
  </div>
</div>
{%- endmacro %}

{#- Une valeur de texte ou de nombre, avec son etiquette. -#}
{% macro saisie(c, valeur, genre="text") -%}
<label class="champ-etiquette" for="saisie-{{ c.ident }}">{{ c.libelle }}
  <input type="{{ genre }}" id="saisie-{{ c.ident }}" name="{{ c.nom }}"{% if genre == "number" %} min="0" step="{{ 'any' if c.genre == 'nombre' else '1' }}"{% endif %} value="{{ valeur }}">
  {% if c.aide %}<small>{{ c.aide }}</small>{% endif %}
</label>
{%- endmacro %}

{#- Une liste deroulante ; `options` : [(code, libelle)]. -#}
{% macro choix(c, valeur, options) -%}
<label class="champ-etiquette" for="saisie-{{ c.ident }}">{{ c.libelle }}
  <select id="saisie-{{ c.ident }}" name="{{ c.nom }}">
    {% for code, libelle in options %}
    <option value="{{ code }}"{% if code == valeur %} selected{% endif %}>{{ libelle }}</option>
    {% endfor %}
  </select>
</label>
{%- endmacro %}

{#- La phrase de la simulation du score minimum (`role="status"`). Le bloc `.simulation`
    (qui ne change pas) la fait recalculer quand le formulaire change. `s` : {vide} ou {retenues, total, ecartees}
    ou {invalide} ; `seuil` : valeur du curseur, remise a jour hors bande. -#}
{% macro simulation(s, seuil=None) -%}
<p id="simulation-resultat" role="status" aria-live="polite">
  {% if s.get("invalide") %}Corrigez les réglages signalés pour voir combien d'offres ils retiendraient.
  {% elif s.get("vide") %}Lancez une veille pour voir combien d'offres ces réglages retiendraient.
  {% else %}<strong>{{ s.retenues }}</strong> des {{ s.total }} offres de la dernière veille seraient retenues avec ces réglages <span class="doux">({{ s.ecartees }} écartée{{ "s" if s.ecartees > 1 else "" }} par un terme éliminatoire).</span>
  {% endif %}
</p>
{% if seuil is not none %}<output id="valeur-seuil" for="saisie-scoring-seuil" hx-swap-oob="true">{{ seuil }}</output>{% endif %}
{%- endmacro %}

{#- Les reglages d'une source active (repliables) : `champs` = [(champ, valeur, genre)]. -#}
{% macro reglages(champs) -%}
<details class="reglages-source" open>
  <summary>Réglages</summary>
  <div class="grille-champs">
    {% for c, valeur, genre in champs %}
    {{ saisie(c, valeur, genre) }}
    {% endfor %}
  </div>
</details>
{%- endmacro %}

{#- Une source : nom, description, etat des identifiants et interrupteur. `etat` : `ok`,
    `manquant` ou `sans` ; `bloque` : interrupteur desactive (identifiants manquants) ;
    `reglages` : HTML des reglages dependants, seulement si la source est active. -#}
{% macro source(c, nom, description, etat, actif, bloque=False, message="", avertissement="", detail="") -%}
<div class="source" id="source-{{ c.section }}">
  <div class="source-tete">
    <div class="source-nom">
      <strong id="nom-source-{{ c.section }}">{{ nom }}</strong>
      <div>{{ description }}</div>
    </div>
    {% if etat == "ok" %}<span class="identifiants ok">✓ Identifiants trouvés</span>
    {% elif etat == "manquant" %}<span class="identifiants manquant">Identifiants manquants</span>
    {% else %}<span class="identifiants">Sans identifiants</span>{% endif %}
    <input type="checkbox" role="switch" class="interrupteur-source" id="saisie-{{ c.ident }}" name="{{ c.nom }}" aria-labelledby="nom-source-{{ c.section }}"{% if actif %} checked{% endif %}{% if bloque %} disabled{% endif %}>
  </div>
  {% if message %}<p class="aide">{{ message }}</p>{% endif %}
  {% if avertissement or detail %}<div class="source-actif">
    {% if avertissement %}<p class="avertissement" role="note">{{ avertissement }}</p>{% endif %}
    {{ detail }}
  </div>{% endif %}
</div>
{%- endmacro %}

{#- Le formulaire par sections. -#}
{% macro formulaire(ctx) -%}
{% set aff = ctx.affichages %}
{% set ch = ctx.champs %}
{% set ident = ctx.identifiants %}
{% set depuis = "Pour l'activer, renseignez %s dans le fichier .env de votre espace, puis relancez job2apply." %}
<nav class="profil-sections" aria-label="Sections du profil">
  <a href="#recherche">Recherche</a>
  <a href="#tri">Tri des offres</a>
  <a href="#sources">Sources</a>
  <a href="#candidature">Candidature</a>
  <a href="#avance">Avancé</a>
</nav>
<form id="formulaire-profil" class="formulaire" {{ attributs_brouillon(False, "Le profil") }} hx-post="/profil/formulaire" hx-target="#profil" hx-swap="outerHTML" hx-sync="#simulation:queue last">
  <input type="hidden" name="version" value="{{ ctx.version }}">

  <section id="recherche" class="profil-section" aria-labelledby="titre-recherche">
    <div><h2 id="titre-recherche">Recherche</h2><p>Ce que la veille cherche, et où.</p></div>
    {{ pastilles_simples(ch["recherche.mots_cles"], aff["recherche.mots_cles"], "Retirer le mot-clé", "Ajouter un mot-clé") }}
    <small class="aide">Une requête est lancée par mot-clé, par source et par ville.</small>
    {{ pastilles_villes(ch["recherche.villes"], aff["recherche.villes"]) }}
    <small class="aide">Le code INSEE sert à France Travail ; les autres sources lisent le nom.</small>
    <div class="grille-champs">
      {{ saisie(ch["recherche.distance_km"], aff["recherche.distance_km"], "number") }}
      {{ choix(ch["recherche.publiee_depuis"], aff["recherche.publiee_depuis"], ch["recherche.publiee_depuis"].options) }}
      {{ choix(ch["recherche.pays"], aff["recherche.pays"], ctx.pays) }}
    </div>
    {{ bascules(ch["recherche.types_contrat"], aff["recherche.types_contrat"]) }}
    <label class="ligne-flex"><input type="checkbox" name="recherche.teletravail_souhaite" value="on"{% if aff["recherche.teletravail_souhaite"] %} checked{% endif %}> <span><strong>Télétravail souhaité</strong> <span class="doux">· favorise les offres qui le proposent</span></span></label>
    <details>
      <summary>Chercher par département plutôt que par ville</summary>
      <div class="pile">
        <p class="aide">Saisie sous forme de pastilles, comme les villes (44, 85…).</p>
        {{ pastilles_simples(ch["recherche.departements"], aff["recherche.departements"], "Retirer le département", "Ajouter un département") }}
      </div>
    </details>
  </section>

  <section id="tri" class="profil-section" aria-labelledby="titre-tri">
    <div><h2 id="titre-tri">Tri des offres</h2><p>Chaque terme trouvé dans une offre lui rapporte des points ; les offres sous le score minimum ne sont pas retenues.</p></div>
    {{ pastilles_bonus(ch["scoring.bonus"], aff["scoring.bonus"]) }}
    {{ pastilles_simples(ch["scoring.exclusions"], aff["scoring.exclusions"], "Retirer le terme éliminatoire", "Ajouter un terme éliminatoire", "exclusion") }}
    <div class="simulation" id="simulation" hx-post="/profil/simulation" hx-trigger="input changed delay:300ms from:#formulaire-profil, change from:#formulaire-profil" hx-include="#formulaire-profil" hx-target="#simulation-resultat" hx-swap="outerHTML" hx-sync="this:queue last">
      <label for="saisie-scoring-seuil"><strong>Score minimum :</strong> <output id="valeur-seuil" for="saisie-scoring-seuil">{{ aff["scoring.seuil"] or 0 }}</output> points</label>
      <input type="range" id="saisie-scoring-seuil" name="scoring.seuil" min="0" max="{{ ctx.seuil_max }}" step="1" value="{{ aff['scoring.seuil'] or 0 }}">
      {{ simulation(ctx.simulation) }}
      <p class="aide">Estimation sur les offres de la dernière veille, déjà vues comprises : une offre déjà vue ne reviendra pas dans la liste.</p>
    </div>
  </section>

  <section id="sources" class="profil-section" aria-labelledby="titre-sources">
    <div><h2 id="titre-sources">Sources</h2><p>Où la veille cherche les offres.</p></div>
    {{ source(ch["france_travail.actif"], "France Travail", "API officielle, offres publiées en France.", "ok" if ident.france_travail else "manquant", aff["france_travail.actif"] and ident.france_travail, not ident.france_travail, "" if ident.france_travail else depuis % "FRANCE_TRAVAIL_CLIENT_ID et FRANCE_TRAVAIL_CLIENT_SECRET") }}
    {{ source(ch["adzuna.actif"], "Adzuna", "Agrégateur d'offres, API officielle.", "ok" if ident.adzuna else "manquant", aff["adzuna.actif"] and ident.adzuna, not ident.adzuna, "" if ident.adzuna else depuis % "ADZUNA_APP_ID et ADZUNA_APP_KEY") }}
    {{ source(ch["linkedin.actif"], "LinkedIn", "Pages publiques des offres, sans compte.", "sans", aff["linkedin.actif"], False, "", "Lit les pages publiques de LinkedIn, en s'écartant de ses conditions d'utilisation (CGU).", reglages([(ch["linkedin.max_offres"], aff["linkedin.max_offres"], "number"), (ch["linkedin.delai_s"], aff["linkedin.delai_s"], "number"), (ch["linkedin.langue"], aff["linkedin.langue"], "text")])) }}
    {{ source(ch["google_jobs.actif"], "Google Jobs", "Ouvre une fenêtre de navigateur pendant la veille.", "sans", aff["google_jobs.actif"], False, "", "", reglages([(ch["google_jobs.max_offres"], aff["google_jobs.max_offres"], "number"), (ch["google_jobs.langue"], aff["google_jobs.langue"], "text")])) }}
  </section>

  <section id="candidature" class="profil-section" aria-labelledby="titre-candidature">
    <div><h2 id="titre-candidature">Candidature</h2><p>Ce que l'IA peut mettre en avant dans vos lettres.</p></div>
    <div class="pastilles-champ" data-pastilles>
      <strong id="libelle-candidature-points_forts">Points forts</strong>
      <small class="aide">Des faits, pas des qualités : la lettre ne s'appuie que sur eux et sur votre CV.</small>
      <ul class="pastilles-liste" aria-labelledby="libelle-candidature-points_forts">
        {% for p in aff["candidature.points_forts"] %}
        <li class="point-fort"><textarea name="candidature.points_forts" rows="1" data-auto aria-label="Point fort {{ loop.index }}">
{{ p }}</textarea><button type="button" class="retirer icone" aria-label="Supprimer le point fort {{ loop.index }}">{{ icone_corbeille() }}</button></li>
        {% endfor %}
      </ul>
      <input type="text" class="ajout-pastille" aria-label="Ajouter un point fort" placeholder="+ Ajouter un point fort (Entrée)" autocomplete="off">
      <template><li class="point-fort"><textarea name="candidature.points_forts" rows="1" data-auto aria-label="Point fort">{valeur}</textarea><button type="button" class="retirer icone" aria-label="Supprimer ce point fort">{{ icone_corbeille() }}</button></li></template>
    </div>
    <div class="pile renvois">
      <span class="aide">Ton et longueur de la lettre : dans les <a href="/regles">Règles de rédaction</a>.</span>
      <span class="aide">Nom et coordonnées qui signent la lettre et le message d'envoi : ceux de <a href="/cv-base">Mon CV</a>{% if ctx.cv %} ({{ ctx.cv | join(" · ") }}){% else %} : Mon CV n'est pas encore créé{% endif %}.</span>
    </div>
  </section>

  <section id="avance" class="profil-section">
    <details>
      <summary>Avancé <span class="doux">· CV Typst personnel, polices, fichier brut</span></summary>
      <div class="pile">
        {{ saisie(ch["candidature.cv_typst"], aff["candidature.cv_typst"]) }}
        <label class="champ-etiquette" for="saisie-candidature-polices_typst">{{ ch["candidature.polices_typst"].libelle }}
          <textarea id="saisie-candidature-polices_typst" name="candidature.polices_typst" rows="2">
{{ aff["candidature.polices_typst"] }}</textarea>
          <small>{{ ch["candidature.polices_typst"].aide }}</small>
        </label>
        <label class="ligne-flex"><input type="checkbox" name="candidature.ignorer_polices_systeme" value="on"{% if aff["candidature.ignorer_polices_systeme"] %} checked{% endif %}> {{ ch["candidature.ignorer_polices_systeme"].libelle }}</label>
        <a href="/profil?brut=1">Modifier le fichier brut</a>
      </div>
    </details>
  </section>

  {{ barre_enregistrement("profil", ctx.message, False, {"annuler": {"url": "/profil", "cible": "#profil", "select": "#profil"}}) }}
</form>
{%- endmacro %}

{#- Le profil en YAML brut. -#}
{% macro brut(ctx) -%}
<p class="fil"><a href="/profil">← Revenir au formulaire</a></p>
<form id="formulaire-profil" class="formulaire" {{ attributs_brouillon(False, "Le fichier du profil") }} hx-post="/profil/texte" hx-target="#profil" hx-swap="outerHTML">
  <input type="hidden" name="version" value="{{ ctx.version }}">
  <label class="cache-visuel" for="texte-profil">Contenu du profil</label>
  <textarea id="texte-profil" name="texte" class="champ-texte mono" rows="30" spellcheck="false">
{{ ctx.texte }}</textarea>
  {{ barre_enregistrement("profil", ctx.message, False, {"annuler": {"url": "/profil?brut=1", "cible": "#profil", "select": "#profil"}}) }}
</form>
{%- endmacro %}

{#- Le bloc `#profil` : cible de toutes les reponses de la page. -#}
{% macro profil(ctx) -%}
<div id="profil">
  {% if ctx.brut %}{{ brut(ctx) }}{% else %}{{ formulaire(ctx) }}{% endif %}
</div>
{%- endmacro %}