{% extends 'base.html' %}

{% block title %}{% block panel_title %}Panel{% endblock %} · {{ site_settings.site_name|default:"D-LIS" }}{% endblock %}
{% block meta %}<meta name="robots" content="noindex, nofollow">{% endblock %}
{% block body_class %}panel-ui{% endblock %}

{% block body %}
<a href="#tresc" class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[60] btn-primary">Przejdź do treści</a>

<button type="button" id="nav-overlay" data-toggle="nav-toggle" tabindex="-1" aria-hidden="true"
        class="fixed inset-0 z-40 hidden bg-slate-900/60 lg:hidden">
  <span class="sr-only">Zamknij menu</span>
</button>

<aside id="drawer" aria-label="Menu panelu (mobilne)" aria-hidden="true"
       class="fixed inset-y-0 right-0 z-50 flex w-64 translate-x-full flex-col bg-slate-900 transition-transform duration-200 ease-out lg:hidden">
  <div class="flex h-16 items-center justify-between px-6">
    <span class="flex items-center gap-2">
      <a href="{% url 'panel:dashboard' %}" class="truncate text-xl font-bold tracking-tight text-white">{{ site_settings.site_name|default:"D-LIS" }}</a>
      <span class="bg-brand-600 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white">Panel</span>
    </span>
    <button type="button" data-toggle="nav-toggle" aria-label="Zamknij menu"
            class="cursor-pointer p-1.5 text-slate-400 transition hover:bg-white/5 hover:text-white">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6L6 18"/>
      </svg>
    </button>
  </div>

  <nav class="sidebar-scroll flex-1 space-y-1 overflow-y-auto px-3 py-4" aria-label="Moduły panelu (menu mobilne)">
    {% include 'panel/partials/nav.html' %}
  </nav>

  <div class="space-y-3 border-t border-white/10 p-4 text-slate-300">
    {% include 'panel/partials/user-box.html' %}
  </div>
</aside>

<div class="flex h-full overflow-hidden">

  <aside id="sidebar" class="hidden h-full w-64 shrink-0 flex-col bg-slate-900 transition-[width] duration-200 ease-out lg:flex" aria-label="Menu panelu">
    <div class="nav-head flex h-16 items-center justify-between gap-2 px-4">
      <span class="nav-brand flex min-w-0 items-center gap-2">
        <a href="{% url 'panel:dashboard' %}" class="truncate text-xl font-bold tracking-tight text-white hover:text-brand-200">
          {{ site_settings.site_name|default:"D-LIS" }}
        </a>
        <span class="bg-brand-600 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-white">Panel</span>
      </span>

      <button type="button" id="nav-collapse" aria-controls="sidebar" aria-expanded="true"
              class="shrink-0 cursor-pointer p-1.5 text-slate-400 transition hover:bg-white/5 hover:text-white">
        <span class="sr-only">Zwiń menu</span>
        <svg class="nav-collapse-icon h-5 w-5 transition-transform" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 6l-6 6 6 6"/>
        </svg>
      </button>
    </div>

    <nav class="sidebar-scroll flex-1 space-y-1 overflow-y-auto px-3 py-4" aria-label="Moduły panelu">
      {% include 'panel/partials/nav.html' %}
    </nav>

    <div class="nav-foot space-y-3 border-t border-white/10 p-4 text-slate-300">
      {% include 'panel/partials/user-box.html' %}
    </div>
  </aside>

  <script nonce="{{ csp_nonce }}">
    (function () {
      try {
        if (localStorage.getItem('panel-nav-collapsed') === '1') {
          var el = document.getElementById('sidebar');
          el.classList.add('nav-collapsed');
          // Od razu otwieramy kategorie, żeby zwinięte menu od pierwszej
          // klatki pokazywało komplet ikon (stan zapamiętuje data-was-open).
          Array.prototype.forEach.call(el.querySelectorAll('.nav-cat'), function (cat) {
            cat.setAttribute('data-was-open', cat.open ? '1' : '0');
            cat.open = true;
          });
        }
      } catch (e) {}
    })();
  </script>

  <main id="tresc" class="min-w-0 flex-1 overflow-y-auto">
    <header class="border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
      <div class="mx-auto flex w-full max-w-7xl flex-wrap items-center justify-between gap-4 px-4 py-4 sm:px-6">
        <div class="flex min-w-0 items-center gap-3">
          <div class="min-w-0">
            <h1 class="truncate text-xl font-semibold">{% block heading %}{% endblock %}</h1>
            {% block subheading %}{% endblock %}
          </div>
        </div>
        <div class="flex flex-1 flex-wrap items-center justify-end gap-2">
          {% include 'panel/partials/search-box.html' %}
          {% block actions %}{% endblock %}
          <button type="button" data-toggle="nav-toggle" aria-controls="drawer" aria-expanded="false"
                  class="btn-ghost shrink-0 p-2 lg:hidden">
            <span class="sr-only">Otwórz menu</span>
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
              <path d="M4 7h16M4 12h16M4 17h16"/>
            </svg>
          </button>
        </div>
      </div>
    </header>

    <div class="mx-auto w-full max-w-7xl space-y-6 p-4 sm:p-6">
      {% include 'panel/partials/messages.html' %}
      {% block content %}{% endblock %}
    </div>
  </main>
