{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>{% block ecom_statics_browser_title %}Inicio | Ecom Statics{% endblock %}</title>

        <link rel="shortcut icon" href="{% block ecom_statics_favicon %}{% static 'ecom_statics/images/favicons/ecom.ico' %}{% endblock %}">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

        <meta name="color-scheme" content="light dark">

        <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)">

        <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">

        <meta name="title" content="AdminLTE 4 | Unfixed Sidebar">

        <meta name="author" content="ColorlibHQ">

        <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance.">

        <meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant">

        <meta name="supported-color-schemes" content="light dark">

        <link rel="preload" href="{% static 'ecom_statics/css/adminlte.css' %}" as="style">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css" integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q=" crossorigin="anonymous" media="print" onload="this.media='all'">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" crossorigin="anonymous">

        <link rel="stylesheet" href="{% static 'ecom_statics/css/adminlte.css' %}">
    </head>

    <body class="sidebar-expand-lg sidebar-open bg-body-tertiary">
        <div class="app-wrapper">
            {% block ecom_statics_header %}
                {% include 'ecom_statics/templates/base/header' %}
            {% endblock %}

            {% block ecom_statics_sidebar %}
                {% include 'ecom_statics/templates/base/sidebar' %}
            {% endblock %}

            {% block ecom_statics_content %}
                <main class="app-main">
                    <div class="app-content-header">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-6"><h3 class="mb-0">Unfixed Layout</h3></div>

                                <div class="col-sm-6">
                                    <ol class="breadcrumb float-sm-end">
                                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Unfixed Layout</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="app-content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Title</h3>
                                            
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
                                                    <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
                                                    <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
                                                </button>
                                                <button type="button" class="btn btn-tool" data-lte-toggle="card-remove" title="Remove">
                                                    <i class="bi bi-x-lg"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="card-body">Start creating your amazing application!</div>

                                        <div class="card-footer">Footer</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            {% endblock %}

            {% block ecom_statics_footer %}
                {% include 'ecom_statics/templates/base/footer' %}
            {% endblock %}
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <script src="{% static 'ecom_statics/js/adminlte.js' %}"></script>
        
        <script>
            const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
            const Default = {
                scrollbarTheme: 'os-theme-light',
                scrollbarAutoHide: 'leave',
                scrollbarClickScroll: true
            };

            document.addEventListener('DOMContentLoaded', function () {
                const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);

                if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
                    OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
                        scrollbars: {
                            theme: Default.scrollbarTheme,
                            autoHide: Default.scrollbarAutoHide,
                            clickScroll: Default.scrollbarClickScroll
                        }
                    });
                }
            });
        </script>
    </body>
</html>
