{% set navigation = navigation() %}

<nav class="navbar navbar-expand-lg d-flex flex-column" role="navigation" aria-label="Main navigation">
	<div class="container-sm my-3 d-flex justify-content-center align-items-center flex-column">
		<a class="navbar-brand text-center" href="{{ path('home') }}">
			{% if settings('site_show_logo_image') %}
				<img src="{{ settings('site_logo_image') }}" class="img-fluid" style="max-width: 200px;" alt="{{ settings('site_name') }} logo">
			{% endif %}
			{% if settings('site_show_logo_text') %}
				<span class="visually-hidden">{{ settings('site_name') }}</span>
				<div class="h5 mt-1" aria-hidden="true">{{ settings('site_name') }}</div>
			{% endif %}
		</a>
	</div>

	<div class="container-sm">
		<div class="bg-gradient border rounded px-3 py-2 w-100">
			<button class="navbar-toggler w-100 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarMain">
				<ul class="navbar-nav w-100 flex-column flex-lg-row">
					{% for item in navigation %}
						{% if item.isGranted is null or is_granted(item.isGranted) %}
							{% set nav_active = app.request.attributes.get('_route') starts with item.route %}

							{% if item.type == 'separator' %}
								<li><hr class="dropdown-divider" role="separator"></li>

							{% elseif item.type == 'text' %}
								<li class="nav-item">
									<span class="nav-link disabled" aria-disabled="true">
										{% if item.icon %}<i class="fa-solid fa-xs {{ item.icon }}" aria-hidden="true"></i>{% endif %}
										{{ item.small ? '<small>' ~ item.label ~ '</small>' : item.label|raw }}
									</span>
								</li>

							{% elseif item.children|length > 0 %}
								<li class="nav-item dropdown">
									<a 
										class="nav-link dropdown-toggle {{ nav_active ? item.activeClass : item.class }}" 
										href="#" 
										id="dropdown-{{ loop.index }}" 
										role="button" 
										data-bs-toggle="dropdown" 
										aria-expanded="false"
									>
										{% if item.icon %}<i class="fa-solid fa-xs {{ item.icon }}" aria-hidden="true"></i>{% endif %}
										{{ item.label }}
									</a>
									<ul class="dropdown-menu" aria-labelledby="dropdown-{{ loop.index }}">
										{% for sub in item.children|sort((a, b) => a.weight <=> b.weight) %}
											{% if sub.type == 'separator' %}
												<li><hr class="dropdown-divider"></li>
											{% elseif sub.type == 'text' %}
												<li>
													<span class="dropdown-item disabled" aria-disabled="true">
														{% if sub.icon %}<i class="fa-solid fa-xs {{ sub.icon }}" aria-hidden="true"></i>{% endif %}
														{{ sub.small ? '<small>' ~ sub.label ~ '</small>' : sub.label|raw }}
													</span>
												</li>
											{% else %}
												<li>
													<a 
														class="dropdown-item {{ nav_active ? sub.activeClass : sub.class }}" 
														href="{{ sub.route is not null ? path(sub.route) : '#' }}"
													>
														{% if sub.icon %}<i class="fa-solid fa-xs {{ sub.icon }}" aria-hidden="true"></i>{% endif %}
														{{ sub.label }}
													</a>
												</li>
											{% endif %}
										{% endfor %}
									</ul>
								</li>

							{% else %}
								<li class="nav-item">
									<a 
										class="nav-link {{ nav_active ? 'active btn btn-primary text-white' : 'btn btn-outline-secondary' }} my-1"
										href="{{ item.route is not null ? path(item.route) : '#' }}"
										aria-current="{{ nav_active ? 'page' : 'false' }}"
									>
										{% if item.icon %}<i class="fa-solid fa-xs {{ item.icon }}" aria-hidden="true"></i>{% endif %}
										{{ item.label }}
									</a>
								</li>
							{% endif %}
						{% endif %}
					{% endfor %}
				</ul>

				<div class="mt-3 mt-lg-0 d-flex justify-content-center justify-content-lg-end w-100" role="region" aria-label="User menu">
					{% if player %}
						<div class="dropdown">
							<a 
								class="dropdown-toggle text-reset text-decoration-none d-flex align-items-center" 
								href="#" 
								data-bs-toggle="dropdown" 
								aria-haspopup="true" 
								aria-expanded="false"
							>
								<img src="{{ player.avatar }}" class="border rounded me-2" alt="{{ player.username }}'s avatar" width="32" height="32">
								<span class="fw-bold">{{ player.username }}</span>
							</a>
							<ul class="dropdown-menu dropdown-menu-end">
								{% if player.admin %}
									<li><span class="dropdown-item disabled">Hello admin!</span></li>
									<li><hr class="dropdown-divider"></li>
								{% endif %}
								<li>
									<a class="dropdown-item" href="/shop/history">
										<i class="fad fa-history" aria-hidden="true"></i> History
									</a>
								</li>
								<li>
									<a class="dropdown-item" href="{{ path('realm.logout') }}">
										<i class="fad fa-right-from-bracket" aria-hidden="true"></i> Logout
									</a>
								</li>
							</ul>
						</div>
					{% else %}
						<a 
							href="{{ path('realm.steam_openid.init') }}" 
							class="d-block mt-3 mt-lg-0"
							aria-label="Login with Steam"
						>
							<img 
								src="https://community.cloudflare.steamstatic.com/public/images/signinthroughsteam/sits_01.png" 
								alt="Sign in through Steam" 
								class="img-fluid" 
								style="max-width: 150px;"
							>
						</a>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</nav>