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

{% block title %}{{ "New page"|t }}{% endblock %}
{% block topbar %}{{ "New page"|t }}{% endblock %}

{% block content %}
<main class="prose">
    <header class="page-head">
        <h1>{{ "New page"|t }}</h1>
        <p class="page-summary">
            {{ "The domain and the type come from"|t }} <code>taxonomy.toml</code>.
            {{ "The page is created empty and opens straight in the editor."|t }}
        </p>
    </header>

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

    <form class="form" method="post" action="/nouvelle/" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="form-row">
            <label for="f-title">{{ "Title"|t }}</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">{{ "Domain"|t }}</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"|t }}</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">
                {{ "The first \"yes\" wins:"|t }}
                {{ "it points elsewhere rather than saying something"|t }} → <b>recueil</b> ·
                {{ "it has a state of progress"|t }} → <b>chantier</b> ·
                {{ "it tells about one precise moment"|t }} → <b>cr</b> ·
                {{ "otherwise"|t }} → <b>fiche</b>
            </p>
        </div>

        <div class="form-row">
            <label for="f-project">{{ "Dossier"|t }}</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="">{{ "None"|t }}</option>
                {% if projects %}
                <optgroup label="{{ "Existing dossiers"|t }}">
                    {% for p in projects %}
                    <option value="{{ p.slug }}" {% if form.project == p.slug %}selected{% endif %}>{{ p.title }}</option>
                    {% endfor %}
                </optgroup>
                {% endif %}
                {% if candidates %}
                <optgroup label="{{ "Start a dossier on…"|t }}">
                    {% for p in candidates %}
                    <option value="{{ p.slug }}" {% if form.project == p.slug %}selected{% endif %}>{{ p.title }}</option>
                    {% endfor %}
                </optgroup>
                {% endif %}
            </select>
            <p class="form-hint">
                {{ "Fill this in if the page will be"|t }}
                <b>{{ "archived with the dossier"|t }}</b>.
                {{ "A reusable note stays outside, merely cited."|t }}
                {{ "A dossier is nothing but a page others point at: naming one here is what starts it."|t }}
            </p>
        </div>

        <div class="form-row">
            <label for="f-tags">{{ "Tags"|t }}</label>
            <input type="text" id="f-tags" name="tags" value="{{ form.tags }}"
                   autocomplete="off" placeholder="{{ "comma separated"|t }}">
            <p class="form-hint">
                {{ "The writing context is a tag, not a domain:"|t }}
                <b>{{ "work"|t }}</b> {{ "or"|t }} <b>{{ "personal"|t }}</b>,
                {{ "and both when that is true."|t }}
            </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">{{ "Summary"|t }}</label>
            <input type="text" id="f-summary" name="summary" value="{{ form.summary }}"
                   autocomplete="off" placeholder="{{ "one sentence, shown on the home page"|t }}">
        </div>

        <div class="form-row">
            <label for="f-file">{{ "Attach a document (optional)"|t }}</label>
            <input type="file" id="f-file" name="file">
            <!-- A document is not a different kind of page, only one whose
                 file is what it is for. Saying so here is what stops `doc`
                 from looking like a separate system. -->
            <p class="form-help">
                {{ "The page will display it, and become referenceable with"|t }}
                <code>![[slug]]</code>.
            </p>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">{{ "Create and edit"|t }}</button>
            <a class="btn" href="/">{{ "Cancel"|t }}</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 %}