<header class="cab-topbar">

  {# ── Nav dropdowns: динамически из cabinet_nav, сгруппировано по nav_group ── #}
  {# cabinet_nav отсортирован по (nav_group, order) в context_processors.py    #}
  {% regroup cabinet_nav by nav_group as nav_groups %}
  {% for group in nav_groups %}
    <div class="dropdown">
      <button class="btn btn-sm d-flex align-items-center gap-2 dropdown-toggle"
              type="button" data-bs-toggle="dropdown"
              style="color: var(--cab-text); font-size: 0.875rem; font-weight: 500;">
        {% if group.grouper == 'admin' %}
          <span class="bi bi-grid-3x3-gap fs-6"></span>
          Администрирование
        {% else %}
          <span class="bi bi-plug fs-6"></span>
          Сервисы
        {% endif %}
      </button>
      <ul class="dropdown-menu shadow" style="min-width:210px;">
        <li>
          <h6 class="dropdown-header" style="font-size:.7rem;letter-spacing:.06em;">
            {% if group.grouper == 'admin' %}РАЗДЕЛЫ{% else %}СЕРВИСЫ{% endif %}
          </h6>
        </li>
        {% for section in group.list %}
          <li>
            <a class="dropdown-item d-flex align-items-center gap-2 py-2"
               href="{{ section.url }}">
              <span class="bi {{ section.icon }}" style="color:var(--cab-primary);width:16px;"></span>
              {{ section.label }}
              {% if request.path == section.url %}
                <span class="ms-auto bi bi-check2" style="color:var(--cab-primary);"></span>
              {% endif %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endfor %}

  {# ── Separator ── #}
  {% if cabinet_nav %}
    <div style="width:1px;height:18px;background:var(--cab-border,#e2e8f0);margin:0 6px;flex-shrink:0;"></div>
  {% endif %}

  {# ── Shortcuts: из cabinet_topbar_actions ── #}
  {% if cabinet_topbar_actions %}
    <nav class="d-flex align-items-center gap-1">
      {% for action in cabinet_topbar_actions %}
        <a href="{{ action.url }}"
           class="btn btn-sm d-flex align-items-center gap-1"
           style="color: var(--cab-text-muted); font-size: 0.875rem;">
          {% if action.icon %}<span class="bi {{ action.icon }}"></span>{% endif %}
          {{ action.label }}
        </a>
      {% endfor %}
    </nav>
  {% endif %}

  <div class="flex-grow-1"></div>

  {# ── Right: bell + avatar ── #}
  <div class="d-flex align-items-center gap-2">

    <div class="dropdown">
      <button class="btn btn-sm position-relative" style="color: var(--cab-text-muted);"
              type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside">
        <span class="bi bi-bell fs-5"></span>
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
              style="font-size:.6rem;">3</span>
      </button>
      <div class="dropdown-menu dropdown-menu-end shadow p-0" style="width:360px;border-radius:12px;overflow:hidden;">

        <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom" style="background:#f8fafc;">
          <span class="fw-semibold" style="font-size:.875rem;color:#374151;">Уведомления</span>
          <button class="btn btn-link btn-sm p-0 text-muted" style="font-size:.75rem;">Всё прочитано</button>
        </div>

        {# TODO: render from notification registry #}
        <div class="text-center py-4 text-muted" style="font-size:.82rem;">
          <span class="bi bi-bell-slash d-block mb-1" style="font-size:1.5rem;opacity:.3;"></span>
          Уведомлений нет
        </div>

        <div class="text-center py-2 border-top">
          <span class="text-muted" style="font-size:.78rem;">Нет новых уведомлений</span>
        </div>

      </div>
    </div>

    <div class="dropdown">
      <button class="btn btn-sm d-flex align-items-center gap-2 dropdown-toggle"
              type="button" data-bs-toggle="dropdown"
              style="color: var(--cab-text); font-size: 0.875rem;">
        <span class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
              style="width:32px;height:32px;background:var(--cab-primary);font-size:.75rem;flex-shrink:0;">
          {{ request.user.first_name|first|upper }}{{ request.user.last_name|first|upper }}
        </span>
        <span>{{ request.user.get_full_name|default:request.user.username }}</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow-sm">
        <li><a class="dropdown-item" href="#"><span class="bi bi-person me-2"></span>Профиль</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item text-danger" href="{% url 'account_logout' %}"><span class="bi bi-box-arrow-right me-2"></span>Выход</a></li>
      </ul>
    </div>

  </div>

</header>