</div>
{% endblock %}

{% block scripts %}
<script nonce="{{ csp_nonce }}">
  // Szuflada menu na mobile: każdy przycisk data-toggle="nav-toggle"
  // przełącza, Escape zamyka, a powrót na desktop resetuje stan.
  (function () {
    var drawer = document.getElementById('drawer');
    var overlay = document.getElementById('nav-overlay');
    if (!drawer) return;

    function setOpen(open) {
      drawer.classList.toggle('translate-x-full', !open);
      drawer.setAttribute('aria-hidden', open ? 'false' : 'true');
      if (overlay) overlay.classList.toggle('hidden', !open);
      document.querySelectorAll('[data-toggle="nav-toggle"][aria-controls="drawer"]').forEach(function (el) {
        el.setAttribute('aria-expanded', open ? 'true' : 'false');
      });
    }

    document.querySelectorAll('[data-toggle="nav-toggle"]').forEach(function (el) {
      el.addEventListener('click', function () {
        setOpen(drawer.classList.contains('translate-x-full'));
      });
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') setOpen(false);
    });

    window.matchMedia('(min-width: 1024px)').addEventListener('change', function (e) {
      if (e.matches) setOpen(false);
    });
  })();

  // Zwijanie sidebara desktopowego do samych ikon. Stan pamiętany w
  // localStorage; kliknięcie w zwinięte menu z podzakladkami najpierw je rozwija.
  (function () {
    var sidebar = document.getElementById('sidebar');
    var button = document.getElementById('nav-collapse');
    if (!sidebar || !button) return;

    // Kategorie to <details> - zamknięte chowają swoje pozycje, więc po
    // zwinieciu sidebara nie byłoby widać ich ikon. Na czas zwiniecia
    // otwieramy wszystkie (nagłówki kategorii chowa CSS), a przy rozwijaniu
    // wracamy do stanu sprzed zwiniecia.
    function setCategoriesOpen(collapsed) {
      Array.prototype.forEach.call(sidebar.querySelectorAll('.nav-cat'), function (cat) {
        if (collapsed) {
          if (!cat.hasAttribute('data-was-open')) {
            cat.setAttribute('data-was-open', cat.open ? '1' : '0');
          }
          cat.open = true;
        } else if (cat.hasAttribute('data-was-open')) {
          // Zakładka rozwinięta w zwinietym menu ma zostać widoczna.
          cat.open = cat.getAttribute('data-was-open') === '1'
            || !!cat.querySelector('details.nav-group[open]');
          cat.removeAttribute('data-was-open');
        }
      });
    }

    function setCollapsed(collapsed) {
      sidebar.classList.toggle('nav-collapsed', collapsed);
      setCategoriesOpen(collapsed);
      button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
      button.querySelector('.sr-only').textContent = collapsed ? 'Rozwiń menu' : 'Zwiń menu';
      button.title = collapsed ? 'Rozwiń menu' : 'Zwiń menu';
      try { localStorage.setItem('panel-nav-collapsed', collapsed ? '1' : '0'); } catch (e) {}
    }

    setCollapsed(sidebar.classList.contains('nav-collapsed'));

    button.addEventListener('click', function () {
      setCollapsed(!sidebar.classList.contains('nav-collapsed'));
    });

    // W zwinietym menu widać same ikony, a moduły z podzakladkami stoją na
    // <summary>, który sam z siebie tylko rozwija listę. Kliknięcie ikony ma
    // otwierać zakładkę, więc przejmujemy je i idziemy pod `data-href`
    // (strona startowa modułu). Pozycje bez adresu - czysta grupa zakładek -
    // po staremu rozwijają menu.
    sidebar.addEventListener('click', function (e) {
      if (!sidebar.classList.contains('nav-collapsed')) return;
      var summary = e.target.closest('summary');
      if (!summary) return;
      var href = summary.getAttribute('data-href');
      if (href) {
        e.preventDefault();       // bez tego <details> jeszcze by się rozwinął
        window.location.assign(href);
        return;
      }
      setCollapsed(false);
    });
  })();

  // Wyszukiwarka panelu: podpowiedzi pod polem. Sam formularz działa bez
  // tego skryptu - zatwierdzenie prowadzi na stronę wyników. Skrypt tylko
  // skraca drogę: pokazuje kilka trafień od razu przy pisaniu.
  (function () {
    var form = document.querySelector('.panel-search');
    if (!form) return;
    var input = form.querySelector('input[name="q"]');
    var box = form.querySelector('#panel-search-results');
    var source = form.dataset.suggest;
    var timer = null;
    var links = [];
    var active = -1;

    function close() {
      box.classList.add('hidden');
      box.textContent = '';
      input.setAttribute('aria-expanded', 'false');
      links = [];
      active = -1;
    }

    function highlight(index) {
      active = index;
      links.forEach(function (link, i) {
        link.classList.toggle('bg-brand-600', i === index);
        link.classList.toggle('text-white', i === index);
        if (i === index) link.scrollIntoView({ block: 'nearest' });
      });
    }

    function row(result) {
      var link = document.createElement('a');
      link.href = result.url;
      link.className = 'block border-b border-slate-100 px-3 py-2 last:border-b-0 hover:bg-brand-600 hover:text-white dark:border-slate-800';
      link.setAttribute('role', 'option');

      var head = document.createElement('span');
      head.className = 'flex items-center justify-between gap-2';
      var title = document.createElement('span');
      title.className = 'truncate text-sm font-medium';
      title.textContent = result.title;
      head.appendChild(title);
      if (result.is_field) {
        var badge = document.createElement('span');
        badge.className = 'shrink-0 text-[10px] font-semibold uppercase tracking-wide opacity-60';
        badge.textContent = 'ustawienie';
        head.appendChild(badge);
      }
      link.appendChild(head);

      if (result.path) {
        var path = document.createElement('span');
        path.className = 'mt-0.5 block truncate text-xs opacity-70';
        path.textContent = result.path;
        link.appendChild(path);
      }
      return link;
    }

    function show(results) {
      box.textContent = '';
      if (!results.length) {
        var empty = document.createElement('p');
        empty.className = 'px-3 py-3 text-sm text-slate-500 dark:text-slate-400';
        empty.textContent = 'Nic nie pasuje do pytania.';
        box.appendChild(empty);
      } else {
        results.forEach(function (result) { box.appendChild(row(result)); });
      }
      links = Array.prototype.slice.call(box.querySelectorAll('a'));
      active = -1;
      box.classList.remove('hidden');
      input.setAttribute('aria-expanded', 'true');
    }

    function ask() {
      var query = input.value.trim();
      if (query.length < 2) { close(); return; }
      fetch(source + '?q=' + encodeURIComponent(query), { credentials: 'same-origin' })
        .then(function (response) { return response.ok ? response.json() : null; })
        .then(function (data) {
          if (!data || input.value.trim() !== data.query) return;
          show(data.results);
        })
        .catch(function () { close(); });
    }

    input.addEventListener('input', function () {
      window.clearTimeout(timer);
      timer = window.setTimeout(ask, 180);
    });

    input.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') { close(); return; }
      if (!links.length) return;
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        highlight((active + 1) % links.length);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        highlight((active <= 0 ? links.length : active) - 1);
      } else if (e.key === 'Enter' && active >= 0) {
        e.preventDefault();
        window.location.href = links[active].href;
      }
    });

    document.addEventListener('click', function (e) {
      if (!form.contains(e.target)) close();
    });

    // Ctrl+K (Cmd+K) stawia kursor w wyszukiwarce z dowolnej strony panelu.
    document.addEventListener('keydown', function (e) {
      if ((e.ctrlKey || e.metaKey) && (e.key === 'k' || e.key === 'K')) {
        e.preventDefault();
        input.focus();
        input.select();
      }
    });
  })();

  // Wynik wyszukiwarki prowadzi do konkretnego pola (adres z #id_<pole>).
  // Przeglądarka sama do niego przewinie, a my zaznaczamy je ramka - inaczej
  // w długiej zakładce nie wiadomo, które ustawienie było szukane.
  (function () {
    var hash = window.location.hash;
    if (hash.indexOf('#id_') !== 0) return;
    var field = document.getElementById(hash.slice(1));
    if (!field) return;
    var card = field.closest('[data-field]') || field;
    card.classList.add('panel-field-target');
    card.scrollIntoView({ block: 'center' });
    if (typeof field.focus === 'function') field.focus({ preventScroll: true });
    window.setTimeout(function () { card.classList.remove('panel-field-target'); }, 4000);
  })();

  // Potwierdzenia, probnik koloru i zaznaczanie tresci pola. Wczesniej
  // siedzialy w atrybutach `onsubmit`/`onclick`/`oninput` przy samych
  // elementach - i nie dzialaly wcale: CSP serwisu ma `script-src` bez
  // 'unsafe-inline', wiec przegladarka blokuje inline'owe handlery
  // (patrz dlislight/settings.py, sekcja CSP). Skrypt z nonce moze
  // wszystko, wiec obsluge trzymamy tutaj, a szablony niosa juz tylko
  // atrybuty `data-*`.
  (function () {
    // `data-confirm` na formularzu pyta przy wysylce, a na przycisku -
    // przy kliknieciu (formularz moze miec kilka przyciskow, a pyta
    // tylko ten jeden).
    document.addEventListener('submit', function (e) {
      var form = e.target.closest('form[data-confirm]');
      if (form && !window.confirm(form.getAttribute('data-confirm'))) {
        e.preventDefault();
      }
    });

    document.addEventListener('click', function (e) {
      var button = e.target.closest('[data-confirm]');
      if (!button || button.tagName === 'FORM') return;
      if (!window.confirm(button.getAttribute('data-confirm'))) {
        e.preventDefault();
      }
    });

    // Pole koloru: kwadrat z systemowym probnikiem obok pola z wartoscia
    // HEX. Przepisujemy w obie strony - probnik do tekstu i tekst do
    // probnika - zeby jedno zawsze pokazywalo to samo co drugie.
    function swatchFor(field) {
      return document.querySelector('input[type="color"][data-color-for="' + field.id + '"]');
    }

    document.addEventListener('input', function (e) {
      var el = e.target;
      var id = el.getAttribute && el.getAttribute('data-color-for');
      if (id) {
        var field = document.getElementById(id);
        if (field) field.value = el.value;
        return;
      }
      // Wartosc wpisana z reki: probnik przyjmuje wylacznie pelny #rrggbb,
      // wiec w trakcie pisania po prostu go nie ruszamy.
      if (el.tagName === 'INPUT' && /^#[0-9a-fA-F]{6}$/.test(el.value)) {
        var swatch = swatchFor(el);
        if (swatch) swatch.value = el.value;
      }
    });

    // Pole z gotowym adresem do skopiowania - klikniecie zaznacza calosc.
    document.addEventListener('click', function (e) {
      var el = e.target.closest('[data-select-on-click]');
      if (el && typeof el.select === 'function') el.select();
    });

    // Licznik znakow pod polami SEO - limit siedzi w atrybucie data-counter.
    // Stoi w powloce, bo pola SEO wyglada tak samo w kazdej zakladce, za
    // ktora stoi strona czesci publicznej (panel/tabs.py, seo_widgets).
    document.querySelectorAll('[data-counter]').forEach(function (input) {
      var limit = parseInt(input.dataset.counter, 10);
      var note = document.createElement('p');
      note.className = 'help mt-1';
      // Pole stoi w <div class="mt-1"> wewnatrz kontenera pola - licznik
      // doklejamy na koncu kontenera, czyli pod tekstem pomocy.
      input.parentElement.parentElement.appendChild(note);

      function render() {
        note.textContent = input.value.length + ' / ' + limit + ' znakow';
        note.classList.toggle('text-amber-600', input.value.length > limit);
      }

      input.addEventListener('input', render);
      render();
    });
  })();

  // Akcje zbiorcze na listach. Formularz listy niesie `data-bulk`, pola
  // wierszy `data-bulk-check` (partial panel/partials/check.html), pole
  // naglowka `data-bulk-all`, przyciski `data-bulk-action`, a licznik
  // `data-bulk-count`. Bez JavaScriptu zostaje zaznaczanie wiersz po
  // wierszu i te same przyciski - skrypt tylko ulatwia, nie warunkuje.
  (function () {
    document.querySelectorAll('form[data-bulk]').forEach(function (form) {
      var all = form.querySelector('[data-bulk-all]');
      var count = form.querySelector('[data-bulk-count]');
      var buttons = form.querySelectorAll('[data-bulk-action]');

      function boxes() {
        return Array.prototype.slice.call(form.querySelectorAll('[data-bulk-check]'));
      }

      function render() {
        var list = boxes();
        var picked = list.filter(function (box) { return box.checked; }).length;

        if (count) {
          count.textContent = picked
            ? 'Zaznaczono: ' + picked + '. Wybierz akcję poniżej.'
            : 'Zaznacz wiersze, żeby wykonać akcje na kilku naraz.';
        }
        buttons.forEach(function (button) { button.disabled = !picked; });
        if (all) {
          all.checked = picked > 0 && picked === list.length;
          all.indeterminate = picked > 0 && picked < list.length;
        }
      }

      form.addEventListener('change', function (e) {
        var target = e.target;
        if (!target || !target.hasAttribute) return;
        if (target === all) {
          boxes().forEach(function (box) { box.checked = all.checked; });
        } else if (!target.hasAttribute('data-bulk-check')) {
          return;
        }
        render();
      });

      render();
    });
  })();

  // Straznik niezapisanych zmian. Zakladka ustawien albo formularz strony
  // to kilkadziesiat pol - wyjscie z nich kliknieciem w menu kasowalo cala
  // prace bez slowa. Pilnujemy formularzy, w ktorych jest co wpisac:
  // formularz zaznaczenia (same checkboxy) i przyciski akcji zostaja wolne,
  // a `data-no-guard` zdejmuje straznika tam, gdzie przeszkadza.
  (function () {
    var WRITABLE = [
      'textarea', 'select',
      'input[type="text"]', 'input[type="email"]', 'input[type="url"]',
      'input[type="number"]', 'input[type="tel"]', 'input[type="search"]',
      'input[type="date"]', 'input[type="datetime-local"]', 'input[type="time"]',
      'input[type="password"]', 'input[type="file"]', 'input[type="color"]',
      'input:not([type])'
    ].join(',');

    // Zaznaczenie wiersza to nie zmiana tresci - odhaczenie pliku
    // w bibliotece mediow nie moze sprawiac, ze wyjscie z listy pyta
    // o niezapisane zmiany. Pola wyboru wiersza poznajemy po nazwie
    // (`selected` - tak samo widzi je core/listing.py) i po znaczniku
    // pola "zaznacz wszystkie".
    var SELECTION = 'input[name="selected"], [data-bulk-all]';

    var dirty = false;

    function mark(e) {
      if (dirty) return;
      if (e && e.target && e.target.closest && e.target.closest(SELECTION)) return;
      dirty = true;
      document.querySelectorAll('[data-dirty-note]').forEach(function (note) {
        note.hidden = false;
      });
    }

    document.querySelectorAll('form[method="post"]:not([data-no-guard])').forEach(function (form) {
      if (!form.querySelector(WRITABLE)) return;
      form.addEventListener('input', mark);
      form.addEventListener('change', mark);
      form.addEventListener('submit', function () { dirty = false; });
    });

    window.addEventListener('beforeunload', function (e) {
      if (!dirty) return;
      // Tresci pytania nie ustawia juz zadna przegladarka - liczy sie samo
      // zatrzymanie wyjscia. Pole `returnValue` zostaje dla starszych.
      e.preventDefault();
      e.returnValue = '';
    });
  })();

</script>
{% endblock %}