{# ==========================================================================
   Grundgeruest aller angemeldeten Seiten.
   Bloecke: extra_head, page_title, page_sub, breadcrumb, topbar_extra,
            content, dialogs, scripts
   ========================================================================== #}
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="robots" content="noindex, nofollow">
  <title>{% block title %}{{ self.page_title() }} &middot; {{ app_name }}{% endblock %}</title>
  <link rel="icon" href="{{ asset_url('img/favicon.svg') }}" type="image/svg+xml">
  <link rel="stylesheet" href="{{ asset_url('css/base.css') }}">
  <link rel="stylesheet" href="{{ asset_url('css/components.css') }}">
  {% block extra_head %}{% endblock %}
</head>
<body data-csrf="{{ csrf_token() }}" data-sidebar="full">

<div class="app-shell">
  <div class="sidebar__scrim" aria-hidden="true"></div>

  <aside class="sidebar" aria-label="Hauptnavigation">
    <div class="sidebar__brand">
      {# Die Wortmarke traegt den Namen selbst -- ein zweiter Textblock daneben
         waere eine Doppelung. Eine einzige Zeichnung, deren Farben aus den
         Themen-Token kommen: zwei per Media Query versteckte SVG waeren bei
         "System" und beim Umschalten von Hand falsch. #}
      <span class="sidebar__logo" role="img" aria-label="{{ app_name }}">
        <svg viewBox="0 0 312 112" xmlns="http://www.w3.org/2000/svg">
          <circle cx="298" cy="66" r="14" fill="var(--logo-mark)" opacity="0.2"/>
          <polyline points="0,66 90,66 100,66 108,18 116,114 124,66 134,66 200,66 210,66
                            218,32 226,100 234,66 244,66 300,66"
                    fill="none" stroke="var(--logo-mark)" stroke-width="3.2"
                    stroke-linecap="round" stroke-linejoin="round" opacity="0.88"/>
          <text x="10" y="94" font-family="var(--font-mono)" font-weight="800"
                font-size="82" letter-spacing="2" fill="var(--logo-text)">TESM</text>
          <circle cx="298" cy="66" r="8" fill="var(--logo-mark)"/>
        </svg>
        <span class="sidebar__edition">{{ app_edition }}</span>
      </span>
    </div>

    <nav class="sidebar__nav">
      {% for item in nav_items %}
        {% if item.children %}
          <details class="nav-tree" data-persist="nav-{{ item.key }}"
                   {% if item.children | selectattr('endpoint', 'equalto', request.endpoint) | list %}open{% endif %}>
            <summary>
              {{ icon(item.icon, size=18, extra_class='nav-item__icon') }}
              <span class="nav-item__label">{{ item.label }}</span>
              {{ icon('chevron-right', size=15, extra_class='nav-tree__chevron') }}
            </summary>
            <div class="nav-tree__children">
              {% for child in item.children %}
                <a class="nav-item" href="{{ url_for(child.endpoint) }}"
                   {% if child.endpoint == request.endpoint %}aria-current="page"{% endif %}>
                  {{ icon(child.icon, size=17, extra_class='nav-item__icon') }}
                  <span class="nav-item__label">{{ child.label }}</span>
                  {% if child.badge %}<span class="nav-item__badge">{{ child.badge }}</span>{% endif %}
                </a>
              {% endfor %}
            </div>
          </details>
        {% else %}
          <a class="nav-item" href="{{ url_for(item.endpoint) }}"
             {% if item.endpoint == request.endpoint %}aria-current="page"{% endif %}
             title="{{ item.hint or item.label }}">
            {{ icon(item.icon, size=18, extra_class='nav-item__icon') }}
            <span class="nav-item__label">{{ item.label }}</span>
            {% if item.badge %}<span class="nav-item__badge">{{ item.badge }}</span>{% endif %}
          </a>
        {% endif %}
      {% endfor %}
    </nav>

    <div class="sidebar__footer">
      {% if current_user.is_authenticated %}
        <a class="user-chip" href="{{ url_for('account.overview') }}">
          {% if current_user.avatar_filename %}
            <img class="avatar" src="{{ url_for('account.avatar', filename=current_user.avatar_filename) }}" alt="">
          {% else %}
            <span class="avatar" aria-hidden="true">{{ current_user.initials }}</span>
          {% endif %}
          <span class="user-chip__meta">
            <span class="user-chip__name">{{ current_user.display_name }}</span>
            <span class="user-chip__role">{{ current_user.role_label }}</span>
          </span>
        </a>
        <div class="row row--tight mt-2">
          <div class="btn-group" data-behavior="theme-toggle" role="group" aria-label="Farbschema">
            <button type="button" class="btn btn--sm btn--ghost" data-theme-option="system"
                    title="Systemeinstellung folgen" aria-pressed="true">{{ icon('monitor', size=14) }}</button>
            <button type="button" class="btn btn--sm btn--ghost" data-theme-option="light"
                    title="Helles Design" aria-pressed="false">{{ icon('sun', size=14) }}</button>
            <button type="button" class="btn btn--sm btn--ghost" data-theme-option="dark"
                    title="Dunkles Design" aria-pressed="false">{{ icon('moon', size=14) }}</button>
          </div>
          <span class="flex-1"></span>
          <form method="post" action="{{ url_for('auth.logout') }}" data-no-guard>
            <input type="hidden" name="{{ csrf_field_name }}" value="{{ csrf_token() }}">
            <button class="btn btn--sm btn--ghost" type="submit" title="Abmelden">
              {{ icon('log-out', size=15) }}<span class="sidebar__actions-label">Abmelden</span>
            </button>
          </form>
        </div>
      {% else %}
        <a class="btn btn--primary btn--block" href="{{ url_for('auth.login') }}">Anmelden</a>
      {% endif %}
    </div>
  </aside>

  <div class="main">
    <header class="topbar">
      <button class="btn btn--icon btn--ghost" type="button" data-behavior="sidebar-toggle"
              aria-label="Navigation ein-/ausklappen">{{ icon('menu', size=18) }}</button>

      <div class="topbar__heading">
        {% block breadcrumb %}{% endblock %}
        <div class="topbar__title">{% block page_title %}{{ app_name }}{% endblock %}</div>
        {% set sub %}{% block page_sub %}{% endblock %}{% endset %}
        {% if sub | trim %}<div class="topbar__sub">{{ sub }}</div>{% endif %}
      </div>

      <div class="topbar__right">
        {% block topbar_extra %}{% endblock %}
        {% for pill in status_pills %}
          <span class="status-pill {{ pill.css_class }}" {% if pill.title %}title="{{ pill.title }}"{% endif %}>
            {% if pill.dot %}<span class="status-pill__dot {{ pill.dot_class }}"></span>{% endif %}
            {{ pill.label }}
          </span>
        {% endfor %}
        <button class="btn btn--icon btn--ghost hide-sm" type="button" data-behavior="open-palette"
                aria-label="Schnellsuche (Strg+K)" title="Schnellsuche (Strg+K)">{{ icon('search', size=17) }}</button>
      </div>
    </header>

    <main class="content" id="main-content">
      {% block content %}{% endblock %}
    </main>

    <footer class="page-footer">
      <span>{{ app_name }} {{ app_version }} &middot; &copy; {{ current_year }} WiS GmbH</span>
      <span class="row row--tight">
        {% if migration_warning %}
          <a class="danger-text" href="{{ url_for('diagnostics.overview') }}">Schemawarnung</a>
        {% endif %}
        <span class="faint">Angemeldet als {{ current_user.username or 'Gast' }}</span>
      </span>
    </footer>
  </div>
</div>

{# -- Flash-Meldungen: als JSON, von app.js in Toasts verwandelt ----------- #}
{% with messages = get_flashed_messages(with_categories=true) %}
  <script type="application/json" id="flashed-messages">{{ messages | tojson }}</script>
{% endwith %}

{# -- Befehlspalette ------------------------------------------------------- #}
<dialog class="palette" id="command-palette" aria-label="Schnellsuche">
  <input class="palette__input" type="search" placeholder="Seite oder Aktion suchen ..."
         aria-label="Suchbegriff" autocomplete="off">
  <div class="palette__list"></div>
  <div class="palette__hint">
    <span><kbd>&uarr;</kbd><kbd>&darr;</kbd> waehlen</span>
    <span><kbd>Enter</kbd> oeffnen</span>
    <span><kbd>Esc</kbd> schliessen</span>
  </div>
</dialog>
<script type="application/json" id="palette-data">{{ palette_entries | tojson }}</script>

{# -- Bestaetigungsdialog (ersetzt window.confirm) ------------------------- #}
<dialog class="modal modal--narrow" id="confirm-dialog" aria-labelledby="confirm-title">
  <div class="modal__header">
    <div class="modal__title" id="confirm-title" data-confirm-title>Bitte bestaetigen</div>
  </div>
  <div class="modal__body"><p data-confirm-text></p></div>
  <div class="modal__footer">
    <button class="btn" type="button" data-dialog-close>Abbrechen</button>
    <button class="btn btn--danger" type="button" data-confirm-ok>Fortfahren</button>
  </div>
</dialog>

{% block dialogs %}{% endblock %}

<script type="module" src="{{ asset_url('js/app.js') }}" nonce="{{ csp_nonce }}"></script>
{% block scripts %}{% endblock %}
</body>
</html>
