{% load static %}
<!DOCTYPE html>
<html lang="en" data-bs-theme="semi-dark">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Ironers Dashboard{% endblock %}</title>
    <link rel="icon" href="{% static 'assets/images/favicon-32x32.png' %}" type="image/png">

    <!-- CSS files -->
    <link href="{% static 'assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css' %}" rel="stylesheet">
    <link href="{% static 'assets/plugins/metismenu/metisMenu.min.css' %}" rel="stylesheet">
    <link href="{% static 'assets/plugins/metismenu/mm-vertical.css' %}" rel="stylesheet">
    <link href="{% static 'assets/plugins/simplebar/css/simplebar.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
    <link href="{% static 'assets/css/bootstrap-extended.css' %}" rel="stylesheet">
    <link href="{% static 'sass/main.css' %}" rel="stylesheet">
    <link href="{% static 'sass/semi-dark.css' %}" rel="stylesheet">
    <link href="{% static 'sass/responsive.css' %}" rel="stylesheet">
    {% block extra_css %}{% endblock %}
                <style>
                    /* Make footer sit after main content and not overlap page sections */
                    html, body { height: 100%; }
                    body { display: flex; flex-direction: column; min-height: 100vh; }
                    /* main wrapper should expand to fill available space so footer is pushed down */
                    .main-wrapper { flex: 1 0 auto; }
                    /* Ensure footer participates in normal flow and aligns with content area.
                         Use !important to override compiled CSS during development if the file is cached. */
                    .page-footer { position: static !important; margin-left: 260px !important; width: calc(100% - 260px) !important; padding: 1rem; background: transparent; }
                    @media only screen and (max-width: 1199px) {
                        .page-footer { margin-left: 0 !important; width: 100% !important; }
                    }
                </style>
</head>
<body>
    {% include "partials/header.html" %}
    {% include "partials/sidebar.html" %}

    <main class="main-wrapper">
        <div class="main-content">
            {% block content %}{% endblock %}
        </div>
    </main>

    {% include "partials/footer.html" %}

    <!-- JS files -->
    <script src="{% static 'assets/js/jquery.min.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js' %}"></script>
    <script src="{% static 'assets/plugins/metismenu/metisMenu.min.js' %}"></script>
    <script src="{% static 'assets/plugins/apexchart/apexcharts.min.js' %}"></script>
    <script src="{% static 'assets/plugins/peity/jquery.peity.min.js' %}"></script>
    <script src="{% static 'assets/plugins/simplebar/js/simplebar.min.js' %}"></script>
    <script src="{% static 'assets/js/main.js' %}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
