{% load static %}

<header 
  class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
  x-data="{ open: false }"
>
  <div class="mx-auto flex h-16 max-w-7xl items-center gap-8 px-4 sm:px-6 lg:px-8">
    
    <a href="{% url 'dashboard' %}" class="group flex">
      <span class="text-xl font-bold tracking-widest text-gray-900 uppercase transition-colors group-hover:text-lime-600 dark:text-white group-hover:dark:text-lime-400">
        SI<span class="text-lime-600 transition-colors group-hover:text-gray-900 dark:text-lime-400 dark:group-hover:text-white">AKAD</span>
      </span>
    </a>

    <div class="flex flex-1 items-center justify-end md:justify-between">

      <nav class="hidden md:block">
        <ul class="flex items-center gap-6 text-sm">
          
          <li>
            <a href="{% url 'dashboard' %}"
              class="rounded-md bg-lime-100 px-3 py-2 text-sm font-medium text-lime-700 dark:bg-lime-900/50 dark:text-lime-300">
              Dashboard
            </a>
          </li>

          <li>
            <a href="#"
              class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75">
              Teams
            </a>
          </li>

          <li>
            <a href="#"
              class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75">
              Projects
            </a>
          </li>

          <li>
            <a href="#"
              class="text-gray-500 transition hover:text-gray-500/75 dark:text-white dark:hover:text-white/75">
              Calendar
            </a>
          </li>

        </ul>
      </nav>

      <!-- RIGHT -->
      <div class="flex items-center gap-4">

        {% if request.user.is_authenticated %}

        <a href="#"
          class="block shrink-0 rounded-full bg-white p-2.5 text-gray-600 transition hover:text-gray-700 dark:bg-gray-800 dark:text-white dark:hover:text-white/75">
          <span class="sr-only">Notifications</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </a>

        <div class="flex items-center gap-2">
          <img 
            src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40"
            class="h-10 w-10 rounded-full object-cover"
          />
          
          <a href="{% url 'logout' %}" 
             class="text-sm text-red-500 hover:underline">
            Logout
          </a>
        </div>

        {% endif %}

        <!-- Mobile Button -->
        <button 
          @click="open = !open"
          class="block rounded bg-gray-100 p-2.5 text-gray-600 transition md:hidden dark:bg-gray-800 dark:text-white"
        >
          <span class="sr-only">Toggle menu</span>
          ☰
        </button>

      </div>
    </div>
  </div>

  <!-- MOBILE MENU -->
  <div x-show="open" class="md:hidden px-4 pb-4">
    <ul class="space-y-2 text-sm text">
      <li><a href="{% url 'dashboard' %}">Dashboard</a></li>
      <li><a href="#">Teams</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Calendar</a></li>

      {% if request.user.is_authenticated %}
      <li><a href="{% url 'logout' %}" class="text-red-500">Logout</a></li>
      {% endif %}
    </ul>
  </div>

</header>