{% load static %}
{% fragment as title %}
    {% block title %}
    {% endblock title %}
{% endfragment %}

<!DOCTYPE html>
<html lang="en">
    <!--begin::Head-->
    <head>
        <base href="" />
        <title>
            {{ title|default:"Backoffice" }} | dnoticias
        </title>
        <meta charset="utf-8" />
        <meta name="description"
              content=" The most advanced Bootstrap 5 Admin Theme with 40 unique prebuilt layouts on Themeforest trusted by 100,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel versions. Grab your copy now and get life-time updates for free. "/>
        <meta name="keywords"
              content=" metronic, bootstrap, bootstrap 5, angular, VueJs, React, Asp.Net Core, Rails, Spring, Blazor, Django, Express.js, Node.js, Flask, Symfony & Laravel starter kits, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon "/>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:type" content="article" />
        <meta property="og:title"
              content="Metronic - The World's #1 Selling Bootstrap Admin Template - Metronic by KeenThemes"/>
        <meta property="og:url" content="https://keenthemes.com/metronic" />
        <meta property="og:site_name" content="Metronic by Keenthemes" />
        <link rel="canonical" href="https://preview.keenthemes.com/metronic8" />
        <link rel="apple-touch-icon" sizes="180x180" href="{% static '/media/favicons/apple-icon-180x180.png' %}">
        <link rel="icon" type="image/png" sizes="16x16" href="{% static '/media/favicons/favicon-16x16.png' %}">
        <!--begin::Fonts(mandatory for all pages)-->
        <link rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700"/>
        <!--end::Fonts-->
        <!--begin::Vendor Stylesheets(used for this page only)-->
        <link href="{% static 'assets/plugins/custom/fullcalendar/fullcalendar.bundle.css' %}"
              rel="stylesheet"
              type="text/css"/>
        <link href="{% static 'assets/plugins/custom/datatables/datatables.bundle.css' %}"
              rel="stylesheet"
              type="text/css"/>
        <!--end::Vendor Stylesheets-->
        <!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
        <link href="{% static 'assets/plugins/global/plugins.bundle.css' %}"
              rel="stylesheet"
              type="text/css"/>
        <link href="{% static 'assets/css/style.bundle.css' %}"
              rel="stylesheet"
              type="text/css"/>
        <!--end::Global Stylesheets Bundle-->
        <script>
            // Frame-busting to prevent site from being loaded within a frame without permission (click-jacking)
            if (window.top != window.self) {
                window.top.location.replace(window.self.location.href);
            }
        </script>
        {% block styles %}
        {% endblock styles %}
        {% block scripts_head %}
        {% endblock scripts_head %}
    </head>
    <!--end::Head-->
    <!--begin::Body-->
    <body id="kt_app_body"
          data-kt-app-layout="dark-sidebar"
          data-kt-app-header-fixed="true"
          data-kt-app-sidebar-enabled="false"
          data-kt-app-sidebar-fixed="true"
          data-kt-app-sidebar-hoverable="false"
          data-kt-app-sidebar-push-header="true"
          data-kt-app-sidebar-push-toolbar="true"
          data-kt-app-sidebar-push-footer="true"
          data-kt-app-toolbar-enabled="true"
          data-kt-app-toolbar-fixed="false"
          class="app-default">
        <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
            <!--begin::Page-->
            <div class="app-page  flex-column flex-column-fluid " id="kt_app_page">
                {% include "./includes/header.html" %}
                <div class="app-wrapper  flex-column flex-row-fluid " id="kt_app_wrapper">
                    {% include "./includes/sidebar/menu.html" %}
                    <div class="app-main flex-column flex-row-fluid " id="kt_app_main">
                        <div class="d-flex flex-column flex-column-fluid">
                            <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
                                <!--begin::Toolbar container-->
                                <div id="kt_app_toolbar_container"
                                     class="app-container container-xxl d-flex flex-stack">
                                    <!--begin::Page title-->
                                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                                        <!--begin::Title-->
                                        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                                            {{ title }}
                                        </h1>
                                        <!--end::Title-->
                                        {% #breadcrumb %}
                                            {% fragment as category %}
                                                {% block breadcrumb_category %}
                                                {% endblock breadcrumb_category %}
                                            {% endfragment %}
                                            
                                            {% breadcrumb_item label="Backoffice" %}
                                            {% breadcrumb_bullet %}
                                            {% breadcrumb_item label=category %}
                                            {% breadcrumb_bullet %}
                                            {% breadcrumb_item label=title %}
                                        {% /breadcrumb %}
                                    </div>
                                    <!--end::Page title-->
                                    <!--begin::Actions-->
                                    <div class="d-flex align-items-center gap-2 gap-lg-3">
                                        {% block toolbar_actions %}
                                        {% endblock toolbar_actions %}
                                    </div>
                                    <!--end::Actions-->
                                </div>
                                <!--end::Toolbar container-->
                            </div>
                            <div id="kt_app_content" class="app-content  flex-column-fluid ">
                                <div id="kt_app_content_container" class="app-container  container-xxl">
                                    {% block content %}
                                    {% endblock content %}
                                </div>
                            </div>
                        </div>
                        {% include "./includes/footer.html" %}
                    </div>
                </div>
            </div>
            <!--end::Page-->
        </div>
        <!--begin::Javascript-->
        <script>var hostUrl = "{% static 'assets/' %}";</script>
        <!--begin::Global Javascript Bundle(mandatory for all pages)-->
        <script src="{% static 'assets/plugins/global/plugins.bundle.js' %}"></script>
        <script src="{% static 'assets/js/scripts.bundle.js' %}"></script>
        <!--end::Global Javascript Bundle-->
        <script>
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "newestOnTop": true,
                "progressBar": true,
                "positionClass": "toastr-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "3000",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            };

            {% for message in messages %}
            toastr.{{ message.tags }}("{{ message }}");
            {% endfor %}
        </script>
        {% block scripts %}
        {% endblock scripts %}
        <!--end::Javascript-->
    </body>
    <!--end::Body-->
</html>
