<script lang="ts">
	let innerWidth: number;

	function dropdown() {
		if (innerWidth < 1024) {
			const check_element = this.lastChild;

			const rotate_list = document.querySelectorAll(".dd-symbol-clone");
			const rotate_element = this.childNodes[0].children[0];

			var first_check = check_element.classList.contains(
				"show-dropdown-content"
			);
			const nodeList = document.querySelectorAll(".dropdown-content");

			if (first_check == true) {
				check_element.classList.remove("show-dropdown-content");
				rotate_element.classList.toggle("rotate-symbol");
			} else {
				for (let i = 0; i < nodeList.length; i++) {
					const element = nodeList[i];
					element.classList.remove("show-dropdown-content");
				}
				for (let i = 0; i < rotate_list.length; i++) {
					const element = rotate_list[i];
					element.classList.remove("rotate-symbol");
				}

				check_element.classList.add("show-dropdown-content");
				rotate_element.classList.add("rotate-symbol");
			}
		}
	}

	function hover() {
		if (innerWidth > 1024) {
			const check_element = this.firstChild.lastChild;
			check_element.style.visibility = "visible";
		}
	}

	function hoverout() {
		if (innerWidth > 1024) {
			const check_element = this.firstChild.lastChild;
			check_element.style.visibility = "hidden";
		}
	}

	function hamburger() {
		const nodeList = document.querySelectorAll(".dropdown-content");
		for (let i = 0; i < nodeList.length; i++) {
			nodeList[i].classList.remove("show-dropdown-content");
		}
		var element = document.getElementById("cardNavigation");
		element.classList.toggle("hidden");

		const spans = this.children;
		var first_check = spans[0].classList.contains("hamburger-swing-0");

		if (first_check == true) {
			for (let i = 0; i < spans.length; i++) {
				spans[i].classList.remove("hamburger-swing-" + i);
			}
			const rotate_list = document.querySelectorAll(".dd-symbol");
			for (let i = 0; i < rotate_list.length; i++) {
				rotate_list[i].classList.remove("rotate-symbol");
			}
		} else {
			for (let i = 0; i < spans.length; i++) {
				spans[i].classList.add("hamburger-swing-" + i);
			}
		}
	}
</script>

<svelte:window bind:innerWidth />

<div
	class="hamburger_menu py-1 px-2 bg-secondary
            xs:px-4
            lg:hidden"
>
	<div
		id="hamburger" 
		on:click={hamburger}
		on:keydown={hamburger}
		class="cursor-pointer"
	>

		<span></span>
		<span></span>
		<span></span>

	</div>
</div>

<nav
	id="cardNavigation"
	class="cardNavigation box hidden relative ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block mb-0 lg:mb-5"
