<!DOCTYPE html>
<html>
    {% block head %}
        {% include 'core/base/_head.html' %}
    {% endblock head %}
    <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          hx-indicator=".loading-bar">
        <div class="drawer drawer-mobile min-h-full">
            <input id="left-sidebar-drawer" type="checkbox" class="drawer-toggle">
            <div class="drawer-content flex flex-col">
                {% block topbar %}
                    {% include 'core/base/topbar/_topbar.html' %}
                {% endblock %}
                <div class="flex-1 min-h-screen overflow-y-auto pt-8 px-6 pb-4 bg-base-200">
                    <div class="loading-bar"></div>
                    {% include 'core/base/breadcrumbs.html' with breadcrumb_first_load=True %}
                    <div id="messages_list">{% include 'core/base/toasts.html' %}</div>
                    <div id="modal_container">{# Leave here #}</div>
                    <div class="drawer">
                        <input id="service_list_drawer" type="checkbox" class="drawer-toggle" />
                        <div class="drawer-content" id="main_content">
                            {% block content %}
                            {% endblock content %}
                        </div>
                        {% block drawer %}
                            {% include "core/base/+left_drawer.html" %}
                        {% endblock drawer %}
                    </div>
                    <div class="fixed bottom-5 left-5 z-55 hidden md:block">
                        <ul class="menu menu-horizontal bg-base-100 rounded-box shadow-lg">
                            <li>
                                <label for="service_list_drawer"
                                       id="service_list_button"
                                       aria-label="close sidebar"
                                       class="swap-rotate drawer-overlay swap">
                                    <input type="checkbox" id="service_list_toggler" />
                                    <i class="fa fa-solid fa-ellipsis swap-off"></i>
                                    <i class="fa fa-solid fa-x swap-on"></i>
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
                <input type="checkbox" id="logout_modal" class="modal-toggle" />
                <div class="modal modal-responsive">
                    <div class="modal-box">
                        <h3 class="font-bold text-lg">Logout</h3>
                        <p class="py-4">Are you sure you would like to logout?</p>
                        <div class="modal-action">
                            <a href="{% url 'core:auth:logout' %}" class="btn btn-primary">Logout</a>
                            <label for="logout_modal" class="btn">
                                Go Back
                                <i class="fa-solid fa-reply ms-3"></i>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
