<nav class="navigation">
	<div class="logo">
		<a href="https://togethere.cloud/home/"><img src="/img/logo_temp.png" class="logo-img" alt="Logo Wspólnie"/></a>
	</div>
	<ul class="linksLogged">
		<li><a href="https://togethere.cloud/home/">Start</a></li>
		<li><a href="https://togethere.cloud/disciplines/">Dyscypliny</a></li>
		<li><a href="https://togethere.cloud/teams/">Drużyny</a></li>
		<li><a href="https://togethere.cloud/matches/">Mecze</a></li>
		<li><a href="https://togethere.cloud/leagues/">Ligi</a></li>
		<li><a href="https://togethere.cloud/tournaments/">Turnieje</a></li>
		<li><a href="https://togethere.cloud/bok/">BOK</a></li>
		<li class="account-menu" id="accountMenuItem">
			<button type="button" class="account-menu-trigger" id="accountMenuTrigger" aria-haspopup="true" aria-expanded="false">Konto</button>
			<div class="account-dropdown" id="accountDropdown" role="menu" aria-label="Menu konta">
				<a href="https://togethere.cloud/account/profile/" role="menuitem">Mój Profil</a>
				<a href="https://togethere.cloud/my/my_matches/" role="menuitem">Moje Mecze</a>
				<a href="https://togethere.cloud/my/my_tournaments/" role="menuitem">Moje Turnieje</a>
				<a href="https://togethere.cloud/my/my_leagues/" role="menuitem">Moje Ligi</a>
				<a href="https://togethere.cloud/account/wallet/" role="menuitem">Mój portfel</a>
				<a href="https://togethere.cloud/my/my_tickets/" role="menuitem">Moje zgłoszenia</a>
				<?php if (isset($_SESSION['role']) && $_SESSION['role'] === 'admin'): ?>
					<a href="https://togethere.cloud/administration/" role="menuitem">Administrator</a>
				<?php endif; ?>
				<a href="https://togethere.cloud/account/settings/" role="menuitem">Ustawienia</a>
				<a href="https://togethere.cloud/account/logout.php" role="menuitem">Wyloguj</a>
			</div>
		</li>
	</ul>
	<div class="hamburger">
		<div class="line"></div>
		<div class="line"></div>
		<div class="line"></div>
	</div>
</nav>
<style>
	.linksLogged {
		display: flex;
		align-items: center;
	}

	.linksLogged > li {
		display: flex;
		align-items: center;
	}

	.account-menu {
		position: relative;
	}

	.account-menu-trigger {
		appearance: none;
		border: 0;
		background: transparent;
		color: #007BFF;
		font-weight: 600;
		padding: 10px 10px;
		border-radius: 5px;
		transition: all 0.3s ease;
		cursor: pointer;
		font-family: inherit;
		font-size: 1em;
		line-height: 1;
		letter-spacing: normal;
		font-style: normal;
		display: block;
		margin: 0;
		position: relative;
		top: 0;
	}

	.account-menu-trigger:hover,
	.account-menu-trigger:focus-visible {
		background: #007BFF;
		color: #ffffff;
		outline: none;
	}

	.account-dropdown {
		display: none;
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		min-width: 220px;
		background: #ffffff;
		border: 1px solid rgba(0, 123, 255, 0.2);
		border-radius: 10px;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
		padding: 8px;
		display: none;
		grid-template-columns: 1fr;
		gap: 2px;
		z-index: 10010;
	}

	.account-dropdown a {
		display: flex;
		align-items: center;
		padding: 10px 12px;
		min-height: 44px;
		line-height: 1.3;
		border-radius: 7px;
		text-decoration: none;
		color: #007BFF;
		font-weight: 600;
	}

	.account-dropdown a:hover,
	.account-dropdown a:focus-visible {
		background: #007BFF;
		color: #ffffff;
		outline: none;
	}

	.account-menu:hover .account-dropdown,
	.account-menu:focus-within .account-dropdown,
	.account-menu.open .account-dropdown {
		display: grid;
	}

	@media (max-width: 800px) {
		.linksLogged.active {
			align-items: stretch;
		}

		.linksLogged.active > li {
			width: 90%;
			justify-content: center;
		}

		.linksLogged.active .account-menu {
			width: 90%;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.linksLogged.active .account-menu-trigger {
			display: block;
			width: auto;
			text-align: center;
		}

		.linksLogged.active .account-dropdown {
			position: absolute;
			top: calc(100% + 8px);
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			min-width: 220px;
			max-width: calc(100vw - 24px);
			margin-top: 0;
			box-shadow: none;
			border-radius: 8px;
			border-color: rgba(0, 123, 255, 0.25);
			background: #ffffff;
		}

		.account-dropdown a {
			justify-content: center;
			text-align: center;
		}
	}
</style>
<script>
	document.addEventListener('DOMContentLoaded', function () {
		var menuItem = document.getElementById('accountMenuItem');
		var trigger = document.getElementById('accountMenuTrigger');
		var hoverCloseTimer = null;
		var HOVER_CLOSE_DELAY_MS = 1500;
		if (!menuItem || !trigger) return;

		function setOpen(isOpen) {
			menuItem.classList.toggle('open', isOpen);
			trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
		}

		trigger.addEventListener('click', function (e) {
			e.preventDefault();
			e.stopPropagation();
			if (hoverCloseTimer) {
				clearTimeout(hoverCloseTimer);
				hoverCloseTimer = null;
			}
			setOpen(!menuItem.classList.contains('open'));
		});

		menuItem.addEventListener('mouseenter', function () {
			if (hoverCloseTimer) {
				clearTimeout(hoverCloseTimer);
				hoverCloseTimer = null;
			}
			setOpen(true);
		});

		menuItem.addEventListener('mouseleave', function () {
			if (hoverCloseTimer) {
				clearTimeout(hoverCloseTimer);
			}
			hoverCloseTimer = setTimeout(function () {
				setOpen(false);
				hoverCloseTimer = null;
			}, HOVER_CLOSE_DELAY_MS);
		});

		document.addEventListener('click', function (e) {
			if (!menuItem.contains(e.target)) {
				if (hoverCloseTimer) {
					clearTimeout(hoverCloseTimer);
					hoverCloseTimer = null;
				}
				setOpen(false);
			}
		});

		document.addEventListener('keydown', function (e) {
			if (e.key === 'Escape') {
				if (hoverCloseTimer) {
					clearTimeout(hoverCloseTimer);
					hoverCloseTimer = null;
				}
				setOpen(false);
			}
		});
	});
</script>
<script src="/js/nav.js"></script>