{% 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 %}

<!-- App-Name -->
  <div class="sb-header">
    <span class="sb-header-text">{{ app_name }}</span>
  </div>

  <!-- Navigation -->
  <hr class="sb-divider">
  <nav class="nav-items">
    {% set ns = namespace(first_sep=true) %}
    {% for item in nav_items %}
      {% if item.separator %}
        {% if not ns.first_sep %}<hr class="nav-divider">{% endif %}
        {% set ns.first_sep = false %}
      {% 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 %}"
      >
        {{ svg_icon(item.key, active=item.default) }}
        <span>{{ item.label }}</span>
      </button>
      {% endif %}
    {% endfor %}
  </nav>

  <!-- Aktionen -->
  <div class="sb-actions">
    {% if current_user %}
    <span class="sb-user-name" title="{{ current_user.username }}">{{ current_user.display_name or current_user.username }}</span>
    {% endif %}
    {% if auth_enabled %}
    <form method="post" action="/auth/logout" style="display:contents;">
      <button type="submit" class="btn-theme" title="Abmelden">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-logout"></use></svg>
      </button>
    </form>
    {% endif %}
    <button class="btn-theme" id="btn-theme-toggle" 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>
  </div>

  <!-- Versionsinfo -->
  <hr class="sb-divider">
  <div class="sb-footer">
    <div class="sb-versions">
      <span class="sb-version">{{ app_name }} {{ app_version }}</span>
      <span class="sb-version">Core {{ core_version }}</span>
    </div>
  </div>