{#- Page Regles : barre d'onglets, panneau d'une nature (lettre, CV) et historique. Ce
    fichier ne contient que des macros. Ids : `#regles-<nature>` (le panneau, cible de
    l'enregistrement, du retour au defaut et du retour a une version),
    `#formulaire-regles-<nature>` (le formulaire, `data-brouillon`), `#entete-regles-<nature>`
    (badge, differences, usage : echange hors bande par l'apercu), `#apercu-regles-<nature>`
    et `#modifier-regles-<nature>` (les deux volets), `#etat-regles-<nature>` (zone d'etat de
    la barre, cible de toutes les erreurs), `#regles-historique`. Les onglets sont geres
    par l'ilot (`data-onglets-client`) : aucun aller-retour pour passer de l'un a l'autre. -#}
{% from "_composants.html" import attributs_brouillon, barre_enregistrement %}
{% from "_historique.html" import historique as historique_commun %}

{#- La barre d'onglets. `onglets` : [(cle, libelle)] ; `actif` : cle de l'onglet montre ;
    `oob` : echange hors bande (retour a une version : l'onglet de la nature s'ouvre). -#}
{% macro onglets_regles(onglets, actif, oob=False) -%}
<div id="onglets-regles" data-onglets-client data-libelle-onglet-modifie="modifié, non enregistré" data-libelle-autre-modifie="l'autre onglet a aussi des modifications non enregistrées"{% if oob %} hx-swap-oob="true"{% endif %}>
  {% for cle, libelle in onglets %}
  <button type="button" aria-controls="regles-{{ cle }}" aria-pressed="{{ 'true' if cle == actif else 'false' }}">{{ libelle }}</button>
  {% endfor %}
</div>
{%- endmacro %}

{#- En-tete d'un panneau : badge, differences avec le defaut (depliables), ligne d'usage,
    « Revenir aux regles par defaut… » et son dialogue de confirmation. -#}
{% macro entete(nature, libelle, usage, personnalisees, nb_differences, difference, oob=False) -%}
<div id="entete-regles-{{ nature }}" class="pile"{% if oob %} hx-swap-oob="true"{% endif %}>
  <div class="regles-entete">
    <span class="ligne-flex">
      {% if personnalisees %}<span class="badge personnalise">Personnalisées</span>{% else %}<span class="badge">Règles par défaut</span>{% endif %}
      {% if personnalisees and nb_differences %}
      <details class="regles-diff">
        <summary>{{ nb_differences }} différence{{ "s" if nb_differences > 1 else "" }} avec le défaut</summary>
        <p class="aide">Différences avec le texte d'origine : <ins>ajouté par vous<span class="cache-visuel"> (ajouté)</span></ins> · <del>retiré du défaut<span class="cache-visuel"> (supprimé)</span></del></p>
        <div class="regles-differences" data-contenu>{{ difference }}</div>
      </details>
      {% endif %}
    </span>
    {% if personnalisees %}
    <button type="button" class="bouton discret" data-confirmer-dialogue="#dialogue-defaut-{{ nature }}">Revenir aux règles par défaut…</button>
    {% else %}
    <button type="button" class="bouton discret" disabled>Revenir aux règles par défaut…</button>
    {% endif %}
  </div>
  <p class="aide">{{ usage }}</p>
  {% if personnalisees %}
  <template id="dialogue-defaut-{{ nature }}">
    <h2 id="dialogue-titre">Revenir aux règles par défaut ?</h2>
    <p>Vos modifications de {{ libelle | lower }} seront remplacées par le texte d'origine. Rien n'est perdu : votre version actuelle reste dans l'Historique, et rien ne change tant que vous n'enregistrez pas.</p>
    <div class="dialogue-actions">
      <button type="button" class="bouton">Garder mes règles</button>
      <button type="button" class="bouton principal" hx-post="/regles/{{ nature }}/defaut" hx-include="#formulaire-regles-{{ nature }}" hx-target="#regles-{{ nature }}" hx-swap="outerHTML">Revenir au défaut</button>
    </div>
  </template>
  {% endif %}
</div>
{%- endmacro %}

{#- Le volet « Aperçu » : le Markdown rendu par le serveur. -#}
{% macro volet_apercu(nature, texte) -%}
<div id="apercu-regles-{{ nature }}" class="regles-apercu prose">{{ texte | markdown }}</div>
{%- endmacro %}

{#- Le panneau d'une nature : en-tete, bascule Aperçu / Modifier, texte, barre
    d'enregistrement. `texte` : le brouillon (ou le fichier) ; `empreinte` : celle du
    fichier lu ; `origine` : `retour-N` quand le brouillon vient de l'historique ;
    `modifie` : le brouillon differe du fichier ; `actif` : le panneau est montre. -#}
{% macro panneau(nature, libelle, usage, texte, empreinte, personnalisees, nb_differences, difference, message="", modifie=False, origine="", actif=True) -%}
<section id="regles-{{ nature }}" class="pile"{% if not actif %} hidden{% endif %} aria-label="{{ libelle }}">
  <form id="formulaire-regles-{{ nature }}" class="editeur" {{ attributs_brouillon(modifie, "Le texte des " ~ (libelle | lower)) }} hx-post="/regles/{{ nature }}/enregistrer" hx-target="#regles-{{ nature }}" hx-swap="outerHTML">
    {{ entete(nature, libelle, usage, personnalisees, nb_differences, difference) }}
    <div class="bascule" role="group" aria-label="Affichage du texte" data-onglets-client>
      <button type="button" aria-controls="apercu-regles-{{ nature }}" aria-pressed="true" hx-post="/regles/{{ nature }}/apercu" hx-target="#apercu-regles-{{ nature }}" hx-swap="outerHTML">Aperçu</button>
      <button type="button" aria-controls="modifier-regles-{{ nature }}" aria-pressed="false">Modifier</button>
    </div>
    {{ volet_apercu(nature, texte) }}
    <div id="modifier-regles-{{ nature }}" class="pile" hidden>
      <label class="cache-visuel" for="valeur-regles-{{ nature }}">Texte des règles</label>
      <textarea id="valeur-regles-{{ nature }}" name="valeur" class="champ-texte mono" rows="20" spellcheck="false" data-auto>
{{ texte }}</textarea>
      <p class="aide">Format Markdown : « ## » pour un titre de section, « - » pour une puce, **gras**.</p>
    </div>
    <input type="hidden" name="empreinte" value="{{ empreinte }}">
    {% if origine %}<input type="hidden" name="origine" value="{{ origine }}">{% endif %}
    {{ barre_enregistrement("regles-" ~ nature, message, modifie, {"annuler": {"url": "/regles?onglet=" ~ nature, "cible": "#regles-" ~ nature, "select": "#regles-" ~ nature}}) }}
  </form>
</section>
{%- endmacro %}

{#- Une difference entre une version et le fichier courant, depliee sous sa ligne. -#}
{% macro comparaison(numero, difference) -%}
<p class="aide">Version {{ numero }} comparée à la version actuelle : les mots barrés sont ceux de la version {{ numero }} que la version actuelle n'a plus ; les mots soulignés sont ceux de la version actuelle.</p>
<div class="diff" data-contenu>{{ difference }}</div>
{%- endmacro %}

{#- Historique des deux fichiers de regles, plus recent en tete. `lignes` :
    `historique.Ligne` ; `jamais` : libelles des natures jamais modifiees. « Revenir a
    cette version » charge la version dans le brouillon de sa nature (rien n'est ecrit
    avant « Enregistrer »). -#}
{% macro historique_regles(lignes, jamais, actif=False, oob=False) -%}
<section id="regles-historique" class="pile"{% if not actif %} hidden{% endif %}{% if oob %} hx-swap-oob="true"{% endif %} aria-label="Historique">
  {{ historique_commun(lignes, "/regles/historique", "regles-historique", {"url": "/regles/{cle}/version", "cible": "#regles-{cle}", "echange": "outerHTML"}, jamais) }}
</section>
{%- endmacro %}