<!DOCTYPE html>
{% load static %}

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>
            Django Adminator - {% block title %}{% endblock %}
        </title>

        <link type="text/css" rel="stylesheet" href="{% static '/css/bootstrap.css' %}" />
        <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
        <link type="text/css" rel="stylesheet" href="{% static '/css/colours.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/datepicker.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/fontawesome.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/themify-icons.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/perfectscrollbar.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/adminator.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/jquery.dataTables.min.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/select2.min.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% static '/css/wavebtn.css' %}">
        <link type="text/css" rel="stylesheet" href="{% static '/css/index.css' %}" />

        <!-- Specific Page CSS goes HERE -->
        {% block stylesheets %}{% endblock stylesheets %}

    </head>
    <body class="app" data-bs-theme="light">

        <!-- @TOC -->
        <!-- =================================================== -->
        <!--
        + @Page Loader
        + @App Content
            - #Left Sidebar
                > $Sidebar Header
                > $Sidebar Menu

            - #Main
                > $Topbar
                > $App Screen Content
        -->

        <!-- @Page Loader -->
        <!-- =================================================== -->
        <div id='loader' class="bg-body">
            <div class="spinner"></div>
        </div>

        <script>
            window.addEventListener('load', function load() {
                const loader = document.getElementById('loader');
                setTimeout(function() {
                    loader.classList.add('fadeOut');
                }, 300);
            });
        </script>

        <!-- @App Content -->
        <!-- =================================================== -->
        <div>

            {% include 'includes/sidebar.html' %}    

            <!-- #Main ============================ -->
            <div class="page-container">

                {% include 'includes/navigation.html' %}

                {% block content %}{% endblock content %} 

                {% include 'includes/footer.html' %}

            </div>

        </div>

        {% include 'includes/toasts.html' %}

        <script>
            const CSRF_MiddlewareToken = "{{ csrf_token }}";
            const currentUserId = "{{ request.user.id }}";
        </script>

        {% include 'includes/scripts.html' %}

        <!-- Specific Page JS goes HERE -->
        {% block javascripts %}{% endblock javascripts %}
        <script>
            $(document).ready(function() {
                $(".select-2").each(function() {
                    var dropdownParent = $(this).attr("data-dropdownparent");
                    $(this).select2({
                        theme: "bootstrap",
                        minimumResultsForSearch: 5,
                        dropdownParent: dropdownParent
                    })
                })
                // $(".select-2").select2({ 
                //     theme: "bootstrap",
                //     minimumResultsForSearch: 5
                // });
            });
        </script>

    </body>
</html>
