{% load i18n %}

<header class="cab-topbar">
  <div class="me-auto">
    <h6 class="mb-0 fw-semibold" style="color: var(--cab-text);">
      {% trans "My Account" as client_account_fallback %}
      {% firstof client_page_title client_account_fallback %}
    </h6>
  </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">
        <li>
          <a class="dropdown-item" href="{% url 'cabinet:client_home' %}">
            <span class="bi bi-person me-2"></span>{% trans "My Corner" %}
          </a>
        </li>
        {% if request.user.is_staff or request.user.is_superuser %}
          <li><hr class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item" href="{% url 'cabinet:dashboard' %}">
              <span class="bi bi-shield-lock me-2"></span>{% trans "Open Administration" %}
            </a>
          </li>
        {% endif %}
        <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>