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

{% block title %}{{ page.title }}{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% asset 'avallon/css/pygments.css' %}">

    <!-- MathJax (self-hosted SVG build): renders the \(...\) / \[...\] emitted
         by arithmatex. SVG output embeds glyph paths, so no external font files
         are fetched, so the whole thing works offline. -->
    <script>
      window.MathJax = {
        tex: { inlineMath: [['\\(', '\\)']], displayMath: [['\\[', '\\]']] },
        options: { skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] }
      };
    </script>
    <script src="{% static 'avallon/js/mathjax/tex-mml-svg.js' %}" async></script>
{% endblock %}

{% block topbar %}{{ page.domain_label }} / {{ page.type_label }}{% endblock %}

{% block topbar_actions %}
    <button type="button" class="icon-btn" id="editToggle" aria-pressed="false"
            aria-label="{{ "Edit the Markdown of this page"|t }}" title="{{ "Edit (Ctrl+E)"|t }}">
        <svg class="i-edit" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M12 20h9"/>
            <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>
        </svg>
        <svg class="i-eye" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/>
            <circle cx="12" cy="12" r="3"/>
        </svg>
    </button>
    <button type="button" class="icon-btn" id="widthToggle" aria-pressed="false"
            aria-label="{{ "Toggle the reading width (narrow / wide)"|t }}"
            title="{{ "Reading width"|t }}">
        <svg class="i-expand" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4"/>
        </svg>
        <svg class="i-collapse" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M3 12h6M15 12h6M6 8l3 4-3 4M18 8l-3 4 3 4"/>
        </svg>
    </button>
    <div class="export-menu" id="exportMenu">
        <button type="button" class="icon-btn" id="exportBtn" aria-haspopup="true"
                aria-expanded="false" aria-controls="exportChoices"
                aria-label="{{ "Export this page"|t }}" title="{{ "Export (Word or PDF)"|t }}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <path d="M7 10l5 5 5-5"/>
                <path d="M12 15V3"/>
            </svg>
        </button>
        <div class="export-choices" id="exportChoices" role="menu" hidden>
            <p class="export-choices-label">{{ "Export to"|t }}</p>
            <a class="export-item" role="menuitem" download
               href="/export/?path={{ relpath|urlencode }}&amp;format=docx">
                <svg class="export-item-ico" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                     stroke-linejoin="round" aria-hidden="true">
                    <path d="M14 3v4a1 1 0 0 0 1 1h4"/>
                    <path d="M18 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8l6 6v10a2 2 0 0 1-2 2Z"/>
                    <path d="M9 13l1 4 2-4 2 4 1-4"/>
                </svg>
                <span class="export-item-text">Word<span class="export-item-ext">.docx</span></span>
            </a>
            <a class="export-item" role="menuitem" download
               href="/export/?path={{ relpath|urlencode }}&amp;format=pdf">
                <svg class="export-item-ico" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                     stroke-linejoin="round" aria-hidden="true">
                    <path d="M14 3v4a1 1 0 0 0 1 1h4"/>
                    <path d="M18 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8l6 6v10a2 2 0 0 1-2 2Z"/>
                    <path d="M9 17v-4h1.2a1 1 0 0 1 0 2H9M14 13v4M14 13h1.6"/>
                </svg>
                <span class="export-item-text">PDF<span class="export-item-ext">.pdf</span></span>
            </a>
        </div>
    </div>
{% endblock %}

