{% extends "base.html" %}
{% block title %}Documents · {{ portal_name }}{% endblock %}
{% block main_class %} full-bleed{% endblock %}
{% block content %}

<div class="cabinet">

  <button type="button" class="rail-open" id="rail-open" aria-expanded="false" aria-controls="rail">
    Browse
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
  </button>

  <div class="rail-scrim" id="rail-scrim" hidden></div>

  <aside class="rail" id="rail" aria-label="Browse documents">
    <div class="rail-inner">
      <div class="rail-head">
        <span class="rail-title">Browse</span>
        <button type="button" class="rail-close" id="rail-close" aria-label="Close">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
      </div>

      <div class="rail-group">
        <p class="rail-label">Collection</p>
        <a class="rail-item{% if not active_category and when == 'all' %} is-on{% endif %}" href="?group=category">
          All documents<span class="rail-n">{{ library_total }}</span>
        </a>
        {% for entry in rail_categories %}
          <a class="rail-item{% if entry.category.slug == active_category %} is-on{% endif %}"
             style="--cat: {{ entry.category.colour }}"
             href="?group={% if show_document_dates %}date{% else %}all{% endif %}&amp;category={{ entry.category.slug }}">
            <span class="rail-dot" aria-hidden="true"></span>{{ entry.category.name }}<span class="rail-n">{{ entry.count }}</span>
          </a>
        {% endfor %}
      </div>

      {% if show_document_dates %}
      <div class="rail-group">
        <p class="rail-label">Year</p>
        <a class="rail-item{% if when == 'recent' %} is-on{% endif %}" href="?group=category&amp;when=recent">
          Past year<span class="rail-n">{{ count_recent }}</span>
        </a>
        <a class="rail-item{% if when == 'current' %} is-on{% endif %}" href="?group=category&amp;when=current">
          {{ this_year }}<span class="rail-n">{{ count_this_year }}</span>
        </a>
        <a class="rail-item{% if when == 'last' %} is-on{% endif %}" href="?group=category&amp;when=last">
          {{ last_year }}<span class="rail-n">{{ count_last_year }}</span>
        </a>
      </div>
      {% endif %}
    </div>
  </aside>

  <div class="pane">
    <div class="pane-head">
      <div class="pane-title">
        <h1>{{ pane_title }}</h1>
        <p class="page-sub">{{ pane_sub }}</p>
      </div>
      <div class="pane-tools">
        <div class="search-field">
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
          <input type="search" id="filter" placeholder="Search documents…" autocomplete="off" aria-label="Search documents">
          <button type="button" id="clear-filter" class="clear-btn" hidden aria-label="Clear search">&times;</button>
        </div>
        <div class="segmented" role="group" aria-label="Layout">
          <a class="seg{% if group_by != 'all' %} is-on{% endif %}" href="?group={% if active_category %}{% if show_document_dates %}date{% else %}category{% endif %}&amp;category={{ active_category }}{% else %}category{% if when != 'all' %}&amp;when={{ when }}{% endif %}{% endif %}">Grouped</a>
          <a class="seg{% if group_by == 'all' %} is-on{% endif %}" href="?group=all{% if active_category %}&amp;category={{ active_category }}{% endif %}">Flat</a>
        </div>
      </div>
    </div>

    {% if staff_ui %}
    <div class="dropzone page-dropzone" id="open-uploader" tabindex="0" role="button"
         aria-label="Add documents — choose files or drop them here">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
      </svg>
      <span class="staff-flag">Staff only</span>
      <p class="dz-title">Add Documents</p>
      <p class="dz-main">Drop files here, or <span class="dz-link">choose files</span></p>
      <p class="dz-sub">As many as you like &middot; up to {{ max_mb }}MB each</p>
      <input type="file" id="page-picker" multiple hidden
             accept=".pdf,.doc,.docx,.odt,.rtf,.txt,.xls,.xlsx,.csv,.ods,.ppt,.pptx,.odp,.jpg,.jpeg,.png">
    </div>
    {% endif %}

<p class="result-line" id="result-line" hidden></p>

<div id="browser">
{% for group in sections %}
  <section class="year-block" {% if group.colour %}style="--cat: {{ group.colour }}"{% endif %}>
    <h2 class="year-label{% if group.colour %} has-colour{% endif %}">
      {{ group.label }}
      {% if group.total %}<span class="year-count">{{ group.total }}</span>{% endif %}
    </h2>

    {% for item in group.items %}{% include "documents/_item.html" with hide_category=hide_category %}{% endfor %}

    {% if group.more %}
      <details class="more-block">
        <summary class="more-toggle">
          Show {{ group.more|length }} more in {{ group.label }}
        </summary>
        <div class="more-body">
          {% for item in group.more %}{% include "documents/_item.html" with hide_category=hide_category %}{% endfor %}
        </div>
      </details>
    {% endif %}
  </section>
{% empty %}
  <div class="empty-state">
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3v5h5"/><path d="M15 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/></svg>
    <h2>No documents yet</h2>
    <p>Documents will appear here once they've been added.</p>
  </div>
{% endfor %}
</div>

