{% assign pageBase = "../../../" -%}
{% assign pageId = page.fileSlug -%}
{% assign pageClass = "html_ui" -%}
{%- layout "hippie/default.liquid" %}

{% block title %}{{ title }}{% endblock %}

{% block links %}
{{ block.super -}}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block script %}
{{ block.super -}}
<script src="/vendor/jquery.min.js"></script>
<script src="{{ pageBase }}js/globals.js"></script>
<script src="{{ pageBase }}js/app.js"></script>

<script>
	const frameHeader = document.querySelector('body > header.io');
	const closeActionElements = document.querySelectorAll('[data-action=close]');

	if (frameHeader) {
		console.log('frame header found', frameHeader);

		frameHeader.addEventListener('click', (e) => {
			if (e.target.dataset.action === 'close') {
				console.debug('close', e.target);

				history.back();

				if (closeActionElements.length > 1) {
					console.debug('other frames present', closeActionElements.length);
				}
			}
		});
	}
</script>
{% endblock %}