<aside id="app-shell-sidebar" class="app-shell-sidebar" aria-label="Navegación principal" data-app-shell-sidebar>
  <div class="app-shell-sidebar__surface">
    <div class="app-shell-sidebar__header">
      <div class="app-shell-sidebar__brand">
        <span class="app-shell-sidebar__eyebrow">Centro operativo</span>
        <strong class="app-shell-sidebar__title">EpicrisisIA</strong>
        <span class="app-shell-sidebar__summary">Opera casos, epicrisis y soporte clínico sin salir del flujo.</span>
      </div>
    </div>

    <nav class="app-shell-sidebar__sections" aria-label="Navegación operativa">
      {% for section in shell_sidebar_sections %}
        <section class="app-shell-sidebar__section" aria-label="{{ section.label }}">
          <p class="app-shell-sidebar__section-title">{{ section.label }}</p>
          <div class="app-shell-sidebar__nav">
            {% for item in section.nav_items %}
              {% set tooltip = item.label %}
              {% if item.action == "open-upload" %}
                <button
                  type="button"
                  class="app-shell-sidebar__link{% if item.is_active %} is-active{% endif %}{% if item.featured %} is-featured{% endif %}"
                  data-case-upload-open="{{ item.upload_mode }}"
                  data-app-shell-nav-item
                  data-sidebar-tooltip="{{ tooltip }}"
                  title="{{ tooltip }}"
                >
                  <span class="app-shell-sidebar__icon" aria-hidden="true">
                    <img src="/static/icons/{{ item.icon }}.svg" alt="" />
                  </span>
                  <span class="app-shell-sidebar__label">{{ item.label }}</span>
                </button>
              {% else %}
                <a
                  href="{{ item.href }}"
                  class="app-shell-sidebar__link{% if item.is_active %} is-active{% endif %}{% if item.featured %} is-featured{% endif %}"
                  data-app-shell-nav-item
                  data-sidebar-tooltip="{{ tooltip }}"
                  title="{{ tooltip }}"
                  {% if item.is_active %}aria-current="page"{% endif %}
                >
                  <span class="app-shell-sidebar__icon" aria-hidden="true">
                    <img src="/static/icons/{{ item.icon }}.svg" alt="" />
                  </span>
                  <span class="app-shell-sidebar__label">{{ item.label }}</span>
                </a>
              {% endif %}
            {% endfor %}
          </div>
        </section>
      {% endfor %}
    </nav>
  </div>
</aside>