<div class="empty-state" id="no-matches" hidden>
  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <h2>Nothing matched</h2>
  <p>Try a different word, or <button type="button" class="btn ghost" id="reset-search">clear the search</button></p>
</div>

  </div><!-- /.pane -->
</div><!-- /.cabinet -->

<script>
/* The rail is a drawer below 900px. Focus moves into it on open and back to
   the button on close, so it is usable without a mouse. */
(function () {
  const rail = document.getElementById('rail');
  const scrim = document.getElementById('rail-scrim');
  const opener = document.getElementById('rail-open');
  const closer = document.getElementById('rail-close');
  if (!rail || !opener) return;

  function setOpen(open) {
    rail.classList.toggle('is-open', open);
    scrim.hidden = !open;
    opener.setAttribute('aria-expanded', open ? 'true' : 'false');
    document.body.style.overflow = open ? 'hidden' : '';
    (open ? closer : opener).focus();
  }
  opener.addEventListener('click', () => setOpen(true));
  closer.addEventListener('click', () => setOpen(false));
  scrim.addEventListener('click', () => setOpen(false));
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && rail.classList.contains('is-open')) setOpen(false);
  });
  // Following a rail link navigates; leaving the drawer open would flash it
  // over the new page on a slow connection.
  rail.addEventListener('click', (e) => {
    if (e.target.closest('.rail-item')) setOpen(false);
  });
})();
</script>

<script>
(function () {
  const input   = document.getElementById('filter');
  const browser = document.getElementById('browser');
  const line    = document.getElementById('result-line');
  const none    = document.getElementById('no-matches');
  const clear   = document.getElementById('clear-filter');
  const reset   = document.getElementById('reset-search');
  if (!input || !browser) return;

  const rows    = [...browser.querySelectorAll('[data-search]')];
  const folders = [...browser.querySelectorAll('.folder')];
  const years   = [...browser.querySelectorAll('.year-block')];

  function apply(term) {
    const q = term.trim().toLowerCase();
    clear.hidden = !q;

    if (!q) {
      rows.forEach(r => r.hidden = false);
      folders.forEach(f => f.open = false);
      years.forEach(y => y.hidden = false);
      line.hidden = true;
      none.hidden = true;
      browser.hidden = false;
      return;
    }

    let hits = 0;
    // A folder matches if its own text matches; otherwise it opens to reveal
    // whichever of its documents match.
    rows.forEach(row => {
      const isFolder = row.classList.contains('folder');
      if (isFolder) return;
      const match = row.dataset.search.includes(q);
      row.hidden = !match;
      if (match) hits++;
    });

    folders.forEach(folder => {
      const visible = [...folder.querySelectorAll('[data-search]')]
        .filter(r => !r.hidden).length;
      const self = folder.dataset.search.includes(q);
      folder.hidden = !(visible || self);
      folder.open = Boolean(visible || self);
      if (self && !visible) {
        folder.querySelectorAll('[data-search]').forEach(r => r.hidden = false);
      }
    });

    years.forEach(year => {
      year.hidden = ![...year.querySelectorAll('[data-search]')].some(r => !r.hidden);
    });

    const total = [...browser.querySelectorAll('.doc[data-search]')]
      .filter(r => !r.hidden).length;
    line.textContent = total + (total === 1 ? ' document' : ' documents') + ' matching “' + term.trim() + '”';
    line.hidden = false;
    none.hidden = total > 0;
    browser.hidden = total === 0;
  }

  let timer;
  input.addEventListener('input', e => {
    clearTimeout(timer);
    timer = setTimeout(() => apply(e.target.value), 90);
  });
  clear.addEventListener('click', () => { input.value = ''; apply(''); input.focus(); });
  if (reset) reset.addEventListener('click', () => { input.value = ''; apply(''); input.focus(); });
})();
</script>

{% if staff_ui %}
<dialog id="upload-dialog" class="sheet">
  <div class="sheet-head">
    <h2>Add documents</h2>
    <button type="button" class="sheet-close" data-close-sheet aria-label="Close">&times;</button>
  </div>
  <div class="sheet-body">
    {% include "backoffice/_uploader.html" %}
  </div>
</dialog>

