{% block inside %}
<!DOCTYPE html>
{% load static %}
{% load globals %}

<html lang="en">

  <head>
    {% include "snippets/head.html" %}
  </head>

  <body class="toggle-sidebar" id="bloomerpBody">
    {% block body %}

    <!--Header -->
    <header id="header" class="header fixed-top d-flex align-items-center">

      <div class="d-flex align-items-center justify-content-between">
        <a  
			hx-get="{% url "bloomerp_home_view" %}"
			hx-target="#main-content"
			hx-swap="innerHTML"
			hx-push-url="true"
			class="d-flex align-items-center pointer">
          <img src="{% static 'bloomerp/img/logo.png' %}" width="120" height="38">
        </a>
        <i class="bi bi-list toggle-sidebar-button" onclick="document.getElementById('bloomerpBody').classList.toggle('toggle-sidebar')"></i>
      </div><!-- End Logo -->

      <!--Search bar-->
      <div class="search-bar">
          <div class="dropdown" id="searchInputDropdown">
              <input 
                type="text" 
                class="form-control" 
                id="searchInput" 
                name="search_results_query" 
                placeholder="Search (ctrl + q)" 
                autocomplete="off"
                data-bs-toggle="dropdown" 
                aria-expanded="false" 
                hx-get="{% url 'components_search_results'%}" 
                hx-trigger="keyup delay:300ms" 
                hx-target="#searchResult">

              <div class="dropdown-menu" aria-labelledby="searchInput" id="searchResult">
                  
              </div>
          </div>
      </div>
      <!--End Search bar-->
    
      


      <nav class="header-nav ms-auto">
          <ul class="d-flex align-items-center">

			<!--Search Icon-->
			<li class="nav-item d-block d-lg-none">
				<a class="nav-link nav-icon search-bar-toggle " href="#">
					<i class="bi bi-search"></i>
				</a>
			</li>
			<!-- End Search Icon-->
			
			<!--Bookmarks dropdown-->
			<li class="nav-item dropdown pe-3">
				<a class="nav-link nav-icon align-items-center" href="#" data-bs-toggle="dropdown">
					<img src="{% static 'bloomerp/icons/bookmark.svg' %}" alt="Bookmarks" height="20" width="20">
				</a>
				<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow bookmarks">
					<li class="dropdown-header">
						<h6>Latest bookmarks</h6>
					</li>
					<li>
						<hr class="dropdown-divider">
					</li>
					{% for bookmark in request.user.latest_bookmarks %}
					<li>
						<a 
							hx-get="{{ bookmark.object.get_absolute_url }}"
							hx-target="#main-content"
							hx-swap="innerHTML"
							hx-push-url="true"
							class="dropdown-item d-flex align-items-center" href="#">
							<span>{{ bookmark.object }}</span>
						</a>
					</li>
					{% endfor %}
					<li>
						<hr class="dropdown-divider">
					</li>
					<li>
						<a 
							class="dropdown-item d-flex align-items-center pointer"
							hx-get="{% url 'bookmarks_user_bookmarks' %}"
							hx-target="#main-content"
							hx-swap="innerHTML"
							hx-push-url="true"
						>
							<span>View all bookmarks</span>
						</a>
					</li>
					
				</ul>
			</li>



            <!--Profile dropdown-->
            <li class="nav-item dropdown pe-3">

				<!--Profile dropdown button-->
				<a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
					<img src={% if request.user.avatar %} {{request.user.avatar.url}} {% else %}"{% static 'basic.jpg' %}" {% endif %} alt="Profile" class="rounded-circle">
					<span class="d-none d-md-block dropdown-toggle ps-2">
						{{request.user.first_name}} {{request.user.last_name}}
					</span>
				</a>

				<!--Profile Dropdown Items-->
             	<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
					<li class="dropdown-header">
						<h6>{{request.user.username}}</h6>
					</li>

					<li>
						<hr class="dropdown-divider">
					</li>

					<li>
						<a 
							class="dropdown-item d-flex align-items-center pointer"
							hx-get="{% url 'users_my_profile_overview' %}"
							hx-target="#main-content"
							hx-swap="innerHTML"
							hx-push-url="true"
						>
							<i class="bi bi-gear"></i>
							<span>Account Settings</span>
						</a>
					</li>

					{% if request.user.is_staff %}
					<li>
						<hr class="dropdown-divider">
					</li>
					
					<li>
						<a class="dropdown-item d-flex align-items-center" href="/admin/">
							<i class="bi bi-hammer"></i>
							<span>Admin page</span>
						</a>
					</li>
					{% endif %}

					<li>
						<hr class="dropdown-divider">
					</li>


					<li>
						<form action="{% url 'logout' %}" method="post">
							{% csrf_token %}
							<button type="submit" class="dropdown-item d-flex align-items-center">
								<i class="bi bi-box-arrow-right"></i>
								<span>Sign Out</span>
							</button>
						</form>
					</li>
              	</ul>
			  <!-- End Profile Dropdown Items -->

            </li>
            <!-- End Profile Nav -->

          </ul>
      </nav>
      <!-- End Icons Navigation -->

    </header>
    <!-- End Header -->

    <!-- Sidebar -->
    {% include 'snippets/sidebar.html' %}
    <!-- End Sidebar-->

    <!--Main -->
    <main id="main" class="main">
		<div id="main-content" class="container">
			{% block main %}
				{% if include_main_content %}
					{% include include_main_content %}
				{% endif %}
			{% endblock main %}
		</div>
    </main>
    <!-- End-->

	<!--Messages wrapper-->
	<div id="messages-wrapper" class="messages-wrapper">
	
	</div>
	<!--End messages wrapper-->


    <!--Footer -->
    <footer id="footer" class="footer">
      <div class="copyright">
        &copy; Copyright <strong><span>BloomERP</span></strong>. All Rights Reserved
      </div>
      <div class="credits">
        
        Designed by <a href="https://www.bloomerp.com/">BloomERP</a>
      </div>
    </footer>
    <!-- End Footer -->

    <!-- Back to top button -->
    <a href="#" class="back-to-top d-flex align-items-center justify-content-center">
      <i class="bi bi-arrow-up-short"></i>
    </a>
    <!-- End Back to top button -->

   
  {% endblock body %}
    <!-- Bootstrap -->
    <script src="{% static 'bloomerp/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

	<!--Simple datatable-->
    <script src="{% static 'bloomerp/vendor/simple-datatables/simple-datatables.js' %}"></script>

	<!--Validate email-->
    <script src="{% static 'bloomerp/vendor/php-email-form/validate.js' %}"></script>

    <!-- Template Main JS File -->
    <script src="{% static 'bloomerp/js/main.js' %}"></script>

	<!--Bloomerp messages-->
	<script src="{% static 'bloomerp/js/messages.js' %}"></script>
	
	  <!--Bloomerp forms-->
    <script src="{% static 'bloomerp/js/bloomerpForms.js' %}"></script>

	  <!--Quil editor-->
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

    <!--Hotkeys-->
    <script src="{% static 'bloomerp/js/hotkeys.js' %}"></script>
    {% block scripts %}
    
    {% endblock scripts %}
    

    
  </body>

</html>

{% endblock inside %}

{% block outside %}

{% endblock outside %}