{% load i18n %}
<header class="cab-topbar">
  <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">
    <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" style="width:320px;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;">{% 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" style="color:#374151;transition:background .12s;" onmouseover="this.style.background='#f8fafc'" onmouseout="this.style.background=''">
            <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.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">
        {% 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>
        <li>
          <a class="dropdown-item text-danger" href="{% url 'account_logout' %}">
            <span class="bi bi-box-arrow-right me-2"></span>{% trans "Sign Out" %}
          </a>
        </li>
      </ul>
    </div>
  </div>
</header>