{%  load static %}
{% load django_bootstrap5 %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} {% endblock %}</title>

    {# Load CSS and JavaScript #}
    {% bootstrap_css %}
    {% bootstrap_javascript %}
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
{#    <link href="{% static 'assets/img/favicon.png' %}" rel="icon">#}
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">

    <!-- Vendor CSS Files -->

    <link href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
    <link href="{% static 'assets/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
    <link href="{% static 'assets/vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
{##}
{#    <!-- Template Main CSS File -->#}
    <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">


    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://unpkg.com/htmx.org/dist/htmx.js"></script>
    <script src="https://unpkg.com/hyperscript.org@2.0.2"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        [x-cloak] {
            display: none !important;
        }
        h1 {
            @apply text-4xl font-bold mb-4
        }
        h2 {
            @apply text-xl font-bold mb-2
        }
        p {
            @apply mb-4
        }
        .button, button, [type='submit'], [type='button'] {
            @apply bg-indigo-600 text-white font-bold px-6 py-4 inline-block
            rounded-lg shadow-lg transition-all cursor-pointer
        }
        .button:hover, button:hover, [type='submit']:hover, [type='button']:hover {
            @apply bg-indigo-700
        }
        .button:active, button:active, [type='submit']:active, [type='button']:active {
            @apply scale-95
        }
        .button.alert, button.alert {
            @apply bg-red-700
        }
        .button.alert:hover, button.alert:hover {
            @apply bg-red-600
        }
        .button-red {
            @apply !bg-red-500 hover:!bg-red-600
        }
        .button-gray {
            @apply !bg-gray-300 hover:!bg-[#c3c9d0]
        }
        .navitems>li>a {
            @apply flex items-center gap-2 h-12 px-4 hover:bg-[rgba(31,41,55,0.3)] rounded-lg;
        }
        .hoverlist>* {
            @apply hover:bg-gray-100 rounded-md transition duration-150;
        }
        .hoverlist>*>a {
            @apply flex items-center p-2;
        }
        .highlight {
            @apply !bg-indigo-100;
        }
        .allauth content a {
            @apply underline underline-offset-2
        }
        .allauth content a:hover {
            @apply text-indigo-500
        }
        .allauth form[action="/accounts/signup/"] ul {
            @apply hidden
        }
        .allauth form[action="/accounts/signup/"] ul.errorlist {
            @apply block
        }
        .allauth .helptext {
            @apply block mt-4
        }
        label {
            @apply hidden
        }
        input[type=file] {
            @apply bg-white pl-0
        }
        .textarea, textarea, input {
            @apply w-full rounded-lg py-4 px-5 bg-gray-100
        }
        .errorlist li {
            @apply p-1 pl-4 border-l-red-500 border-l-4 border-solid mb-2 text-red-500
        }
        label[for="id_remember"] {
            @apply inline-block w-auto mr-2
        }
        input[name="remember"] {
            @apply w-auto
        }
        .alert-info { @apply bg-sky-600 }
        .alert-success { @apply bg-emerald-600 }
        .alert-warning { @apply bg-orange-600 }
        .alert-danger { @apply bg-red-600 }
    </style>


</head>

<body class="flex flex-col min-h-screen">
        {% include 'includes/messages.html' %}
        {% include 'includes/header.html' %}
        {% block layout %}
        {% endblock %}

            {% block javascript %}{% endblock %}
            {% include 'includes/footer.html' %}
</body>

</html>