{% load static %}
<header class="d-flex align-items-center justify-content-between bg-secondary text-white py-1 px-4 sticky-top z-40">
  <div>
    <a class="d-flex align-items-center gap-2 text-decoration-none text-white" href="/">
      <img class="h-6" src="{% static 'images/ase-logo.png' %}" alt="ASE" height="30"/>
      <span class="text-lg fw-bold">MQTT User Management</span>
    </a>
  </div>
  <nav class="position-relative">
    <ul class="nav nav-pills align-items-center">
      {% if request.user.is_authenticated %}
      <li class="nav-item">
        <a class="nav-link text-white" href="/">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle d-flex align-items-center gap-2 text-white" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <img class="h-8 w-8 rounded-circle object-cover" src="{{ request.user.profile.avatar }}" alt="Avatar" height="30"/>
          {{ request.user.profile.name }}
        </a>
        <ul class="dropdown-menu dropdown-menu-end shadow-lg" style="min-width: 200px;">
          <li><a class="dropdown-item" href="{% url 'profile' %}">My Profile</a></li>
          <li><a class="dropdown-item" href="{% url 'profile-edit' %}">Edit Profile</a></li>
          <li><a class="dropdown-item" href="{% url 'profile-settings' %}">Settings</a></li>
          {% if request.user.is_superuser %}
          <li><hr class="dropdown-divider" /></li>
          <li><a class="dropdown-item" href="{% url 'admin:index' %}">Site Admin</a></li>
          {% endif %}
          <li><hr class="dropdown-divider" /></li>
          <li><a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a></li>
        </ul>
      </li>
      {% else %}
      <li class="nav-item">
        <a class="nav-link text-white" href="{% url 'account_login' %}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-white" href="{% url 'account_signup' %}?next={% url 'profile-onboarding' %}">Signup</a>
      </li>
      {% endif %}
    </ul>
  </nav>
</header>