<dialog id="edit-dialog" class="sheet sheet-narrow">
  <form method="dialog" id="edit-form">
    <div class="sheet-head">
      <h2 id="edit-heading">Edit</h2>
      <button type="button" class="sheet-close" data-close-sheet aria-label="Close">&times;</button>
    </div>
    <div class="sheet-body stack">
      <div class="field"><label for="edit-title">Name</label>
        <input type="text" id="edit-title" required></div>
      <div class="field"><label for="edit-date">Date</label>
        <input type="date" id="edit-date"></div>
      <div class="field" id="category-row"><label for="edit-category">Category</label>
        <select id="edit-category">
          <option value="">— none —</option>
          {% for category in categories %}<option value="{{ category.pk }}">{{ category.name }}</option>{% endfor %}
        </select></div>
      <label class="checkline" id="cascade-row">
        <input type="checkbox" id="edit-cascade" checked>
        Give the documents in this group the same date
      </label>
      <p class="error" id="edit-error" hidden></p>
    </div>
    <div class="sheet-foot">
      <button type="button" class="btn" id="edit-save">Save</button>
      <button type="button" class="btn ghost" data-close-sheet>Cancel</button>
    </div>
  </form>
</dialog>

<script>
(function () {
  const upload = document.getElementById('upload-dialog');
  const edit   = document.getElementById('edit-dialog');
  const csrf   = document.querySelector('#upload-dialog [name=csrfmiddlewaretoken]');

  document.querySelectorAll('[data-close-sheet]').forEach(b =>
    b.addEventListener('click', () => b.closest('dialog').close()));
  document.querySelectorAll('dialog.sheet').forEach(d =>
    d.addEventListener('click', e => { if (e.target === d) d.close(); }));

  // ---- uploader ----
  const zone = document.getElementById('open-uploader');
  const pagePicker = document.getElementById('page-picker');
  const openUpload = () => { if (!upload.open) upload.showModal(); };

  function handOver(fileArray) {
    openUpload();
    if (fileArray.length) window.portalUploaderAdd?.(fileArray);
  }

  zone?.addEventListener('click', () => pagePicker.click());
  zone?.addEventListener('keydown', e => {
    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pagePicker.click(); }
  });
  pagePicker?.addEventListener('change', e => {
    handOver([...e.target.files]); e.target.value = '';
  });
  {% if open_uploader %}openUpload();{% endif %}

  // Dropping anywhere on the page opens the sheet with those files already in.
  let depth = 0;
  const carriesFiles = e => [...(e.dataTransfer?.types || [])].includes('Files');
  window.addEventListener('dragenter', e => {
    if (!carriesFiles(e)) return;
    depth++; document.body.classList.add('page-drop'); zone?.classList.add('is-over');
  });
  window.addEventListener('dragleave', () => {
    if (--depth <= 0) { document.body.classList.remove('page-drop'); zone?.classList.remove('is-over'); }
  });
  window.addEventListener('dragover', e => { if (carriesFiles(e)) e.preventDefault(); });
  window.addEventListener('drop', e => {
    depth = 0;
    document.body.classList.remove('page-drop'); zone?.classList.remove('is-over');
    if (upload.contains(e.target)) return;      // the sheet handles its own drops
    // dataTransfer is emptied the moment this handler returns, so the files
    // must be copied out synchronously — reading them later yields nothing.
    const dropped = [...(e.dataTransfer?.files || [])];
    if (!dropped.length) return;
    e.preventDefault();
    handOver(dropped);
  });

  // ---- editing ----
  let current = null;
  document.querySelectorAll('.edit-btn[data-kind]').forEach(btn => {
    btn.addEventListener('click', e => {
      e.preventDefault(); e.stopPropagation();
      current = btn;
      const isGroup = btn.dataset.kind === 'collection';
      document.getElementById('edit-heading').textContent = isGroup ? 'Edit group' : 'Edit document';
      document.getElementById('edit-title').value = btn.dataset.title || '';
      document.getElementById('edit-date').value = btn.dataset.date || '';
      document.getElementById('edit-category').value = btn.dataset.category || '';
      // A group has no category of its own: its documents each have one.
      document.getElementById('category-row').hidden = isGroup;
      document.getElementById('cascade-row').hidden = !isGroup;
      document.getElementById('edit-error').hidden = true;
      edit.showModal();
    });
  });

  document.getElementById('edit-save').addEventListener('click', async () => {
    if (!current) return;
    const isGroup = current.dataset.kind === 'collection';
    const title = document.getElementById('edit-title').value.trim();
    if (!title) { const el = document.getElementById('edit-error'); el.textContent = 'A name is required.'; el.hidden = false; return; }
    const body = {
      title,
      date: document.getElementById('edit-date').value,
      category: document.getElementById('edit-category').value,
    };
    if (isGroup) {
      delete body.category;
      body.cascade = document.getElementById('edit-cascade').checked;
    }
    const url = (isGroup ? '{% url "backoffice:collection_update" 0 %}' : '{% url "backoffice:document_update" 0 %}')
      .replace(/0\/update\/$/, current.dataset.id + '/update/');
    try {
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'X-CSRFToken': csrf.value, 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error();
      edit.close();
      window.location.assign(window.location.pathname + window.location.search);
    } catch (err) {
      const el = document.getElementById('edit-error');
      el.textContent = 'Could not save that — please try again.'; el.hidden = false;
    }
  });
})();
</script>
{% endif %}

{% endblock %}