{% 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="/css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}

{% block assets %}
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}

{% block 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 %}