{% load static %}

<!DOCTYPE html>

<html lang="en" data-bs-theme="light">
    {# block for main header content #}
    {% block mainheader %}
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        {# block to set favicon #}
        {% block favicon %}{% endblock favicon %}

        {# block for project defined HEAD content #}
        {% block project_head %}
        <link href="{% static 'node_modules/@fortawesome/fontawesome-free/css/all.min.css' %}" rel="stylesheet">
        <link href="{% static 'node_modules/animate.css/animate.compat.css' %}" rel="stylesheet">
        <link href="{% static 'node_modules/hover.css/css/hover.css' %}" rel="stylesheet">
        <link href="{% static 'handyhelpers/css/sidebar.css' %}" rel="stylesheet">
        {% endblock project_head %}

        {# block for project level theme(s) #}
        {% block project_theme %}
        <link href="{% static 'node_modules/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
        {% endblock project_theme %}

        {# block for additional project level content #}
        {% block project_head_extra %}{% endblock project_head_extra %}

        {# block for app defined HEAD content #}
        {% block app_head %}{% endblock app_head %}

        {# block for page defined HEAD content #}
        {% block page_head %}{% endblock page_head %}

        {# block for locally defined HEAD content #}
        {% block local_head %}{% endblock local_head %}

    </head>
    {% endblock mainheader %}

    {% block body %}
    <body>
        <div class="body_inner_wrapper">
            {% block sidebar %}{% endblock sidebar %}

            <div class="body_content_wrapper" id="body_content_wrapper">
                {% block mainnavbar %}{% endblock mainnavbar %}

                {# block to display django messages #}
                {% block messages %}
                    {% include 'handyhelpers/component/bs5/show_messages.htm' %}
                {% endblock messages %}

                {# include toasts #}
                <div aria-live="polite" aria-atomic="true" class="position-relative">
                    <div class="toast-container position-fixed top-0 end-0 p-3"></div>
                </div>

                <main class="content px-3 py-2" id="body_main">
                    {% block content %}Default Content - Local page should overwrite this{% endblock content %}
                </main>

                {% block modals %}
                {% if not disable_modals_in_base %}
                {% include 'handyhelpers/htmx/bs5/generic_modal.htm' %}
                {% endif %}
                {% endblock modals %}

                {% block mainfooter %}{% endblock mainfooter%}
            </div>
        </div>

        {# project Javascript Functions #}
        {% block project_javascript %}
        <script type="text/javascript" src="{% static 'node_modules/jquery/dist/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'node_modules/@popperjs/core/dist/umd/popper.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'node_modules/bootstrap/dist/js/bootstrap.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'node_modules/htmx.org/dist/htmx.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'handyhelpers/js/sidebar.js' %}"></script>
        {% endblock project_javascript %}

        {# block for additional project level javascript #}
        {% block project_javascript_extra %}{% endblock project_javascript_extra %}

        {# app Javascript Functions #}
        {% block app_javascript %}{% endblock app_javascript %}

        {# page Javascript Functions #}
        {% block page_javascript %}{% endblock page_javascript %}

        {# Local Javascript Functions #}
        {% block local_javascript %}{% endblock local_javascript %}

        {# Global Javascript Functions #}
        <script>
            //{# Django CSRF Functions for AJAX Calls #}
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            function csrfSafeMethod(method) {
                //{# these HTTP methods do not require CSRF protection #}
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }
            var csrftoken = getCookie('csrftoken');
        </script>
    <script>
        // Function to create and show a toast
        function showToast(message) {
            const toastContainer = document.querySelector('.toast-container');
            const toastElement = document.createElement('div');
            toastElement.classList.add('toast');
            toastElement.setAttribute('role', 'alert');
            toastElement.setAttribute('aria-live', 'assertive');
            toastElement.setAttribute('aria-atomic', 'true');
            toastElement.setAttribute('data-bs-delay', '5000');
            toastElement.innerHTML = `
                <div class="toast-header">
                    <strong class="me-auto">Notification</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    ${message}
                </div>
            `;
            toastContainer.appendChild(toastElement);
            const toast = new bootstrap.Toast(toastElement);
            toast.show();
        }

        // Check for HTMX response headers
        document.addEventListener('htmx:afterRequest', (event) => {
            const message = event.detail.xhr.getResponseHeader('X-Toast-Message');
            if (message) {
                showToast(message);
            }
        });
    </script>

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