{% extends "base.html" %}
{% load taxonomy %}

{% block title %}Nouvelle page{% endblock %}
{% block topbar %}Nouvelle page{% endblock %}

{% block content %}
<main class="prose">
    <header class="page-head">
        <h1>Nouvelle page</h1>
        <p class="page-summary">
            Le domaine et le type viennent de <code>taxonomy.toml</code>. La page
            est créée vide et s'ouvre directement dans l'éditeur.
        </p>
    </header>

    {% if error %}<p class="form-error" role="alert">{{ error }}</p>{% endif %}

    <form class="form" method="post" action="/nouvelle/">
        {% csrf_token %}

        <div class="form-row">
            <label for="f-title">Titre</label>
            <input type="text" id="f-title" name="title" value="{{ form.title }}"
                   required autofocus autocomplete="off">
        </div>

        <div class="form-row">
            <label for="f-domain">Domaine</label>
            <select id="f-domain" name="domain" required>
                <option value="" disabled {% if not form.domain %}selected{% endif %}>Choisir…</option>
                {% for d in domains %}
                <option value="{{ d }}" {% if form.domain == d %}selected{% endif %}>{{ d|label }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-row">
            <label for="f-type">Type</label>
            <select id="f-type" name="type" required>
                <option value="" disabled {% if not form.type %}selected{% endif %}>Choisir…</option>
                {% for t in types %}
                <option value="{{ t }}" {% if form.type == t %}selected{% endif %}>{{ t|label }}</option>
                {% endfor %}
            </select>
            <!-- The rule for picking a type, where the choice is actually made.
                 It lives in taxonomy.toml too, but nobody opens that file at
                 the moment they need it. -->
            <p class="form-hint">
                La première réponse « oui » gagne :
                ça renvoie vers d'autres choses → <b>recueil</b> ·
                ça a un état d'avancement → <b>chantier</b> ·
                ça raconte un moment précis → <b>compte rendu</b> ·
                sinon → <b>fiche</b>
            </p>
        </div>

        {% if projects %}
        <div class="form-row">
            <label for="f-project">Dossier</label>
            <!-- A project is an ordinary page, so joining one is naming it.
                 Only pages archived with the dossier belong to it; a durable
                 note it merely cites stays out and is linked with [[…]]. -->
            <select id="f-project" name="project">
                <option value="">Aucun</option>
                {% for p in projects %}
                <option value="{{ p.slug }}" {% if form.project == p.slug %}selected{% endif %}>{{ p.title }}</option>
                {% endfor %}
            </select>
            <p class="form-hint">
                À remplir si la page sera <b>archivée avec le dossier</b>. Une
                fiche réutilisable reste hors dossier, simplement citée.
            </p>
        </div>
        {% endif %}

        <div class="form-row">
            <label for="f-tags">Tags</label>
            <input type="text" id="f-tags" name="tags" value="{{ form.tags }}"
                   autocomplete="off" placeholder="séparés par des virgules">
            <p class="form-hint">
                Le cadre d'écriture est un tag, pas un domaine : <b>travail</b> ou
                <b>perso</b>, et les deux quand c'est vrai.
            </p>
            {% if known_tags %}
            <!-- Existing tags: click to append, so a near-duplicate isn't
                 invented. Names are already normalized (lowercase) on read. -->
            <div class="tag-suggest" data-target="f-tags">
                {% for t in known_tags %}<button type="button" class="chip" data-value="{{ t }}">{{ t }}</button>{% endfor %}
            </div>
            {% endif %}
        </div>

        <div class="form-row">
            <label for="f-summary">Résumé</label>
            <input type="text" id="f-summary" name="summary" value="{{ form.summary }}"
                   autocomplete="off" placeholder="une phrase, affichée sur l'accueil">
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Créer et éditer</button>
            <a class="btn" href="/">Annuler</a>
        </div>
    </form>
</main>

<script>
  // Clicking a suggested tag appends it to the comma-separated field, unless
  // it is already present. Comparison is lowercase, matching how tags are
  // normalized on read.
  document.querySelectorAll('.tag-suggest').forEach(box => {
    const input = document.getElementById(box.dataset.target);
    box.addEventListener('click', ev => {
      const chip = ev.target.closest('.chip');
      if (!chip) return;
      const value = chip.dataset.value;
      const current = input.value.split(',').map(s => s.trim().toLowerCase()).filter(Boolean);
      if (current.includes(value)) return;
      input.value = current.length ? input.value.replace(/,\s*$/, '') + ', ' + value : value;
      input.focus();
    });
  });
</script>
{% endblock %}