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

{% block title %}{{ "Home"|t }}{% endblock %}
{% block topbar %}{{ "Home"|t }}{% endblock %}

{% block content %}
    <main class="home">
        <h1>{{ "Contents"|t }}</h1>

        <input type="search" class="search" id="q" enterkeyhint="search"
           autocapitalize="off" autocorrect="off" value="{{ query }}"
               placeholder="{{ "Search the notes…"|t }}" autocomplete="off"
               aria-label="{{ "Search the notes…"|t }}">
        <!-- Shown on focus only: quoting is worth knowing, not worth a
             permanent line of instructions above one's own notes. -->
        <p class="search-hint">{{ "Words narrow, and match the start of a word. Best matches first; ↓ then Enter opens one."|t }}</p>

        <!-- Facets, count and results. Replaced wholesale as the selection
             narrows, by the very fragment the server rendered here. -->
        <div id="explorer">{% include "_explorer.html" %}</div>
    </main>
{% endblock %}

{% block scripts %}
    <script>
      (function () {
        const input = document.getElementById('q');
        const explorer = document.getElementById('explorer');

        // The URL is the selection: every interaction edits it, the server
        // answers with the fragment, and the address bar keeps saying what is
        // on screen. No second filtering implementation lives here.
        function params() {
          return new URLSearchParams(location.search);
        }

        let pending = null;
        function apply(next) {
          const qs = next.toString();
          const url = qs ? '?' + qs : location.pathname;
          history.replaceState(null, '', url);
          if (pending) pending.abort();
          pending = new AbortController();
          // The filter panel is inside the fragment, so it is rebuilt on
          // every interaction; without this it would snap shut under the
          // finger that just opened it.
          const panel = document.getElementById('facetPanel');
          const wasOpen = panel ? panel.open : null;
          fetch('/search/?' + qs, { signal: pending.signal })
            .then(r => r.text())
            .then(html => {
              explorer.innerHTML = html;
              const fresh = document.getElementById('facetPanel');
              if (fresh && wasOpen !== null) fresh.open = wasOpen;
              else foldFacets();
            })
            .catch(() => {});
        }

        // Folding is a small-screen affordance and the viewport is only known
        // here. Never folded over a filter already in force: a hidden panel
        // must not be able to hide that something is being filtered.
        const narrow = window.matchMedia('(max-width: 760px)');
        function foldFacets() {
          const panel = document.getElementById('facetPanel');
          if (!panel) return;
          panel.open = !narrow.matches || panel.dataset.active !== '0';
        }
        foldFacets();
        narrow.addEventListener('change', foldFacets);

        // Three letters and Enter, without reaching for a pointer. Down from
        // the field steps into the results; Enter opens the first one, which
        // is the whole point of ranking them.
        function results() {
          return Array.from(explorer.querySelectorAll('.card-title, .tiles a'));
        }
        input.addEventListener('keydown', function (e) {
          const found = results();
          if (!found.length) return;
          if (e.key === 'ArrowDown') { e.preventDefault(); found[0].focus(); }
          else if (e.key === 'Enter') { e.preventDefault(); found[0].click(); }
        });
        explorer.addEventListener('keydown', function (e) {
          if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
          const found = results();
          const at = found.indexOf(document.activeElement);
          if (at === -1) return;
          e.preventDefault();
          if (e.key === 'ArrowUp' && at === 0) input.focus();
          else found[Math.min(found.length - 1, at + (e.key === 'ArrowDown' ? 1 : -1))].focus();
        });

        let timer = null;
        input.addEventListener('input', function () {
          clearTimeout(timer);
          timer = setTimeout(function () {
            const next = params();
            const value = input.value.trim();
            value ? next.set('q', value) : next.delete('q');
            apply(next);
          }, 180);
        });

        // Delegated: the fragment is replaced on every change, so listeners
        // bound to its children would die with the first one.
        // Menus answer to `change`, not to a click on a chip.
        explorer.addEventListener('change', function (e) {
          const menu = e.target.closest('.facet-menu');
          if (!menu) return;
          const next = params();
          next.delete(menu.dataset.param);
          if (menu.value) next.append(menu.dataset.param, menu.value);
          apply(next);
        });

        explorer.addEventListener('click', function (e) {
          const chip = e.target.closest('.chip');
          if (!chip) return;
          const next = params();

          if (chip.dataset.view) {
            next.set('view', chip.dataset.view);
            apply(next);
            return;
          }

          const param = chip.dataset.param;
          const value = chip.dataset.value;
          const current = next.getAll(param);
          const wasActive = current.includes(value);
          next.delete(param);

          if (param === 'tag') {
            // Tags accumulate: they answer "about what?", and asking about two
            // subjects at once is a legitimate question.
            current.filter(v => v !== value).forEach(v => next.append(param, v));
            if (!wasActive) next.append(param, value);
          } else if (!wasActive) {
            // Everything else is single-valued: clicking another domain moves
            // there rather than adding to it. Clicking the active one clears it.
            next.append(param, value);
          }

          // `view` is kept: it is only ever set by the switch, so its presence
          // means the reader chose, and a choice must survive the next click.
          apply(next);
        });
      })();
    </script>
{% endblock %}