<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
      Django Adminator - {% block title %}{% endblock %}
    </title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css"
      integrity="sha512-1k7mWiTNoyx2XtmI96o+hdjP8nn0f3Z2N4oF/9ZZRgijyV4omsKOXEnqL1gKQNPy2MTSP9rIEWGcH/CInulptA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link type="text/css" href="{{ ASSETS_ROOT }}/css/index.css" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    
    <!-- Specific Page CSS goes HERE -->
    {% block stylesheets %}{% endblock stylesheets %}

  </head>
  <body class="app">
    <!-- @TOC -->
    <!-- =================================================== -->
    <!--
      + @Page Loader
      + @App Content
          - #Left Sidebar
              > $Sidebar Header
              > $Sidebar Menu

          - #Main
              > $Topbar
              > $App Screen Content
    -->

    <!-- @Page Loader -->
    <!-- =================================================== -->
    <div id='loader'>
      <div class="spinner"></div>
    </div>

    <script>
      window.addEventListener('load', function load() {
        const loader = document.getElementById('loader');
        setTimeout(function() {
          loader.classList.add('fadeOut');
        }, 300);
      });
    </script>

    <!-- @App Content -->
    <!-- =================================================== -->
    <div>

        {% include 'includes/sidebar.html' %}    

      <!-- #Main ============================ -->
      <div class="page-container">

        {% include 'includes/navigation.html' %}

        {% block content %}{% endblock content %} 

        {% include 'includes/footer.html' %}

      </div>

    </div>

    {% include 'includes/scripts.html' %}

    <!-- Specific Page JS goes HERE -->
    {% block javascripts %}{% endblock javascripts %}
    <script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
      $(document).ready(function() {
          $(".select-2").select2({ 
            theme: "bootstrap",
            minimumResultsForSearch: -1
          });
      });
      // $(document).ready(function() {
      //   (function(){
      //     var nativeAddClass = jQuery.fn.addClass;
      //     var nativeRemoveClass = jQuery.fn.removeClass;

      //       jQuery.fn.addClass = function(){
      //           var result = nativeAddClass.apply( this, arguments );
      //           jQuery(this).trigger('cssClassChanged');
      //           return result;
      //       }

      //       jQuery.fn.removeClass = function(){
      //           var result = nativeRemoveClass.apply( this, arguments );
      //           jQuery(this).trigger('cssClassChanged');
      //           return result;
      //       }
      //   })();

      //   $(function() {
      //       $("body").bind("cssClassChanged", function() {
      //           alert("trigger");
      //           localStorage.setItem("collapsed", $(this).hasClass("is-collapsed"));
      //       });
      //   });

      //   if (localStorage.getItem("collapsed") === "true") {
      //       $("body").addClass("is-collapsed");
      //   }
      // });
    </script>

</body>
</html>
