<!-- templates/partials/nav.html -->
<header class="border-b bg-white sticky top-0 z-50" style="border-color: var(--border); background: var(--background);">
  <div class="container mx-auto px-4 py-4 flex items-center justify-between">
    <!-- Brand -->
    <a href="{% url 'article_list' %}" class="flex items-center gap-2">
      <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background: var(--primary); color: var(--primary-foreground);">
        <span class="font-bold">D</span>
      </div>
      <span class="font-semibold text-lg" style="color: var(--foreground);">Dev Portfolio</span>
    </a>

    <!-- Nav -->
    <nav class="flex items-center gap-6">
      <a href="{% url 'article_list' %}" class="text-sm font-medium hover:opacity-90 transition" style="color: var(--foreground);">
        Artículos
      </a>

      {% if user.is_authenticated %}
        <!-- Avatar + Dropdown (sin JS, usando <details>) -->
        <details class="relative">
          <summary class="list-none cursor-pointer">
            <span class="btn btn-ghost flex items-center gap-2">
              <span class="w-8 h-8 rounded-full overflow-hidden border flex items-center justify-center"
                    style="border-color: var(--border); background: var(--muted); color: var(--muted-foreground);">
                {% if user.profile.avatar %}
                  <img src="{{ user.profile.avatar.url }}" alt="Avatar" class="w-full h-full object-cover">
                {% else %}
                  <span class="font-semibold">
                    {{ user.profile.display_name|default:user.username|slice:":1"|upper }}
                  </span>
                {% endif %}
              </span>
              <span class="text-sm">
                {{ user.profile.display_name|default:user.username }}
              </span>
              <!-- chevron -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="opacity:.7">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </span>
          </summary>

          <div class="absolute right-0 mt-2 w-56 card shadow-lg overflow-hidden">
            <div class="px-4 py-3 text-sm font-semibold" style="color: var(--foreground);">
              Mi Cuenta
            </div>
            <div class="sep"></div>

            <a href="{% url 'profile_detail' %}" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-gray-50"
               style="color: var(--foreground);">
              <!-- user icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 21a8 8 0 10-16 0"/>
              </svg>
              Ver Perfil
            </a>

            <a href="{% url 'edit_profile' %}" class="flex items-center gap-2 px-4 py-2 text-sm hover:bg-gray-50"
               style="color: var(--foreground);">
              <!-- settings icon -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35.696-.17 1.2-.77 1.066-1.522-.21-1.176-1.174-1.91-1.066-2.573.426-1.756 2.924-1.756 3.35 0 .26 1.07 1.6 1.62 2.573 1.066z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              </svg>
              Editar Perfil
            </a>

            <div class="sep"></div>

            <form method="post" action="{% url 'logout' %}" class="px-2 py-2">
              {% csrf_token %}
              <button type="submit"
                      class="w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm hover:opacity-90"
                      style="color: var(--destructive);">
                <!-- logout icon -->
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1"/>
                </svg>
                Cerrar Sesión
              </button>
            </form>
          </div>
        </details>

        <style>
          /* mejora UX del dropdown sin JS */
          details > summary::-webkit-details-marker { display: none; }
          details[open] .card { animation: fadeIn .12s ease-out; }
          @keyframes fadeIn { from { opacity:0; transform: translateY(-4px);} to {opacity:1; transform: translateY(0);} }
          /* hover en dark */
          .dark details .card a:hover { background: rgba(255,255,255,.06) !important; }
          .dark details .card { background: var(--card); }
        </style>

      {% else %}
        <div class="flex items-center gap-2">
          <a class="btn btn-ghost" href="{% url 'login' %}">Iniciar Sesión</a>
          <a class="btn btn-primary" href="{% url 'register' %}">Registrarse</a>
        </div>
      {% endif %}
    </nav>
  </div>
</header>