<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }}</title>

    <!-- Bluma -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <link rel="stylesheet" href="/static/prism.css">

    <!-- Htmx -->
    <script src="https://unpkg.com/htmx.org@1.3.3" integrity="sha384-QrlPmoLqMVfnV4lzjmvamY0Sv/Am8ca1W7veO++Sp6PiIGixqkD+0xZ955Nc03qO" crossorigin="anonymous"></script>
    <script src="https://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
    <script src="/static/prism.js"></script>


    {% block style %}
    {% endblock %}

    <script>

    htmx.defineExtension('client-side-list-enabled-nunjucks', {
        transformResponse : function(text, xhr, elt) {
        var nunjucksTemplate = htmx.closest(elt, "[nunjucks-template]");
        if (nunjucksTemplate) {
                var data = {
                data: JSON.parse(text).map((item) => {
                    return item;
                })
                };

                var templateName = nunjucksTemplate.getAttribute('nunjucks-template');
                var template = htmx.find('#' + templateName);
                return nunjucks.renderString(template.innerHTML, data);
            }
            return text;
        }
    });
    </script>

</head>
<body class="section">
{% block header %}
{% include 'fragments/header.html' %}
{% endblock %}
<div class="container">
    {% block content %}
    {% endblock %}
</div>

{% block javascript %}

{% endblock %}
</body>
</html>
