<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    {% block additional_styles %}{% endblock %}
    {% block custom_styles %}{% endblock %}
    
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <!-- Sidebar -->
      <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark collapse d-md-flex" id="sidebar">
        
        <!-- Sidebar - Brand -->
        {% block sidebar_brand %}
          <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{ route('/') }}">
            <img class="sidebar-logo" src="{{ route('/adminUI/assets/logo-placeholder-png.png') }}">
          </a>
        {% endblock %}

        <!-- Divider -->
        <hr class="sidebar-divider my-0" style="background: rgba(255,255,255, 0.3)">

        <!-- Nav Items -->
        {% block sidebar_nav_items %}{% endblock %}

        <div class="d-flex justify-content-center shrink-container">
          <button id="sidebar-shrink">
              <i class="fas fa-chevron-left"></i>
          </button>
        </div>
  
      </ul>
      <!-- / Sidebar -->
      
      <!-- Content Wrapper -->
      <div id="content-wrapper" class="flex flex-column">
        
        <!-- Main Content -->
        <div id="content">

          <!-- Topbar -->
          <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

            <!-- Sidebar Toggle (Topbar) -->
            <button 
              id="sidebarToggleTop" 
              class="btn btn-link d-md-none rounded-circle mr-3"
              type="button"
              data-toggle="collapse"
              data-target="#sidebar"
              aria-controls="sidebar"
              aria-expaneded="true"
            >
              <i class="fa fa-bars"></i>
            </button>

            <!-- Topbar Navbar -->
            <ul class="navbar-nav ml-auto">

              <!-- Nav Items -->
              {% block topbar_nav_items %}{% endblock %}

            </ul>

          </nav>
          <!-- / Topbar -->

          <!-- Page Content -->
          <div class="container-fluid">

              {% block body %}{% endblock %}
          
          </div>
            <!-- / Page Content -->

        </div>
        <!-- / Main Content -->

      </div>
      <!-- / Content Wrapper -->
    <div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script>
      var $shrinkButton = $('#sidebar-shrink');
      var $shrinkButtonIcon = $('#sidebar-shrink i').first();
      $shrinkButton.click(function () {
        var $sidebar = $('.sidebar').first();
        if ($sidebar.hasClass('shrinked-sidebar')) {
          $sidebar.removeClass('shrinked-sidebar');
          $shrinkButtonIcon.removeClass('fa-chevron-right');
          $shrinkButtonIcon.addClass('fa-chevron-left');
        } else {
          $sidebar.addClass('shrinked-sidebar');
          $shrinkButtonIcon.removeClass('fa-chevron-left');
          $shrinkButtonIcon.addClass('fa-chevron-right');
        }
      }); 
    </script>
    {% block additional_scripts %}{% endblock %}
    {% block custom_scripts %}{% endblock %}
  </body>
</html>