{% 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 %}
                "bootstrap": "{% static "vendor/bootstrap5/js/bootstrap.bundle.min.js" %}",
                "debusine": "{% static "web/js/debusine.js" %}",
                "popper": "{% static "vendor/popperjs2/popper.min.js" %}"
            {% endblock %}
            }
        }
            </script>
        {% endblock %}
    </head>
    <body>
        {% block navbar %}
            <nav class="navbar navbar-expand-lg bg-body-tertiary mb-3">
                <div class="container-fluid">
                    <ul id="navbar-homepage" class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a id="navbar-homepage-link"
                               class="navbar-brand btn"
                               href="{% url 'homepage:homepage' %}">
                                <img src="{% static 'web/icons/debusine.png' %}"
                                     height="25"
                                     alt="Homepage"
                                     class="d-inline-block align-text-top">
                                {% block navbar_brand_name %}Debusine{% endblock %}
                            </a>
                        </li>
                    </ul>
                    <button class="navbar-toggler"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#navbarSupportedContent"
                            aria-controls="navbarSupportedContent"
                            aria-expanded="false"
                            aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul id="navbar-left" class="navbar-nav me-auto mb-2 mb-lg-0">
                            {% block navbar_left %}{% endblock %}
                        </ul>
                        <ul id="navbar-right" class="navbar-nav mb-2 mb-lg-0">
                            {% if user.is_authenticated %}
                                <li class="nav-item dropdown">
                                    <a class="nav-link btn btn-debusine dropdown-toggle"
                                       href="#"
                                       role="button"
                                       data-bs-toggle="dropdown"
                                       aria-expanded="false"><span class="bi {% icon "user" %}"></span> {{ user.username }}</a>
                                    <ul class="dropdown-menu" id="navbar-user-actions">
                                        <li>
                                            <a class="dropdown-item"
                                               href="{% url "user:detail" username=user.username %}">{{ user.get_full_name }}
                                                <br>
                                                <small class="ms-1">{{ user.username }}</small>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                               href="{% url "user:token-list" username=user.username %}">Tokens</a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item"
                                               href="{% url "user:groups" username=user.username %}">Groups</a>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li>
                                            <form id="logout-form"
                                                  class="dropdown-item"
                                                  method="post"
                                                  action="{% url "logout" %}">
                                                {% csrf_token %}
                                                <button type="submit">Log out</button>
                                            </form>
                                        </li>
                                    </ul>
                                </li>
                            {% else %}
                                <li class="nav-item">
                                    {% if is_logout_view or is_login_view %}
                                        <a class="nav-link btn btn-debusine" href="{% url "login" %}"><span class="bi {% icon 'user' %}"></span> Log in</a>
                                    {% else %}
                                        <a class="nav-link btn btn-debusine"
                                           href="{% url "login" %}?next={{ request.get_full_path }}"><span class="bi {% icon 'user' %}"></span> Log in</a>
                                    {% endif %}
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </nav>
        {% 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>
        <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">
            import "popper";
            import "bootstrap";

            // 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>
