{% load i18n cabinet_tags %}
<header class="cab-topbar">
  <button class="btn btn-sm d-lg-none d-flex align-items-center justify-content-center"
          type="button"
          @click="sidebarMobileOpen = true"
          aria-label="{% trans 'Open navigation' %}">
    <span class="bi bi-list fs-5"></span>
  </button>

  <div class="me-auto">
    <h6 class="mb-0 fw-semibold" style="color: var(--cab-text);">
      {% block page_title %}{% firstof cabinet_client_title client_page_title %}{% if not cabinet_client_title and not client_page_title %}{% trans "My Account" %}{% endif %}{% endblock %}
    </h6>
    {% if cabinet_tabs %}
    <nav class="d-flex gap-2 mt-2" aria-label="{% trans 'Client navigation' %}">
      {% for tab in cabinet_tabs %}
      <a class="btn btn-sm {% if tab.active %}btn-secondary{% else %}btn-outline-secondary{% endif %}"
         href="{{ tab.url|default:'#' }}">
        {% if tab.icon %}<span class="bi {{ tab.icon }} me-1"></span>{% endif %}{{ tab.label }}
      </a>
      {% endfor %}
    </nav>
    {% endif %}
  </div>

  <div class="d-flex align-items-center gap-2">
    {% if cabinet_site_url %}
      <a class="btn btn-sm d-flex align-items-center gap-1"
         href="{{ cabinet_site_url }}"
         style="color: var(--cab-text-muted); font-size: 0.875rem;">
        <span class="bi bi-globe2"></span>
        {% trans "Site" %}
      </a>
    {% endif %}

    <div class="dropdown">
      {% with notification_total=notification_items|length %}
      <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>
        {% if notification_items %}
          <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size:.6rem;">{{ notification_total }}</span>
        {% endif %}
      </button>
      <div class="dropdown-menu dropdown-menu-end shadow p-0 cab-notification-menu">
        <div class="d-flex align-items-center justify-content-between px-3 py-2 border-bottom cab-notification-menu__header">
          <span class="fw-semibold cab-notification-menu__title">{% trans "Notifications" %}</span>
        </div>
        {% if notification_items %}
          {% for item in notification_items %}
          <a href="{{ item.url }}" class="d-flex align-items-center gap-3 px-3 py-2 border-bottom text-decoration-none cab-notification-menu__item">
            <span class="bi {{ item.icon }} fs-5" style="color:var(--cab-primary,#6366f1);flex-shrink:0;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.85rem;font-weight:600;">{{ item.label }}</div>
            </div>
            <span class="badge rounded-pill" style="background:var(--cab-primary,#6366f1);color:#fff;font-size:.72rem;">{{ item.count }}</span>
          </a>
          {% endfor %}
        {% else %}
          <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>
            {% trans "No notifications" %}
          </div>
        {% endif %}
      </div>
      {% endwith %}
    </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: 0.75rem; flex-shrink: 0;">
          {{ request.user|cab_initials }}
        </span>
        <span>{{ request.user.get_full_name|default:request.user.username }}</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow-sm">
        {% if cabinet_client_dropdown_items %}
          {% for item in cabinet_client_dropdown_items %}
          <li>
            <a class="dropdown-item" href="{{ item.url|default:'#' }}">
              {% if item.icon %}<span class="bi {{ item.icon }} me-2"></span>{% endif %}{{ item.label }}
            </a>
          </li>
          {% endfor %}
        {% endif %}
        {% if cabinet_staff_switch_url %}
        <li>
          <a class="dropdown-item" href="{{ cabinet_staff_switch_url }}">
            <span class="bi bi-speedometer2 me-2"></span>{% trans "Staff area" %}
          </a>
        </li>
        {% endif %}
        {% block user_dropdown_items %}{% endblock %}
        <li><hr class="dropdown-divider"></li>
        {% if cabinet_logout_url %}
        <li>
          <a class="dropdown-item text-danger" href="{{ cabinet_logout_url }}">
            <span class="bi bi-box-arrow-right me-2"></span>{% trans "Sign Out" %}
          </a>
        </li>
        {% endif %}
      </ul>
    </div>
  </div>
</header>