<?php $dontShowFooter = isset($dont_show_footer) && $dont_show_footer === true ?>

<?php if (!$dontShowFooter): ?>
<div class="container content-footer <?= remember("") ?>">
	<div class="content-footer-socials">
		<a href="https://www.instagram.com/thealit_fkl/" class="block link">Instagram</a>
		<a href="https://www.thealit.de" class="block link">Thealit</a>
		<a href="https://www.thealit.de/newsletter" class="block link">Newsletter</a>
	</div>
	
	<div class="text-12">
		<?php $impressum = $pages->findBy('uid', 'impressum') ?>
		<a href="<?= $impressum->url() ?>" class="link"><?= $impressum->title() ?></a>
		<?php $datenschutz = $pages->findBy('uid', 'datenschutzerklaerung') ?>
		<a href="<?= $datenschutz->url() ?>" class="link"><?= $datenschutz->title() ?></a>
	</div>
</div>
<?php endif ?>

</div>

<footer class="font-kobata text-40 uppercase border-top container" style="line-height:1;letter-spacing:1.5rem">Re Capitulating. Queer</footer>

<script src="<?= url('assets/siema.min.js') ?>"></script>

<script defer>
	const $menu = document.getElementById('menu')
	const $open = document.getElementById('menu_open')
	const $close = document.getElementById('menu_close')

	$open.addEventListener('click', () => {
		$menu.classList.add('flex')
		$open.classList.remove('flex')
		$close.classList.add('flex')
	})
	$close.addEventListener('click', () => {
		$menu.classList.remove('flex')
		$open.classList.add('flex')
		$close.classList.remove('flex')
	})

	for (const $embed of document.querySelectorAll('.embed')) {
		$embed.addEventListener('click', () => {
			const $iframe = $embed.querySelector('iframe')
			$iframe.src = $iframe.dataset.src + '&autoplay=1&autopause=0'
			const $iframeDiv = $embed.querySelector('.iframe')
			$iframeDiv.style.display = 'block'
			$iframeDiv.classList.add('active')
			$embed.querySelector('img').style.display = 'none'
		})
	}

	const $audios = document.getElementsByTagName('audio')
	for (const $audio of $audios) {
		$audio.addEventListener('play', () => {
			for (const $a of $audios) {
				if ($a != $audio) $a.pause()
			}
		})
	}

	function siemaResize() {
		const $div = this.innerElements[this.currentSlide]
		const height = $div.offsetHeight
		if (height !== 0) {
			this.selector.style.height = `${height}px`
		}
	}

	for (const $siema of document.querySelectorAll('.siema')) {
		const instance = new Siema({
			selector: $siema.querySelector('.siema-gallery'),
			onInit: function () {
				const $img = this.innerElements[this.currentSlide].querySelector('img')
				if ($img.complete) siemaResize.call(this)
				else $img.addEventListener('load', () => siemaResize.call(this))
			},
			onChange: siemaResize
		})

		const $prev = document.createElement('button')
		$prev.className = 'prev'; $prev.innerHTML = '←'
		const $next = document.createElement('button')
		$next.className = 'next'; $next.innerHTML = '→'
		$siema.appendChild($prev); $siema.appendChild($next)
		$prev.addEventListener('click', () => instance.prev())
		$next.addEventListener('click', () => instance.next())
	}
</script>
</body>
</html>