{% load static %} {% load i18n %}
<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}" data-bs-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="mobile-web-app-capable" content="yes" />
    <title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
    <link href="{% static 'css/themes/cosmo/_variables.scss' %}" rel="stylesheet" />
    <link href="{% static 'css/custom.css' %}" rel="stylesheet" />
    {% if LANGUAGE_CODE == 'ar' %}
    <link href="{% static 'css/themes/cosmo/bootstrap.rtl.css' %}" rel="stylesheet" />
    {% else %}
    <link href="{% static 'css/themes/cosmo/bootstrap.css' %}" rel="stylesheet" />
    {% endif %}
    <link href="{% static 'css/themes/cosmo/_bootswatch.scss' %}" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.5/dist/sweetalert2.all.min.js"></script>    

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <style>
      body {
          min-height: 100vh;
          text-transform: uppercase;
      }
small, .small {
  font-size: 0.9rem;
    line-height: 0;
}
     .btn {
          text-transform: uppercase;
      }

    </style>
  </head>
  <body>
    {% include 'header.html' %}
    {% include 'messages.html' %}
    
    {% block content %}
    <!-- Main content goes here -->
    {% endblock %}

    

    <!-- JavaScript Files -->

    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
    <script>                  
      document.addEventListener('DOMContentLoaded', () => {
    /*$('.form-select').select2({
      theme: 'bootstrap4',
      });*/
    'use strict';

    // Fetch all the forms with the "needs-validation" class
    const forms = document.querySelectorAll('.needs-validation');

    // Loop over them and add submit event listeners
    forms.forEach(form => {
        form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }
            form.classList.add('was-validated');
        });
    });
});
          

      const themeButtons = document.querySelectorAll("[data-bs-theme-value]");

      function changeTheme(theme) {
        document.documentElement.setAttribute("data-bs-theme", theme);

        themeButtons.forEach((button) => {
          const isActive = button.getAttribute("data-bs-theme-value") === theme;
          button.setAttribute("aria-pressed", isActive.toString());
        });
      }

      themeButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const theme = button.getAttribute("data-bs-theme-value");
          changeTheme(theme);
        });
      });

      const defaultTheme = "light";
      const savedTheme = localStorage.getItem("theme") || defaultTheme;
      changeTheme(savedTheme);

      themeButtons.forEach((button) => {
        button.addEventListener("click", () => {
          const theme = button.getAttribute("data-bs-theme-value");
          localStorage.setItem("theme", theme);
        });
      });
      
      
    </script>
  </body>
</html>