{% block content %}
    <!-- Built client-side from the rendered headings, so it also survives the
         live-reload swap below. Hidden by CSS when the window is too narrow. -->
    <nav class="toc" id="toc" aria-label="{{ "Table of contents"|t }}" hidden>
        <p class="toc-label">{{ "Table of contents"|t }}</p>
        <ul></ul>
    </nav>

    <main class="prose">
        <header class="page-head">
            <p class="page-crumbs">
                <a href="/?domaine={{ page.domain|urlencode }}">{{ page.domain_label }}</a>
                <span aria-hidden="true">/</span>
                <a href="/?domaine={{ page.domain|urlencode }}&amp;type={{ page.type|urlencode }}">{{ page.type_label }}</a>
                {% if page.is_private %}<span class="badge-private" title="{{ "This page is only visible locally"|t }}">{{ "private"|t }}</span>{% endif %}
            </p>
            {% if project %}
            <!-- Which dossier this page belongs to. Titles are written short
                 inside a project ("Mail retour"); this is what says which one. -->
            <p class="page-project">
                <a href="{{ project.url }}">{{ project.title }}</a>
            </p>
            {% endif %}
            <h1>{{ page.title }}</h1>
            {% if page.summary %}<p class="page-summary">{{ page.summary }}</p>{% endif %}
            {% if revision %}
            <!-- Reading a recorded state: say so plainly, and offer the way
                 back, because every link on this page leads to the present. -->
            <p class="revision-banner">
                {{ "You are reading the state of"|t }} {{ revision.when }}
                <a href="{{ page.url }}">{{ "back to the current version"|t }}</a>
            </p>
            {% endif %}
            <p class="page-meta">
                {% if page.display_date %}
                <span class="history-anchor">
                    <button type="button" class="date-button" id="historyBtn"
                            aria-expanded="false" aria-haspopup="true"
                            title="{{ "Earlier states"|t }}">{{ page.display_date }}</button>
                    <span class="history-menu" id="historyMenu" hidden></span>
                </span>
                {% endif %}
                <span>{{ reading_minutes }} {{ "min read"|t }}</span>
                {% if page.file %}
                <a class="meta-action" href="{{ page.file_url }}" download
                   title="{{ "Download the file"|t }}">{{ "Download"|t }}</a>
                {% else %}
                <a class="meta-action" href="/export/?path={{ relpath|urlencode }}&amp;format=pdf"
                   download title="{{ "Download as PDF"|t }}">{{ "Download"|t }}</a>
                {% endif %}
                {% if page.status %}<span class="badge-status" data-status="{{ page.status }}">{{ page.status }}</span>{% endif %}
                {% for t in page.tags %}<a class="tag" href="/?tag={{ t|urlencode }}">{{ t }}</a>{% endfor %}
            </p>
        </header>

        {% if page.file %}
        <!-- The attached file, rendered by what it is rather than by the page's
             type: a compte rendu carrying a scan shows it like a doc would. -->
        <div class="attachment" data-kind="{{ page.kind }}">
            {% if page.kind == "image" %}
            <a href="{{ page.file_url }}" class="attachment-image">
                <img src="{{ page.file_url }}" alt="{{ page.title }}">
            </a>
            {% elif page.kind == "pdf" %}
            <embed src="{{ page.file_url }}" type="application/pdf">
            {% elif file_text %}
            <pre class="attachment-text">{{ file_text }}</pre>
            {% endif %}
            <p class="attachment-meta">
                <a class="btn" href="{{ page.file_url }}" download>{{ "Download"|t }}</a>
                <span class="attachment-name">{{ page.file }}</span>
            </p>
        </div>
        {% endif %}

        <div class="page-body">{{ content_html|safe }}</div>

        <!-- Raw Markdown editor. The source is fetched on first open rather
             than embedded here, so reading a page never carries the cost of
             shipping the file twice. -->
        <div class="editor" id="editor" hidden>
            {% csrf_token %}
            <textarea id="editorText" spellcheck="false" wrap="soft"
                      aria-label="{{ "Markdown source of the page"|t }}"></textarea>
            <div class="editor-bar">
                <button type="button" class="btn" id="editorSave">{{ "Save"|t }}</button>
                <!-- Referencing a document is creating a page for it, so this
                     uploads, files it, and writes the reference at the caret.
                     Dropping a file on the text area does the same. -->
                <button type="button" class="btn" id="docBtn"
                        title="{{ "Drop a file here, or paste one"|t }}">{{ "Add a document"|t }}</button>
                <input type="file" id="docInput" hidden
                       aria-label="{{ "Add a document"|t }}">
                <span class="editor-status" id="editorStatus" role="status"></span>
                <!-- Re-file the page under another domain/type: the directory
                     moves on disk and the browser follows the new URL. -->
                <div class="editor-move">
                    <span class="editor-move-label">{{ "Move to"|t }}</span>
                    <select id="moveDomain" aria-label="{{ "Destination domain"|t }}">
                        {% for d in domains %}<option value="{{ d }}"{% if d == page.domain %} selected{% endif %}>{{ d|label }}</option>{% endfor %}
                    </select>
                    <span aria-hidden="true">/</span>
                    <select id="moveType" aria-label="{{ "Destination type"|t }}">
                        {% for t in types %}<option value="{{ t }}"{% if t == page.type %} selected{% endif %}>{{ t|label }}</option>{% endfor %}
                    </select>
                    <button type="button" class="btn" id="moveBtn">{{ "Move"|t }}</button>
                </div>
            </div>
        </div>

        {% if dossier and page.relpath == dossier.index.relpath %}
        <!-- A dossier page keeps its prose: the sidebar already lists the
             members, and what an index cannot give is where the dossier stands
             and what to do next. What it lacked was the other way in, since a
             dossier is only ever a part of the whole the site forms. -->
        <p class="dossier-explore">
            <a class="btn" href="/?dossier={{ page.slug|urlencode }}">{{ "Explore this dossier"|t }}</a>
            <span class="dossier-explore-count">{{ dossier.members|length }} {% if dossier.members|length > 1 %}{{ "pages"|t }}{% else %}{{ "page"|t }}{% endif %}</span>
        </p>
        {% endif %}

        {% if backlinks %}
        <aside class="backlinks">
            <h2>{{ "Cited by"|t }}</h2>
            <ul>
                {% for b in backlinks %}
                <li><a href="{{ b.url }}">{{ b.title }}</a>
                    <span class="backlink-path">{{ b.domain_label }} / {{ b.type_label }}</span></li>
                {% endfor %}
            </ul>
        </aside>
        {% endif %}
    </main>
{% endblock %}

