{% macro svg_icon(name, active=False) -%}
{% set _n = name if name else 'default' %}
<svg class="nav-icon" fill="currentColor" data-icon="{{ _n }}">
  <use href="#icon-{{ _n if active else _n + '-outline' }}"></use>
</svg>
{%- endmacro %}

<aside id="sidebar" data-debug-label="sidebar">
<div class="sb-scroll">

  <!-- Logo — anpassen in app/config.py via app_name / app_logo_svg -->
  <div class="sb-logo" data-debug-label="sb-logo">
    <span class="sb-logo-text">{{ app_name }}</span>
  </div>

  <!-- Navigation -->
  <hr class="sb-divider">
  <nav class="nav-items" data-debug-label="nav-items">
    {% for item in nav_items %}
      {% if item.separator %}
        <div class="nav-separator {{ 'nav-separator-first' if loop.first else '' }}">
          {% if item.group %}<span class="nav-group-label">{{ item.group }}</span>{% endif %}
        </div>
      {% else %}
      <button
        type="button"
        hx-get="/ui/{{ item.key }}/content"
        hx-target="#main-content"
        hx-swap="innerHTML"
        hx-push-url="{{ item.url }}"
        id="nav-{{ item.key }}"
        class="nav-item {% if item.default %}active{% endif %}"
        data-debug-label="nav-item"
      >
        {{ svg_icon(item.key, active=item.default) }}
        <span>{{ item.label }}</span>
      </button>
      {% endif %}
    {% endfor %}
  </nav>

  <!-- Footer -->
  <div class="sb-footer" data-debug-label="sb-footer">
    <button class="btn-theme" id="btn-theme-toggle" style="margin-left:auto; display:flex;" onclick="toggleDarkMode()" title="Erscheinungsbild">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use id="theme-toggle-icon" href="#icon-moon"></use></svg>
    </button>
    <hr class="sb-divider">
    <div class="sb-footer-bottom">
      <div class="sb-versions">
        <span class="sb-version">{{ app_name }} {{ app_version }}</span>
        <span class="sb-version">Core {{ core_version }}</span>
      </div>
    </div>
  </div>

</div>{# /sb-scroll #}
</aside>

<script>
  // Handle active navigation item
  document.addEventListener('DOMContentLoaded', function () {
    const sidebar = document.getElementById('sidebar');
    if (!sidebar) return;

    sidebar.addEventListener('click', function (e) {
      const navItem = e.target.closest('.nav-item');
      if (!navItem) return;
      sidebar.querySelectorAll('.nav-item.active').forEach(item => {
        item.classList.remove('active');
        const svg = item.querySelector('.nav-icon');
        const use = svg && svg.querySelector('use');
        if (use && svg.dataset.icon) use.setAttribute('href', '#icon-' + svg.dataset.icon + '-outline');
      });
      navItem.classList.add('active');
      const mobileTitle = document.getElementById('mobile-title');
      if (mobileTitle) mobileTitle.textContent = navItem.querySelector('span')?.textContent?.trim() || '';
      const svg = navItem.querySelector('.nav-icon');
      const use = svg && svg.querySelector('use');
      if (use && svg.dataset.icon) use.setAttribute('href', '#icon-' + svg.dataset.icon);
    });
  });

function _updateThemeIcon() {
  var use = document.getElementById('theme-toggle-icon');
  if (use) use.setAttribute('href', document.documentElement.classList.contains('light-mode') ? '#icon-sun' : '#icon-moon');
}
window.toggleDarkMode = function() {
  document.documentElement.classList.toggle('light-mode');
  localStorage.setItem('lightMode', document.documentElement.classList.contains('light-mode') ? '1' : '0');
  _updateThemeIcon();
};
_updateThemeIcon();
</script>