{% extends "_base.html" %}

{% block content %}
<div class="app-layout">
  <div id="mobile-header">
    <button id="mobile-menu-btn" onclick="toggleMobileNav()" aria-label="Menü öffnen">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-hamburger"></use></svg>
    </button>
    <div id="mobile-title-group">
      <span id="mobile-app-name">{{ app_name }}</span>
      <span id="mobile-title">{{ title | default('') }}</span>
    </div>
    {# nur sichtbar, wenn die aktuelle Seite Filter mitbringt (per :has()
       CSS-Regel an mobile-filter-panel gebunden, siehe app.css) #}
    <button id="mobile-filter-btn" onclick="toggleFilterPanel()" aria-label="Filter öffnen">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-list"></use></svg>
    </button>
  </div>
  <div id="sidebar-overlay" onclick="closeMobileNav()"></div>
  <div id="mobile-filter-overlay" onclick="closeFilterPanel()"></div>

  <aside id="sidebar" data-debug-label="sidebar">
    {% include "navigation/index.html" %}
  </aside>

  <div class="main-content" id="main-content">
    {{ initial_content | safe }}
  </div>
</div>
{% endblock %}

{# Alles ab hier MUSS in einem Block stehen: index.html erbt von _base.html,
   und Jinja verwirft im Kind-Template jeden Inhalt ausserhalb von Bloecken.
   Der Script-Block stand frueher darunter und wurde nie ausgeliefert -- damit
   fehlten openLogModal und das Run-Polling auf jeder Seite. #}
{% block extra_js %}
<script>
/* ── Log-Modal ────────────────────────────────────────────────────────────────
   Oeffnet das Live-Log fuer /api/{module}/{item}/logs?live=1. Ausgeloest per
   HX-Trigger "openLogModal" aus den Run-Routen oder direkt ueber
   window.openLogModal(modul, item).

   Kein Status-Polling hier: das bringt list_wrapper_inner.html selbst mit
   (Poll-Div mit hx-trigger="every 2s"), und partials/oob/status_oob.html
   haelt ihn per hx-swap-oob am Leben bzw. schaltet ihn ab, sobald nichts mehr
   laeuft. Eine zweite Schleife in JavaScript wuerde dieselben OOB-Fragmente
   per innerHTML in den Container schreiben und das Listenlayout zerlegen.
─────────────────────────────────────────────────────────────────────────────*/
(function() {

  function _modalError(msg) {
    console.error('[log-modal] ' + msg);
    var old = document.getElementById('log-modal');
    if (old) old.remove();
    document.body.insertAdjacentHTML('beforeend',
      '<div id="log-modal" class="ds-modal-backdrop" onclick="this.remove()">' +
      '<div class="ds-modal" onclick="event.stopPropagation()" style="max-width:520px;padding:20px 24px;">' +
      '<div class="ds-modal-header"><span class="ds-modal-title">Log nicht verfügbar</span></div>' +
      '<div style="color:var(--text-2);font-size:13px;padding:12px 0;">' + msg + '</div>' +
      '</div></div>');
  }

  /* Oeffnet das Log-Modal. Global, damit es auch direkt aus gerendertem
     Inhalt heraus aufgerufen werden kann und nicht nur ueber ein Event, das
     von einem moeglicherweise weggetauschten Element hochblubbern muss. */
  window.openLogModal = function(mod, itemId) {
    if (!mod || !itemId) return _modalError('Modul oder Item fehlt.');
    var url = '/api/' + mod + '/' + itemId + '/logs?live=1';
    fetch(url)
      .then(function(r) {
        // Ohne diese Pruefung verschluckt der Handler jeden 404/500 stumm –
        // die Oberflaeche sieht dann aus, als haette der Klick nichts bewirkt.
        if (!r.ok) throw new Error('HTTP ' + r.status + ' bei ' + url);
        return r.text();
      })
      .then(function(html) {
        var old = document.getElementById('log-modal');
        if (old) old.remove();
        document.body.insertAdjacentHTML('beforeend', html);
        htmx.process(document.getElementById('log-modal'));
      })
      .catch(function(err) { _modalError(err.message); });
  };

  document.body.addEventListener('openLogModal', function(e) {
    var d = e.detail || {};
    window.openLogModal(d.module, d.itemId);
  });

  /* Startet das Status-Polling, nachdem ein Job angestossen wurde.
     Der Poll-Div steht bereits im DOM (list_wrapper_inner.html rendert ihn
     immer), hat aber keine hx-Attribute solange nichts laeuft. Er kann nicht
     per hx-swap-oob nachgeliefert werden: die Antwort der Run-Route ist eine
     <tr>, und fremde Elemente wirft der HTML-Parser dort heraus.
     Abgeschaltet wird er wieder von status_oob.html, sobald nichts laeuft. */
  document.body.addEventListener('jobStarted', function(e) {
    var mod = (e.detail || {}).module;
    if (!mod) return;
    var div = document.getElementById('poll-' + mod);
    if (!div || div.getAttribute('hx-trigger')) return;   // laeuft schon
    div.setAttribute('hx-get', '/ui/' + mod + '/status');
    div.setAttribute('hx-trigger', 'every 2s');
    div.setAttribute('hx-swap', 'none');
    htmx.process(div);
  });
})();
</script>
{% endblock %}