<header>
	<div class="header-bg">
		<div class="position-absolute bg"></div>
		<div class="inner d-flex justify-content-between">
			<div class="pt-2">
				<a class="navbar-brand position-relative" href="/" class="nav-link"><img alt="Akcja Tron" src="{{ asset('dist/img/logo.svg') }}" /></a>
			</div>
			<nav aria-label="Główne menu" class="blue pt-3 navbar navbar-expand-lg align-items-start" >
				<div class="collapse navbar-collapse h-100" id="mainMenu">
					<ul class="navbar-nav nav h-100">
						<li class="text-center text-lg-start nav-item mx-4 h-100 {% if categoryName == 'przedszkola' %}active{% endif %}">
							<a href="/przedszkola" class="pt-2 px-0 px-lg-5 d-inline-block">Dla przedszkoli</a>
						</li>
						<li class="text-center text-lg-start nav-item mx-4 h-100 {% if categoryName == 'szkoly' %}active{% endif %}">
							<a href="/szkoly" class="pt-2 px-0 px-lg-5 d-inline-block">Dla szkół</a>
						</li>

						{% if app.user.username is defined and app.user.username %}
							<li class="text-center nav-item mx-4 d-block d-lg-none"><a href="/{{ app.session.get('userCategoryName') ?? categoryName }}/profil" class="pt-2 px-0 d-inline-block">Profil {{ app.session.get('userCategoryName') ?? categoryName }}</a></li>
							<li class="text-center nav-item mx-4 d-block d-lg-none"><a href="/{{ categoryName }}/wylogowanie" class="pt-2 px-0 d-inline-block">Wyloguj</a></li>
						{% else %}
							{% if categoryName =='szkoly' %}
								<li class="text-center nav-item mx-4 d-block d-lg-none"><a href="/szkoly/logowanie" class="pt-2 px-0 d-inline-block">Zaloguj się</a></li>
							{% else %}
								<li class="text-center nav-item mx-4 d-block d-lg-none"><a href="/przedszkola/logowanie" class="pt-2 px-0 d-inline-block">Zaloguj się</a></li>
							{% endif %}
						{% endif %}

					</ul>
				</div>
			</nav>
			<div class="pt-3 d-none d-lg-block">
				{% if app.user.username is defined and app.user.username %}
					<div class="btn small yellow"><a href="/{{ app.session.get('userCategoryName') ?? categoryName }}/profil" class="d-flex align-items-center"><img alt="" src="{{ asset('dist/img/icon-profil.svg') }}" class="me-2" />Profil {{ app.session.get('userCategoryName') ?? categoryName }}</a></div>
					<div class="btn small yellow"><a href="/{{ categoryName }}/wylogowanie" class="d-flex align-items-center">Wyloguj</a></div>
				{% else %}
					{% if categoryName =='szkoly' %}
						<div class="btn small yellow"><a href="/szkoly/logowanie" class="d-flex align-items-center"><img alt="" src="{{ asset('dist/img/icon-profil.svg') }}" class="me-2" />Zaloguj się</a></div>
					{% else %}
						<div class="btn small yellow"><a href="/przedszkola/logowanie" class="d-flex align-items-center"><img alt="" src="{{ asset('dist/img/icon-profil.svg') }}" class="me-2" />Zaloguj się</a></div>
					{% endif %}
				{% endif %}
			</div>
			<div class="d-block d-lg-none navbar-dark">
				<button class="ms-1 ms-sm-3 btn transparent border-0 navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainMenu" aria-controls="mainMenu" aria-expanded="false" aria-label="Rozwiń nawigację">
	                <span class="navbar-toggler-icon"></span>
	            </button>
            </div>
		</div>

		{% if record.heroImage is defined and record.heroImage is not empty %}
			{{ include('sections/_hero.twig', {'image':record.heroImage, 'text1':record.heroTxt1 ?? '', 'text2':record.heroTxt2 ?? '', 'btn_text':record.heroBtnTxt ?? '', 'btn_url':record.heroBtnUrl ?? ''}) }}
		{% endif %}
	</div>

	{% if menuItems is defined and menuItems is not empty %}
		<div class="bg-white">
			<div class="inner d-flex flex-wrap justify-content-center justify-content-lg-between align-items-center py-2">
				<nav aria-label="Menu {{ categoryName }}" class="d-none d-md-flex">
					<ul class="nav">
						{% if menuItems is defined %}
							{% for item in menuItems %}
								<li class="nav-item me-4 {% if item.blackButton is defined and item.blackButton is not empty %}active{% endif %}">
									<a class="{% if item.url|replace({'/': ''}) in app.request.attributes.get('_route_params') or (item.activeInfo is defined and app.request.attributes.get('_route')==item.activeInfo) %} active {% endif %}" href="{{ item.url }}" {% if item.newWindow is defined and item.newWindow is not empty %} target="_blank" {% endif %}>{{ item.name }}</a>
								</li>
							{% endfor %}
						{% endif %}
					</ul>
				</nav>
				{% if categoryName == 'przedszkola' %}
					<div class="btn my-2 mt-lg-0"><a href="/przedszkola/rejestracja">Zgłoś przedszkole</a></div>
				{% else %}
					<div class="btn my-2 mt-lg-0"><a href="/szkoly/rejestracja">Zgłoś klasę do Akcji Tron</a></div>
				{% endif %}
			</div>
		</div>
	{% endif %}
</header>
