{% load static %}
<!DOCTYPE html>
<html>

  <head>
    <title>{% block title %}{% endblock %}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{% block description %}{% endblock %}">
    <meta name="keywords" content="{% block keywords %}{% endblock %}">
    <meta name="author" content="{% block author %}{% endblock %}">
    <link href="{% static 'css/styles.css' %}" rel="stylesheet">
    <!-- Google fonts for Cairo Medium and SemiBold -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
    <script src="//unpkg.com/alpinejs" defer></script>
    <script src="https://unpkg.com/htmx.org@1.8.5" integrity="sha384-7aHh9lqPYGYZ7sTHvzP1t3BAfLhYSTy9ArHdP3Xsr9/3TlGurYgcPBoFmXX2TX/w" crossorigin="anonymous"></script>
    <!-- detect dark or light mode -->
    <script src="{% static 'js/DetectMode.js' %}"></script>
    {% block extra_head %}{% endblock %}

    <style>
        #lottie{
            width:100%;
            height:100%;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }

    </style>
  </head>

  <body x-init="() => {const m = localStorage.getItem('colorMode');
            if (m !== 'dark' && m !== 'light') return;
            mode = m;
        }"
        class="h-screen dark:bg-black bg-stone/60 font-cairo" {% block body_id %}{% endblock %}>
    <div class="md:mx-auto lg:container">
      {% include "includes/_header.html" %}


      <div class="w-full">
        {% block messages %}{% include "partials/messages.html" %}{% endblock messages %}
      </div>

      {% comment %}body block is for use in forums{% endcomment %}
      {% block forum_body %}{% endblock %}

      <div class="md:px-11">
      {% block content_wrapper %}
        {% block subnav %}{% endblock %}
        {% block content %}{% endblock %}
      {% endblock %}
      </div>

      {% include "includes/_footer.html" %}
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>

    {% block footer_js %}{% endblock %}

    <script>
      var params = {
        container: document.getElementById('icon-container'),
        path: '{% static "animations/4dots.json" %}',
        renderer: 'svg',
        loop: true,
        autoplay: true,
        name: "4 Dots",
      };

      var mobileParams = {
        container: document.getElementById('icon-container-mobile'),
        path: '{% static "animations/4dots.json" %}',
        renderer: 'svg',
        loop: true,
        autoplay: true,
        name: "4 Dots",
      };

      var scene1Params = {
        container: document.getElementById('scene01'),
        path: '{% static "animations/Scene01/data.json" %}',
        renderer: 'svg',
        loop: true,
        autoplay: true,
        name: "4 Dots",
      };

      var scene3Params = {
        container: document.getElementById('scene03'),
        path: '{% static "animations/Scene03/data.json" %}',
        renderer: 'svg',
        loop: true,
        autoplay: true,
        name: "4 Dots",
      };

      anim = lottie.loadAnimation(params);
      mobileAnim = lottie.loadAnimation(mobileParams);
      anim2 = lottie.loadAnimation(scene1Params);
      anim3 = lottie.loadAnimation(scene3Params);
    </script>
  </body>

</html>
