{% load static %}
{% load debusine %}
<!DOCTYPE html>
<html lang="en"{% if theme %} data-bs-theme="{{ theme }}"{% endif %}>
    <head>
        {% block head %}
            {% if not theme %}
                <script blocking="render">
                (function() {
                    let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
                    let [html] = document.getElementsByTagName("html");
                    html.setAttribute("data-bs-theme", theme);
                })();
                </script>
            {% endif %}
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            {{ place.as_head_title }}
            <link rel="shortcut icon"
                  type="image/png"
                  href="{% static "web/icons/debusine.png" %}">
            <link rel="stylesheet"
                  type="text/css"
                  href="{% static "web/css/debusine.css" %}">
            <link rel="stylesheet"
                  type="text/css"
                  href="{% static "web/css/debusine-code-highlight.css" %}">
            <link rel="stylesheet"
                  type="text/css"
                  href="{% static "vendor/bootstrap5/css/bootstrap.min.css" %}">
            {# Currently unpackaged: see https://forgejo.debian.net/web/bootstrap-icons/src/branch/debian/debian/TODO. #}
            <link rel="stylesheet"
                  href="{% static "web/vendor/bootstrap-icons/css/bootstrap-icons.min.css" %}">
            <script type="importmap">
        {
            "imports": {
            {% block importmap %}
                "debusine": "{% static "web/js/debusine.js" %}"
            {% endblock %}
            }
        }
            </script>
            <script src="{% static "vendor/bootstrap5/js/bootstrap.bundle.min.js" %}"
                    defer></script>
        {% endblock %}
    </head>
    <body>
        {% block navbar %}{% endblock %}
        <div aria-live="polite"
             aria-atomic="true"
             class="position-relative"
             id="user-message-container">
            <div class="toast-container position-absolute top-0 end-0 p-3">
                {% for message in messages %}
                    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header text-bg-{{ message|message_toast_color_class }}">
                            <span class="{{ message|message_toast_header_icon }} me-1"></span>
                            <strong class="me-auto">{{ message.level_tag|capfirst }}</strong>
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="toast"
                                    aria-label="Close"></button>
                        </div>
                        <div class="toast-body">{{ message }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% block breadcrumbs %}
            <div id="breadcrumbs" class="container-fluid mb-3">{{ place.as_breadcrumbs }}</div>
        {% endblock %}
        <div class="container-xxl">
            {% if messages %}
                <noscript>
                    {% for message in messages %}
                        <div class="alert alert-{{ message|message_toast_color_class }}"
                             role="alert">
                            <span class="{{ message|message_toast_header_icon }} me-1"></span>
                            {{ message }}
                        </div>
                    {% endfor %}
                </noscript>
            {% endif %}
            {% block main-layout %}
                {% block pagetitle %}{{ place.as_page_title }}{% endblock %}
                {% block content %}{% endblock %}
            {% endblock %}
        </div>
        <footer class="mt-3 border-top text-muted container-fluid text-center pt-2">
            {% block footer %}
                {% include "web/footer.html" %}
            {% endblock %}
        </footer>
        {% block tail_js %}
            <script type="module">
            // Enable Toast
            let toastElList = [].slice.call(document.querySelectorAll('.toast'));
            toastElList.map(function (toastEl) {
                let toast = new bootstrap.Toast(toastEl, {autohide:false});
                toast.show()
            })

            // Enable Popovers
            document.querySelectorAll('[data-bs-toggle="popover"]').forEach((popoverTriggerEl) => {
                new bootstrap.Popover(popoverTriggerEl);
            });

            // By default, Bootstrap handles Alt+Left/Right and use it to
            // change tabs (see https://github.com/twbs/bootstrap/issues/38565).
            // Capture Alt+Left/Right and let the browser do its default
            // (commonly backwards/forwards in history)
            const tablist = document.getElementById("nav-tab");

            if (tablist) {
                tablist.addEventListener(
                    "keydown",
                    (e) => {
                        if (e.altKey && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
                            // Stop the event before Bootstrap sees it,
                            // but allow the browser to handle its default (back/forward)
                            e.stopPropagation();
                        }
                    },
                    true // before Bootstrap's listener
                )
            }
            </script>
        {% endblock %}
    </body>
</html>
