{% 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>
    <span id="mobile-title"></span>
  </div>
  <div id="sidebar-overlay" onclick="closeMobileNav()"></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);
  });
})();
</script>
{% endblock %}