{{define "navbar"}}
<nav class="bg-white shadow-sm border-b border-gray-200">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <a href="/dashboard" class="flex items-center space-x-2">
        <svg class="w-8 h-8 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
        </svg>
        <span class="font-bold text-xl text-gray-900">Mosis</span>
      </a>

      <!-- Navigation Links -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="/dashboard" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "dashboard"}}text-indigo-600 font-medium{{end}}">
          Dashboard
        </a>
        <a href="/apps" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "apps"}}text-indigo-600 font-medium{{end}}">
          Apps
        </a>
        <a href="/docs" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "docs"}}text-indigo-600 font-medium{{end}}">
          Docs
        </a>
        <a href="/settings" class="text-gray-600 hover:text-gray-900 {{if eq .ActiveNav "settings"}}text-indigo-600 font-medium{{end}}">
          Settings
        </a>
      </div>

      <!-- User Menu -->
      <div class="flex items-center space-x-4">
        <div class="relative" x-data="{ open: false }">
          <button class="flex items-center space-x-2 text-gray-600 hover:text-gray-900">
            {{if .Developer.AvatarURL}}
            <img src="{{.Developer.AvatarURL}}" alt="{{.Developer.Name}}" class="w-8 h-8 rounded-full">
            {{else}}
            <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
              <span class="text-indigo-600 font-medium text-sm">{{slice .Developer.Name 0 1}}</span>
            </div>
            {{end}}
            <span class="hidden md:inline">{{.Developer.Name}}</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
        </div>
        <a href="/auth/logout" class="text-gray-500 hover:text-gray-700">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
          </svg>
        </a>
      </div>
    </div>
  </div>
</nav>
{{end}}
