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

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

{% block head %}
    <link rel="stylesheet" href="{% static '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="Éditer le Markdown de cette page" title="Éditer (Ctrl+E)">
        <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="Basculer la largeur de lecture (restreint / étendu)"
            title="Largeur de lecture">
        <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="Exporter cette page" title="Exporter (Word ou PDF)">
            <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">Exporter en</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="Sommaire" hidden>
        <p class="toc-label">Sommaire</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="Cette page n'est visible qu'en local">privé</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 %}
            <p class="page-meta">
                {% if page.display_date %}<span>{{ page.display_date }}</span>{% endif %}
                <span>{{ reading_minutes }} min de lecture</span>
                {% 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>

        <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="Source Markdown de la page"></textarea>
            <div class="editor-bar">
                <button type="button" class="btn" id="editorSave">Enregistrer</button>
                <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">Déplacer vers</span>
                    <select id="moveDomain" aria-label="Domaine de destination">
                        {% 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="Type de destination">
                        {% 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">Déplacer</button>
                </div>
            </div>
        </div>

        {% if backlinks %}
        <aside class="backlinks">
            <h2>Cité par</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>
      (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 ? 'Copié' : 'Échec';
                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="Image précédente">‹</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('Modifications non enregistrées. Fermer ?')) {
            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 ? 'Enregistré et commité' : 'Enregistré (non versionné)', '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('Échec de l’enregistrement (réseau).', '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('Modifié');
        });
        editToggle.addEventListener('click', function () {
          editor.hidden ? openEditor() : closeEditor();
        });
        document.getElementById('editorSave').addEventListener('click', save);

        // --- 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('Enregistre d’abord tes modifications avant de déplacer la page.', 'error');
            return;
          }
          say('Déplacement…');
          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 || 'Échec du déplacement.', '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('Échec du déplacement (réseau).', '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('Le fichier a changé sur le disque. Recharge avant d’enregistrer.',
                'error');
          }
          firstPush = false;
        });
      })();
    </script>
{% endblock %}