{% load static django_htmx django_bootstrap5 %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="format-detection" content="telephone=no">
        <title>{% block title %}CharaSheet - Gérez votre personnage de Chroniques Oubliées{% endblock %}</title>
        {% include "common/icons.html" %}
        {% include "common/opengraph.html" %}

        <link rel="stylesheet" href="{% static "vendor/bootstrap-5.3.2/bootstrap.min.css" %}">
        <link rel="stylesheet" href="{% static "vendor/fontawesome-6.5.1/css/fontawesome.min.css" %}">
        <link rel="stylesheet" href="{% static "vendor/fontawesome-6.5.1/css/brands.min.css" %}">
        <link rel="stylesheet" href="{% static "vendor/fontawesome-6.5.1/css/solid.min.css" %}">
        <style>
            body {
                margin-bottom: 2em;
                touch-action: manipulation;
            }
        </style>
        <link rel="stylesheet" href="{% static "style.css" %}">
        {% block head_end %}
        {% endblock %}
    </head>
    <body class="d-flex flex-column min-vh-100 mb-0">
        {% include "common/navbar.html" %}
        <main class="mb-4">
            <div class="container-fluid">
                {% bootstrap_messages %}
                {% block content %}
                {% endblock %}
            </div>
        </main>
        {% include "common/footer.html" %}

        <script src="{% static 'vendor/htmx-1.9.10.min.js' %}" defer></script>
        {% django_htmx_script %}
        {% if debug %}
            <script type="javascript">
                if (typeof window.htmx !== "undefined") {
                    htmx.on("htmx:afterSettle", function(detail) {
                        if (
                            typeof window.djdt !== "undefined"
                            && detail.target instanceof HTMLBodyElement
                        ) {
                            djdt.show_toolbar();
                        }
                    });
                }
            </script>
        {% endif %}
        <script src="{% static "vendor/bootstrap-5.3.2/bootstrap.bundle.min.js" %}"></script>
        <script type="application/javascript" defer>
            let tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            let tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
            addEventListener("refresh_tooltips", function (event) {
                tooltipList.forEach(tooltip => tooltip.dispose());
                tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
                tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
            });
        </script>
    </body>
</html>