>
	<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
		Jetzt bestellen
	</div>

	<div class="nav-element">
		<a class="no-dropdown nav-element-child" href="/welcher-energieausweis/"
			>Welcher Energieausweis?</a
		>
	</div>

	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		{#if innerWidth > 1023}
			<a href={undefined} class="nav-element-child"
				>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
				><span class="dd-symbol">❯</span></a
			>
		{:else}
			<a href={undefined} class="nav-element-child"
				>Energieausweis erstellen<span class="dd-symbol-clone">❯</span
				><span class="dd-symbol">❯</span></a
			>
		{/if}

		<ul class="dropdown-content energieasusweis-erstellen">
			{#if innerWidth < 1023}
				<li>
					<a href="/energieausweis-erstellen"
						>Energieausweis erstellen</a
					>
				</li>
			{/if}
			<li>
				<a
					href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
					>Verbrauchsausweis erstellen</a
				>
			</li>
			<li>
				<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
					>Bedarfsausweis erstellen</a
				>
			</li>
			<li>
				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
					>Verbrauchsausweis Gewerbe erstellen</a
				>
			</li>
		</ul>
	</div>

	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		{#if innerWidth > 1023}
			<a href={undefined} class="nav-element-child"
				>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
					class="dd-symbol">❯</span
				></a
			>
		{:else}
			<a href={undefined} class="nav-element-child"
				>Angebot anfragen<span class="dd-symbol-clone">❯</span><span
					class="dd-symbol">❯</span
				></a
			>
		{/if}

		<ul class="dropdown-content angebot-anfragen">
			{#if innerWidth < 1023}
				<li>
					<a href="/energieausweis-erstellen">Angebot anfragen</a>
				</li>
			{/if}
			<li>
				<a
					href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen"
					>Bedarfsausweis Gewerbe anfragen</a
				>
			</li>
			<li>
				<a href="/angebot-anfragen/geg-nachweis-wohnen-anfragen"
					>GEG Nachweis Wohnen anfragen</a
				>
			</li>
			<li>
				<a href="/angebot-anfragen/geg-nachweis-gewerbe-anfragen"
					>GEG Nachweis Gewerbe anfragen</a
				>
			</li>
		</ul>
	</div>

	<div class="nav-element">
		<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
			>Sanierungsfahrplan (iSFP)</a
		>
	</div>

	<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
		Produkte & Preise
	</div>

	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		<a href="/verbrauchsausweis/" class="nav-element-child"
			>Verbrauchsausweis<span class="dd-symbol-clone">❯</span><span
				class="dd-symbol">❯</span
			></a
		>
		<ul class="dropdown-content verbrauchsausweis">
			{#if innerWidth < 1023}
				<li><a href="index">Verbrauchsausweis</a></li>
			{/if}
			<li><a href="/verbrauchsausweis/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis Wohngebäude</a></li>
			<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis online erstellen</a></li>
			<li><a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis/">Häufige Fragen zum Verbrauchsausweis</a></li>
			<li>
				<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis/">Statistiken zum Verbrauchsausweis Wohngebäude</a
				>
			</li>
			<li><a href="/verbrauchsausweis/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe</a></li>
			<li>
				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/">Verbrauchsausweis Gewerbe online erstellen</a>
			</li>
			<li>
				<a href="/verbrauchsausweis/haeufige-fragen-zum-verbrauchsausweis-gewerbe/">Häufige Fragen zum Verbrauchsausweis Gewerbe</a>
			</li>
			<li>
				<a href="/verbrauchsausweis/statistiken-zum-verbrauchsausweis-gewerbe/">Statistiken zum Verbrauchsausweis Gewerbe</a>
			</li>
		</ul>
	</div>

	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		<a href="/bedarfsausweis/" class="nav-element-child"
			>Bedarfsausweis<span class="dd-symbol-clone">❯</span><span
				class="dd-symbol">❯</span
			></a
		>
		<ul class="dropdown-content bedarfsausweis">
			{#if innerWidth < 1023}
				<li><a href="/bedarfsausweis/">Bedarfsausweis</a></li>
			{/if}
			<li><a href="/bedarfsausweis/bedarfsausweis-wohngebaeude/">Bedarfsausweis Wohngebäude</a></li>
			<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis online erstellen</a></li>
			<li><a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis/">Häufige Fragen zum Bedarfsausweis</a></li>
			<li>
				<a href="/bedarfsausweis/statistiken-zum-bedarfsausweis/">Statistiken zum Bedarfsausweis Wohngebäude</a>
			</li>
			<li><a href="/bedarfsausweis/bedarfsausweis-gewerbe/">Bedarfsausweis Gewerbe</a></li>
			<li><a href="/angebot-anfragen/bedarfsausweis-gewerbe-anfragen">Bedarfsausweis Gewerbe anfragen</a></li>
			<li>
				<a href="/bedarfsausweis/haeufige-fragen-zum-bedarfsausweis-gewerbe/">Häufige Fragen zum Bedarfsausweis Gewerbe</a>
		</ul>
	</div>

	<div class="nav-element">
		<a class="no-dropdown nav-element-child" href="/sanierungsfahrplan"
			>Sanierungsfahrplan</a
		>
	</div>

	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		<a href="/" class="nav-element-child"
			>Energieausweis<span class="dd-symbol-clone">❯</span><span
				class="dd-symbol">❯</span
			></a
		>
		<ul class="dropdown-content energieausweis">
			{#if innerWidth < 1023}
				<li><a href="/energieausweis/">Energieausweis</a></li>
			{/if}
			<li><a href="/energieausweis/energieausweis-pflicht/">Energieausweis Pflicht</a></li>
			<li><a href="/energieausweis/energieausweis-kosten/">Energieausweis Kosten</a></li>
			<li><a href="/energieausweis/energieausweis-haus/">Energieausweis Haus</a></li>
		</ul>
	</div>

	<!-- <div class="nav-element">
		<a
			class="no-dropdown nav-element-child"
			href="/energieausweis-aussteller">Energieberater finden</a
		>
	</div> -->

	<div class="nav-element bg-secondary/5 py-1 pl-2 text-xs font-bold">
		FAQ & Hilfe
	</div>

	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		{#if innerWidth > 1023}
			<a href="/bestellprozess-energieausweis" class="nav-element-child"
				>Bestellprozess Energieausweis<span class="dd-symbol-clone"
					>❯</span
				><span class="dd-symbol">❯</span></a
			>
		{:else}
			<a href="/bestellprozess-energieausweis" class="nav-element-child"
				>Bestellprozess Energieausweis<span class="dd-symbol-clone"
					>❯</span
				><span class="dd-symbol">❯</span></a
			>
		{/if}

		<ul class="dropdown-content bestellprozess-energieausweis">
			{#if innerWidth < 1023}
				<li>
					<a href="/bestellprozess-energieausweis"
						>Bestellprozess Energieausweis</a
					>
				</li>
			{/if}
			<li>
				<a
					href="/bestellprozess-energieausweis/merkblatt-verbrauchsausweis-wohnen/"
					>Merkblatt Verbrauchsausweis Wohnen</a
				>
			</li>
			<li>
				<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
					>Merkblatt Bedarfsausweis Wohnen</a
				>
			</li>
			<li>
				<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
					>Merkblatt Verbrauchsausweis Gewerbe</a
				>
			</li>
		</ul>
	</div>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
	<div
		class="nav-element dropdown lg:dropdown-right"
		on:click={dropdown}
		on:keydown={dropdown}
		on:mouseover={hover}
		on:mouseleave={hoverout}
	>
		<a href="/geg/" class="nav-element-child"
			>Gebäudeenergiegesetz (GEG)<span class="dd-symbol-clone">❯</span><span
				class="dd-symbol">❯</span
			></a
		>
		<ul class="dropdown-content geg">
			{#if innerWidth < 1023}
				<li><a href="/geg/">Gebäudeenergiegesetz (GEG)</a></li>
			{/if}
			<li><a href="/geg/geg-2024-volltext/">GEG 2024 Volltext</a></li>
			<li><a href="/geg/enev-zusammenfassung">EnEV Zusammenfassung-Archiv</a></li>
		</ul>
	</div>

	<div class="nav-element">
		<a class="no-dropdown nav-element-child" href="/faq/">FAQ</a>
	</div>

	<div class="nav-element">
		<a class="no-dropdown nav-element-child" href="/glossar/">Glossar</a>
	</div>

	<!--<div class="nav-element">
		<a class="no-dropdown nav-element-child lg:rounded-b-xl" href="/kundenbewertungen/"
			>Kundenbewertungen</a
		>
	</div>
	 <div class="nav-element">
		<a
			class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"
			href="/fuer-entwickler/">Für Entwickler</a
		>
	</div> -->
</nav>

<style lang="scss">
	.dd-symbol::before {
		content: "❯";
		font-size: 0.95rem;
		position: absolute;
		top: 0px;
		left: -7px;
		animation-name: flim;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.dd-symbol {
		visibility: hidden;
	}

	.dd-symbol::after {
		content: "❯";
		font-size: 0.95rem;
		position: absolute;
		top: 0px;
		right: -7px;
		animation-name: flim;
		animation-duration: 2s;
		animation-delay: 1s;
		animation-iteration-count: infinite;
	}

	@keyframes flim {
		0% {
			opacity: 0;
		}
		16.66% {
			opacity: 0.25;
		}
		33.32% {
			opacity: 0.5;
		}
		49.98% {
			opacity: 0.75;
		}
		66.64% {
			opacity: 0.5;
		}
		83.33% {
			opacity: 0.25;
		}
		100% {
			opacity: 0;
		}
	}
</style>
