<!-- Navigation Component -->
<nav class="bg-white shadow-sm border-b border-gray-200" x-data="{ mobileMenuOpen: false, jobsDropdownOpen: false, docsDropdownOpen: false }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="/admin" class="flex items-center">
                        <div class="w-10 h-10  mr-3 flex items-center justify-center">
                            <img src="https://cdn.do.supervaize.com/brand/logos/pill-black-green-orange.svg" alt="Supervaizer" class="w-10 h-10">
                        </div>
                        <h1 class="text-xl font-bold text-gray-900">Supervaizer</h1>
                    </a>
                </div>

                <!-- Desktop Navigation -->
                <div class="hidden sm:ml-6 sm:flex sm:space-x-1 items-center">
                    <!-- Dashboard -->
                    <a href="/admin"
                       class="nav-link text-gray-500 hover:text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                       :class="window.location.pathname === '/admin' ? 'text-blue-600 bg-blue-50' : ''">
                        Dashboard
                    </a>

                    <!-- Server -->
                    <a href="/admin/server"
                       class="nav-link text-gray-500 hover:text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                       :class="window.location.pathname === '/admin/server' ? 'text-blue-600 bg-blue-50' : ''">
                        Server
                    </a>

                    <!-- Agents -->
                    <a href="/admin/agents"
                       class="nav-link text-gray-500 hover:text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                       :class="window.location.pathname === '/admin/agents' ? 'text-blue-600 bg-blue-50' : ''">
                        Agents
                    </a>

                    <!-- Jobs Dropdown -->
                    <div class="relative" @click.away="jobsDropdownOpen = false">
                        <button @click="jobsDropdownOpen = !jobsDropdownOpen"
                                class="nav-link text-gray-500 hover:text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center"
                                :class="window.location.pathname.startsWith('/admin/jobs') || window.location.pathname.startsWith('/admin/cases') ? 'text-blue-600 bg-blue-50' : ''">
                            Jobs
                            <svg class="ml-1 h-4 w-4 transition-transform" :class="jobsDropdownOpen ? 'rotate-180' : ''" 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"></path>
                            </svg>
                        </button>

                        <div x-show="jobsDropdownOpen"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 transform scale-95"
                             x-transition:enter-end="opacity-100 transform scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 transform scale-100"
                             x-transition:leave-end="opacity-0 transform scale-95"
                             class="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
                             x-cloak>
                            <div class="py-1">
                                <a href="/admin/jobs" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">All Jobs</a>
                                <a href="/admin/cases" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">Cases</a>
                            </div>
                        </div>
                    </div>

                    <!-- Documentation Dropdown -->
                    <div class="relative" @click.away="docsDropdownOpen = false">
                        <button @click="docsDropdownOpen = !docsDropdownOpen"
                                class="nav-link text-gray-500 hover:text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center">
                            Documentation
                            <svg class="ml-1 h-4 w-4 transition-transform" :class="docsDropdownOpen ? 'rotate-180' : ''" 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"></path>
                            </svg>
                        </button>

                        <div x-show="docsDropdownOpen"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 transform scale-95"
                             x-transition:enter-end="opacity-100 transform scale-100"
                             x-transition:leave="transition ease-in duration-150"
                             x-transition:leave-start="opacity-100 transform scale-100"
                             x-transition:leave-end="opacity-0 transform scale-95"
                             class="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
                             x-cloak>
                            <div class="py-1">
                                <a href="https://doc.supervaize.com/docs/category/supervaizer-controller" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                    Supervaizer Doc
                                    <svg class="inline ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                    </svg>
                                </a>
                                <div class="border-t border-gray-200 my-1"></div>
                                <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">API Documentation</div>
                                <a href="/docs" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                    Swagger API
                                    <svg class="inline ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                    </svg>
                                </a>
                                <a href="/redoc" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors">
                                    ReDoc
                                    <svg class="inline ml-1 h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Console -->
                    <a href="/admin/console"
                       class="nav-link text-gray-500 hover:text-gray-700 hover:bg-gray-50 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                       :class="window.location.pathname === '/admin/console' ? 'text-blue-600 bg-blue-50' : ''">
                        Console
                    </a>
                </div>
            </div>

            <!-- Right side -->
            <div class="flex items-center space-x-4">
                <span class="text-sm text-gray-500">{{ api_version }}</span>

                <!-- Mobile menu button -->
                <button @click="mobileMenuOpen = !mobileMenuOpen" class="sm:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100">
                    <svg class="h-6 w-6" :class="mobileMenuOpen ? 'hidden' : 'block'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <svg class="h-6 w-6" :class="mobileMenuOpen ? 'block' : 'hidden'" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu -->
    <div x-show="mobileMenuOpen" x-cloak class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1 bg-gray-50 border-t border-gray-200">
            <a href="/admin" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100">Dashboard</a>
            <a href="/admin/server" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100">Server</a>
            <a href="/admin/agents" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100">Agents</a>

            <!-- Jobs section -->
            <div class="pl-3 pr-4 py-2">
                <div class="text-base font-medium text-gray-700 mb-2">Jobs</div>
                <a href="/admin/jobs" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">All Jobs</a>
                <a href="/admin/cases" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Cases</a>
            </div>

            <!-- Documentation section -->
            <div class="pl-3 pr-4 py-2">
                <div class="text-base font-medium text-gray-700 mb-2">Documentation</div>
                <a href="https://doc.supervaize.com/docs/category/supervaizer-controller" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Supervaizer Controller</a>
                <div class="pl-4 py-1 text-xs font-semibold text-gray-500 uppercase tracking-wider">API Documentation</div>
                <a href="/docs" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Swagger API</a>
                <a href="/redoc" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">ReDoc</a>
                <a href="https://github.com/supervaize/supervaizer-controller" target="_blank" class="block pl-4 py-1 text-sm text-gray-500 hover:text-gray-700">Supervaizer GitHub</a>
            </div>

            <a href="/admin/console" class="block pl-3 pr-4 py-2 text-base font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100">Console</a>
        </div>
    </div>
</nav>
