package views

templ Navigation(userName string) {
	<!-- Header Navigation -->
	<nav class="bg-white shadow-lg">
		<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 items-center">
					<div class="flex-shrink-0">
						<h1 class="text-xl font-bold text-indigo-600">WhereIsMyMoney</h1>
					</div>
					<div class="hidden md:block">
						<div class="ml-10 flex items-baseline space-x-4">
							<a href="/" class="text-gray-900 hover:bg-gray-50 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
							<a href="/accounts" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Konten & Depots</a>
							<a href="/transactions" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Transaktionen</a>
							<a href="/recurring" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Wiederkehrend</a>
							<a href="/categories" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Kategorien</a>
							<a href="/reports" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Berichte</a>
						</div>
					</div>
				</div>
				<div class="flex items-center">
					<div class="ml-4 flex items-center md:ml-6">
						<!-- User dropdown -->
						<div class="relative">
							<button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 p-1" onclick="toggleUserMenu()" aria-expanded="false" aria-haspopup="true">
								<span class="sr-only">Open user menu</span>
								<div class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center">
									<span class="text-sm font-medium text-white">{ userName[0:1] }</span>
								</div>
							</button>
							
							<!-- Dropdown menu -->
							<div id="user-menu" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" style="display: none;">
								<div class="px-4 py-2 text-sm text-gray-700 border-b border-gray-100">
									<div class="font-medium">{ userName }</div>
									<div class="text-gray-500 text-xs">Angemeldet</div>
								</div>
								<a href="/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
									<div class="flex items-center">
										<svg class="mr-3 h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
										</svg>
										Profil
									</div>
								</a>
								<a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
									<div class="flex items-center">
										<svg class="mr-3 h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<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.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
										</svg>
										Einstellungen
									</div>
								</a>
								<div class="border-t border-gray-100">
									<form action="/logout" method="POST" class="block">
										<button type="submit" class="w-full text-left px-4 py-2 text-sm text-red-700 hover:bg-red-50 flex items-center" role="menuitem">
											<svg class="mr-3 h-4 w-4 text-red-400" 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>
											Abmelden
										</button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- Mobile menu button -->
				<div class="md:hidden flex items-center">
					<button class="bg-gray-50 p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" onclick="toggleMobileMenu()">
						<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
						</svg>
					</button>
				</div>
			</div>
		</div>

		<!-- Mobile menu -->
		<div class="md:hidden" id="mobile-menu" style="display: none;">
			<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
				<a href="/" class="text-gray-900 hover:bg-gray-50 block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
				<a href="/accounts" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Konten & Depots</a>
				<a href="/transactions" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Transaktionen</a>
				<a href="/categories" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Kategorien</a>
				<a href="/reports" class="text-gray-500 hover:bg-gray-50 hover:text-gray-900 block px-3 py-2 rounded-md text-base font-medium">Berichte</a>
			</div>
			<div class="pt-4 pb-3 border-t border-gray-200">
				<div class="flex items-center px-5">
					<div class="flex-shrink-0">
						<span class="text-gray-800 text-sm font-medium">{ userName }</span>
					</div>
					<div class="ml-auto">
						<form action="/logout" method="POST" class="inline">
							<button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium">
								Abmelden
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</nav>

	<script>
		function toggleMobileMenu() {
			const menu = document.getElementById('mobile-menu');
			menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
		}

		function toggleUserMenu() {
			const menu = document.getElementById('user-menu');
			menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
		}

		// Close dropdown when clicking outside
		document.addEventListener('click', function(event) {
			const userButton = event.target.closest('[onclick="toggleUserMenu()"]');
			const userMenu = document.getElementById('user-menu');
			
			if (!userButton && userMenu && userMenu.style.display === 'block') {
				userMenu.style.display = 'none';
			}
		});
	</script>
}