{% block scripts %}
    <script>
      // Earlier states, fetched when the date is clicked rather than rendered
      // with the page: most visits never open it.
      (function () {
        const button = document.getElementById('historyBtn');
        const menu = document.getElementById('historyMenu');
        if (!button || !menu) return;
        let loaded = false;

        button.addEventListener('click', function () {
          const open = button.getAttribute('aria-expanded') === 'true';
          button.setAttribute('aria-expanded', String(!open));
          menu.hidden = open;
          if (loaded || open) return;
          loaded = true;
          fetch('/history/?path=' + encodeURIComponent('{{ relpath|escapejs }}'))
            .then(r => r.json())
            .then(function (data) {
              const rows = data.revisions.map(function (r) {
                // Say when a line stands for a session rather than a single
                // save, otherwise the count of states looks wrong against the
                // number of times the page was actually written.
                const many = r.saves > 1
                  ? ' <span class="history-count">' + r.saves + ' ' +
                    '{{ "saves"|t|escapejs }}</span>'
                  : '';
                return '<a href="?at=' + r.sha + '">' + r.when + many + '</a>';
              });
              if (data.dirty) {
                rows.unshift('<span class="history-dirty">{{ "modified, not recorded yet"|t|escapejs }}</span>');
              }
              menu.innerHTML = rows.length
                ? rows.join('')
                : '<span class="history-dirty">{{ "no recorded state yet"|t|escapejs }}</span>';
            })
            .catch(function () { menu.innerHTML = ''; });
        });

        document.addEventListener('click', function (e) {
          if (!menu.hidden && !e.target.closest('.history-anchor')) {
            menu.hidden = true;
            button.setAttribute('aria-expanded', 'false');
          }
        });
      })();
    </script>
    <script>
      (function () {
        const main = document.querySelector('.page-body');
        const toc = document.getElementById('toc');
        // Shared with the editor below. A plain flag rather than reading the
        // editor's state: the live-reload stream pushes a render as soon as it
        // connects, which re-runs the enhancers, and they must not undo the
        // editing layout.
        let editing = false;

        // --- Table of contents ---------------------------------------------
        // Built from the rendered headings rather than from python-markdown's
        // toc extension: the ids are already there, and rebuilding on the fly
        // keeps the sommaire correct after a live-reload swap.
        let spy = null;
        function buildToc() {
          const list = toc.querySelector('ul');
          // h1 is included because some pages use it for their sections; the
          // page title is outside .page-body, so it can never be picked up.
          const heads = [...main.querySelectorAll('h1[id], h2[id], h3[id]')];
          if (spy) { spy.disconnect(); spy = null; }
          list.innerHTML = '';
          // While editing there is no rendering to navigate, and showing the
          // toc would also reopen its grid column under the editor.
          if (editing) { toc.hidden = true; return; }
          // A single section is not an outline; don't clutter the page with it.
          if (heads.length < 2) { toc.hidden = true; return; }

          const links = new Map();
          heads.forEach(function (h) {
            const li = document.createElement('li');
            li.className = 'toc-' + h.tagName.toLowerCase();
            const a = document.createElement('a');
            a.href = '#' + h.id;
            // The toc extension appends a "¶" permalink inside the heading;
            // textContent would drag it into the sommaire.
            a.textContent = (h.firstChild && h.firstChild.textContent || h.textContent).trim();
            li.append(a);
            list.append(li);
            links.set(h.id, a);
          });
          toc.hidden = false;

          // Scroll-spy: highlight the heading nearest the top of the viewport.
          const seen = new Set();
          spy = new IntersectionObserver(function (entries) {
            entries.forEach(function (e) {
              if (e.isIntersecting) seen.add(e.target.id); else seen.delete(e.target.id);
            });
            let current = null;
            for (const h of heads) if (seen.has(h.id)) { current = h.id; break; }
            links.forEach(function (a, id) { a.classList.toggle('is-current', id === current); });
          }, { rootMargin: '-10% 0px -70% 0px' });
          heads.forEach(function (h) { spy.observe(h); });
        }

        // --- Copy button on every code box ---------------------------------
        // The language label comes from the server (pymdownx auto_title); a
        // fence with no language gets an empty bar here so all boxes match.
        function addCopyButtons(root) {
          root.querySelectorAll('.highlight').forEach(function (box) {
            if (box.querySelector('.copy-btn')) return;
            let bar = box.querySelector('.filename');
            if (!bar) {
              bar = document.createElement('span');
              bar.className = 'filename';
              box.prepend(bar);
            }
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'copy-btn';
            btn.textContent = 'Copier';
            btn.addEventListener('click', function () {
              const code = box.querySelector('pre');
              copy(code ? code.innerText : '').then(function (ok) {
                btn.textContent = ok ? '{{ "Copied"|t|escapejs }}' : '{{ "Copy"|t|escapejs }}';
                btn.dataset.copied = '';
                setTimeout(function () {
                  btn.textContent = 'Copier';
                  delete btn.dataset.copied;
                }, 1600);
              });
            });
            bar.append(btn);
          });
        }

        // navigator.clipboard needs a secure context: available on localhost,
        // but not if the site is ever served over plain http. Fall back to the
        // old selection trick there rather than failing silently.
        function copy(text) {
          if (navigator.clipboard && window.isSecureContext) {
            return navigator.clipboard.writeText(text).then(
              function () { return true; }, function () { return false; });
          }
          const ta = document.createElement('textarea');
          ta.value = text;
          ta.style.position = 'fixed';
          ta.style.opacity = '0';
          document.body.append(ta);
          ta.select();
          let ok = false;
          try { ok = document.execCommand('copy'); } catch (e) {}
          ta.remove();
          return Promise.resolve(ok);
        }

        // --- Gallery lightbox ----------------------------------------------
        // One overlay for the whole page, appended to <body> (outside .prose so
        // the live-reload swap never removes it). Thumbnails feed it their list.
        let lb = null, lbImg = null, lbCap = null, lbLinks = [], lbIndex = 0;
        function ensureLightbox() {
          if (lb) return;
          lb = document.createElement('div');
          lb.className = 'lightbox';
          lb.hidden = true;
          lb.innerHTML =
            '<button type="button" class="lightbox-close" aria-label="Fermer">×</button>' +
            '<button type="button" class="lightbox-prev" aria-label="{{ "Previous image"|t|escapejs }}">‹</button>' +
            '<button type="button" class="lightbox-next" aria-label="Image suivante">›</button>' +
            '<img alt=""><div class="lightbox-caption"></div>';
          document.body.appendChild(lb);
          lbImg = lb.querySelector('img');
          lbCap = lb.querySelector('.lightbox-caption');
          lb.querySelector('.lightbox-close').addEventListener('click', closeLightbox);
          lb.querySelector('.lightbox-prev').addEventListener('click', function (e) {
            e.stopPropagation(); showLightbox(lbIndex - 1);
          });
          lb.querySelector('.lightbox-next').addEventListener('click', function (e) {
            e.stopPropagation(); showLightbox(lbIndex + 1);
          });
          lb.addEventListener('click', function (e) { if (e.target === lb) closeLightbox(); });
        }
        function showLightbox(i) {
          const n = lbLinks.length;
          lbIndex = (i + n) % n;
          const a = lbLinks[lbIndex];
          lbImg.setAttribute('src', a.getAttribute('href'));
          lbCap.textContent = a.dataset.caption || '';
        }
        function openLightbox(links, i) {
          lbLinks = links; ensureLightbox(); showLightbox(i); lb.hidden = false;
        }
        function closeLightbox() { if (lb) lb.hidden = true; }

        function addGallery(root) {
          root.querySelectorAll('.gallery').forEach(function (g) {
            const links = [].slice.call(g.querySelectorAll('.gallery-link'));
            links.forEach(function (a, i) {
              if (a.dataset.lb) return;
              a.dataset.lb = '1';
              a.addEventListener('click', function (e) { e.preventDefault(); openLightbox(links, i); });
            });
          });
        }

        // --- Sortable data tables (csv / query blocks) ---------------------
        function cellText(row, col) {
          const c = row.children[col];
          return c ? c.textContent.trim() : '';
        }
        function sortTable(table, ths, th, col) {
          const numeric = th.dataset.type === 'num';
          const asc = th.getAttribute('aria-sort') !== 'ascending';
          ths.forEach(function (h) { h.removeAttribute('aria-sort'); });
          th.setAttribute('aria-sort', asc ? 'ascending' : 'descending');
          const tbody = table.querySelector('tbody');
          const rows = [].slice.call(tbody.querySelectorAll('tr'));
          rows.sort(function (r1, r2) {
            let a = cellText(r1, col), b = cellText(r2, col);
            if (numeric) {
              a = parseFloat(a); b = parseFloat(b);
              a = isNaN(a) ? -Infinity : a; b = isNaN(b) ? -Infinity : b;
              return asc ? a - b : b - a;
            }
            return asc ? a.localeCompare(b, 'fr') : b.localeCompare(a, 'fr');
          });
          rows.forEach(function (r) { tbody.appendChild(r); });
        }
        function addTableSort(root) {
          root.querySelectorAll('table.sortable').forEach(function (table) {
            if (table.dataset.sortable) return;
            table.dataset.sortable = '1';
            const ths = [].slice.call(table.querySelectorAll('thead th'));
            ths.forEach(function (th, col) {
              th.addEventListener('click', function () { sortTable(table, ths, th, col); });
            });
          });
        }

        function enhance() {
          addCopyButtons(main);
          addGallery(main);
          addTableSort(main);
          buildToc();
        }
        enhance();

        // Lightbox keyboard control: Escape closes, arrows navigate. Registered
        // once; it only acts while the overlay is open.
        document.addEventListener('keydown', function (e) {
          if (!lb || lb.hidden) return;
          if (e.key === 'Escape') { e.preventDefault(); closeLightbox(); }
          else if (e.key === 'ArrowLeft') { e.preventDefault(); showLightbox(lbIndex - 1); }
          else if (e.key === 'ArrowRight') { e.preventDefault(); showLightbox(lbIndex + 1); }
        });

        // --- Export menu -----------------------------------------------------
        // The button opens a small menu to pick the format; each entry is a
        // plain download link, so the server does the conversion and no script
        // is needed once a format is chosen. Closes on outside click or Escape.
        const exportMenu = document.getElementById('exportMenu');
        const exportBtn = document.getElementById('exportBtn');
        const exportChoices = document.getElementById('exportChoices');
        function closeExport() {
          exportChoices.hidden = true;
          exportBtn.setAttribute('aria-expanded', 'false');
        }
        exportBtn.addEventListener('click', function (e) {
          e.stopPropagation();
          const open = exportChoices.hidden;
          exportChoices.hidden = !open;
          exportBtn.setAttribute('aria-expanded', String(open));
        });
        exportChoices.addEventListener('click', function (e) {
          if (e.target.closest('a')) closeExport();
        });
        document.addEventListener('click', function (e) {
          if (!exportChoices.hidden && !exportMenu.contains(e.target)) closeExport();
        });
        document.addEventListener('keydown', function (e) {
          if (e.key === 'Escape' && !exportChoices.hidden) closeExport();
        });

        // --- Markdown editor -------------------------------------------------
        // Toggles between the rendered page and its raw source. The mtime read
        // when the source is fetched travels back on save: the server compares
        // it and refuses rather than overwrite an edit made meanwhile in a
        // local text editor.
        const RELPATH = '{{ relpath }}';
        const editor = document.getElementById('editor');
        const editToggle = document.getElementById('editToggle');
        const textarea = document.getElementById('editorText');
        const statusEl = document.getElementById('editorStatus');
        const backlinks = document.querySelector('.backlinks');
        let mtime = null, loaded = false, dirty = false, savedAt = 0;

        function csrf() {
          const el = editor.querySelector('[name=csrfmiddlewaretoken]');
          return el ? el.value : '';
        }

        function say(message, kind) {
          statusEl.textContent = message;
          statusEl.dataset.kind = kind || '';
        }

        function setEditing(on) {
          editor.hidden = !on;
          main.hidden = on;
          if (backlinks) backlinks.hidden = on;
          // Editing wants room, and the sommaire describes a rendering that is
          // no longer on screen. Hiding the toc through its `hidden` attribute
          // rather than with CSS is what collapses its grid column too: the
          // layout keys on that attribute, so there is nothing to override.
          editing = on;
          document.querySelector('.page').classList.toggle('is-editing', on);
          buildToc();
          editToggle.setAttribute('aria-pressed', String(on));
          if (on) textarea.focus();
        }

        function openEditor() {
          setEditing(true);
          if (loaded) return;
          say('Chargement…');
          fetch('/source/?path=' + encodeURIComponent(RELPATH))
            .then(function (r) {
              if (!r.ok) throw new Error(r.status);
              return r.json();
            })
            .then(function (d) {
              textarea.value = d.text;
              mtime = d.mtime;
              loaded = true;
              dirty = false;
              say('');
            })
            .catch(function () {
              say('Impossible de charger la source.', 'error');
            });
        }

        function closeEditor() {
          if (dirty && !window.confirm('{{ "Unsaved changes. Close anyway?"|t|escapejs }}')) {
            return;
          }
          setEditing(false);
        }

        function save() {
          if (!loaded) return;
          say('Enregistrement…');
          fetch('/save/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrf() },
            body: JSON.stringify({ path: RELPATH, text: textarea.value, mtime: mtime })
          })
            .then(function (r) {
              return r.json().then(function (d) { return { ok: r.ok, status: r.status, d: d }; });
            })
            .then(function (res) {
              if (!res.ok) {
                say(res.d.error || 'Échec de l’enregistrement.', 'error');
                return;
              }
              // The pre-commit hook stamps `updated:` into the frontmatter, so
              // what is on disk now differs from what was typed. Take the
              // server's version back, keeping the caret where it was.
              const caret = textarea.selectionStart;
              if (textarea.value !== res.d.text) {
                textarea.value = res.d.text;
                textarea.setSelectionRange(caret, caret);
              }
              mtime = res.d.mtime;
              dirty = false;
              savedAt = Date.now();
              say(res.d.committed ? '{{ "Saved and committed"|t|escapejs }}' : '{{ "Saved (unversioned)"|t|escapejs }}', 'ok');
              // The title lives in the frontmatter but is rendered outside the
              // body the live reload swaps, so only a reload can refresh it.
              if (res.d.title !== document.title) window.location.reload();
            })
            .catch(function () {
              say('{{ "Saving failed (network)."|t|escapejs }}', 'error');
            });
        }

        // `#edit` in the URL opens the editor straight away, so a page can be
        // linked to in its editable form.
        if (window.location.hash === '#edit') openEditor();

        textarea.addEventListener('input', function () {
          dirty = true;
          say('{{ "Updated"|t|escapejs }}');
        });
        editToggle.addEventListener('click', function () {
          editor.hidden ? openEditor() : closeEditor();
        });
        document.getElementById('editorSave').addEventListener('click', save);

        // --- Documents -------------------------------------------------------
        // A file dropped, pasted or picked becomes a page of its own, and the
        // note gets a reference to it. The file therefore lives in one place
        // however many notes show it, and it is findable on its own.
        const docInput = document.getElementById('docInput');
        const docBtn = document.getElementById('docBtn');

        function insertAtCaret(text) {
          const start = textarea.selectionStart;
          const end = textarea.selectionEnd;
          textarea.value = textarea.value.slice(0, start) + text + textarea.value.slice(end);
          textarea.selectionStart = textarea.selectionEnd = start + text.length;
          textarea.focus();
        }

        function upload(file) {
          if (!file) return;
          say('{{ "Sending…"|t|escapejs }}');
          const body = new FormData();
          body.append('file', file);
          // Beside this page, not as a page of its own: the file is indexed
          // either way, and this is one click instead of three.
          body.append('beside', '{{ relpath|escapejs }}');
          fetch('/upload/', { method: 'POST', body: body, headers: { 'X-CSRFToken': csrf() } })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d }; }); })
            .then(function (res) {
              if (!res.ok) { say(res.d.error, 'error'); return; }
              insertAtCaret(res.d.snippet);
              say('{{ "Document added"|t|escapejs }}', 'ok');
            })
            .catch(function () { say('{{ "Sending failed (network)."|t|escapejs }}', 'error'); });
        }

        docBtn.addEventListener('click', function () { docInput.click(); });
        docInput.addEventListener('change', function () {
          upload(docInput.files[0]);
          docInput.value = '';  // so picking the same file twice still fires
        });

        // Dropping needs both handlers: without preventing dragover, the
        // browser navigates to the file instead of handing it over.
        textarea.addEventListener('dragover', function (e) {
          e.preventDefault();
          textarea.classList.add('is-dropping');
        });
        textarea.addEventListener('dragleave', function () {
          textarea.classList.remove('is-dropping');
        });
        textarea.addEventListener('drop', function (e) {
          e.preventDefault();
          textarea.classList.remove('is-dropping');
          if (e.dataTransfer.files.length) upload(e.dataTransfer.files[0]);
        });

        // Pasting a screenshot: the clipboard carries it as a file with no
        // name, so give it one rather than letting it be "image.png" forever.
        textarea.addEventListener('paste', function (e) {
          const item = Array.from(e.clipboardData.items).find(function (i) {
            return i.kind === 'file';
          });
          if (!item) return;  // ordinary text paste, leave it alone
          e.preventDefault();
          const file = item.getAsFile();
          const stamp = new Date().toISOString().slice(0, 16).replace(/[-T:]/g, '');
          upload(new File([file], 'capture-' + stamp + '.' + (file.type.split('/')[1] || 'png'),
                          { type: file.type }));
        });

        // --- Move (change domain/type) --------------------------------------
        // Re-files the page: the directory moves on disk, so the URL changes.
        // Refused while there are unsaved edits, since the reload that follows
        // the move would drop them.
        const moveBtn = document.getElementById('moveBtn');
        const moveDomain = document.getElementById('moveDomain');
        const moveType = document.getElementById('moveType');
        function move() {
          if (dirty) {
            say('{{ "Save your changes before moving the page."|t|escapejs }}', 'error');
            return;
          }
          say('{{ "Moving…"|t|escapejs }}');
          fetch('/move/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrf() },
            body: JSON.stringify({ path: RELPATH, domain: moveDomain.value, type: moveType.value })
          })
            .then(function (r) {
              return r.json().then(function (d) { return { ok: r.ok, d: d }; });
            })
            .then(function (res) {
              if (!res.ok) {
                say(res.d.error || '{{ "Moving failed."|t|escapejs }}', 'error');
                return;
              }
              // The URL moved with the directory; land on it, still in edit mode.
              window.location.href = res.d.url + '#edit';
            })
            .catch(function () {
              say('{{ "Moving failed (network)."|t|escapejs }}', 'error');
            });
        }
        moveBtn.addEventListener('click', move);
        document.addEventListener('keydown', function (e) {
          if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'e') {
            e.preventDefault();
            editor.hidden ? openEditor() : closeEditor();
          } else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's' && !editor.hidden) {
            e.preventDefault();
            save();
          } else if (e.key === 'Escape' && !editor.hidden) {
            closeEditor();
          }
        });
        window.addEventListener('beforeunload', function (e) {
          if (dirty) { e.preventDefault(); e.returnValue = ''; }
        });

        // --- Live reload ----------------------------------------------------
        // Swap the rendered body in place whenever the .md changes on disk.
        // Only .page-body is replaced, so the header and the backlinks survive;
        // everything JS added inside it is rebuilt by enhance().
        // The stream pushes a first render as soon as it connects, which is the
        // page we are already looking at, not a change. Counting it as one made
        // `#edit` open onto a "the file changed" warning about nothing.
        let firstPush = true;
        const es = new EventSource('/stream/?path=' + encodeURIComponent(RELPATH));
        es.addEventListener('update', function (e) {
          main.innerHTML = JSON.parse(e.data);
          enhance();
          if (window.MathJax && window.MathJax.typesetPromise) {
            window.MathJax.typesetPromise([main]);
          }
          // A change landing while the editor is open means someone else wrote
          // the file, and the mtime we hold is now stale (the next save would
          // be refused). Our own save fires this too, hence the short grace
          // window rather than a warning on every keystroke saved.
          if (!firstPush && !editor.hidden && Date.now() - savedAt > 2000) {
            say('{{ "The file changed on disk. Reload before saving."|t|escapejs }}',
                'error');
          }
          firstPush = false;
        });
      })();
    </script>
{% endblock %}