<!DOCTYPE html>
<html lang="en">
	{% load static %}
	{% load globals %}
	{% load bloomerp %}

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

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

			<!-- Logo -->
			<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' %}" class="d-none d-md-block" width="120" height="38">
				<img src="{% static 'bloomerp/img/logo-touch-icon.png' %}" class="d-md-none" width="30" height="30">
				</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="dropdown ms-md-4 ms-1" id="searchInputDropdown">
				<input 
					type="text" 
					class="form-control me-auto" 
					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" style="max-height: 80vh; overflow-y: auto;">
					
				</div>
			</div>
			<!--End Search bar-->
			
			
			<nav class="header-nav ms-auto">
				<ul class="d-flex align-items-center">
					<!--Todo-->
					<li class="nav-item">
						<a 
							data-bs-toggle="modal" 
							data-bs-target="#todoModal" 
							class="nav-link nav-icon position-relative" 
							hx-get="{% url 'components_todos' %}"
							hx-target="#todo-container"
							hx-swap="innerHTML"
							hx-trigger="click"
							href="#">
							<img src="{% static 'bloomerp/icons/notebook.svg' %}" width="20" height="20">
						</a>
					</li>
					<!--End Todo-->

					<!--AI-->
					<li class="nav-item">
						<a 
							data-bs-toggle="modal" 
							data-bs-target="#modal_bloom_ai" 
							class="nav-link nav-icon align-items-center" 
							href="#">
							<img src="{% static 'bloomerp/icons/ai.svg' %}" width="20" height="20">
						</a>
					</li>
					<!--End AI-->


					<!--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">
							{% avatar object=request.user class_name="rounded-circle" size=40 %}
							<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>
								<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"
								>
								<i class="bi bi-bookmark"></i>
								<span>Bookmarks</span>
								</a>
							</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>
					</li>
					<!-- End Profile Dropdown Items -->

				</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" hx-history-elt>
				{% block main %}
					{% if include_main_content %}
						{% include include_main_content %}
					{% endif %}
				{% endblock main %}
			</div>
		</main>
		<!-- End-->

		<!--Bloom AI modal-->
		{% include "snippets/llm_modal_snippet.html" with id="bloom_ai" title="Bloom AI" query_type="bloom_ai" %}
		<!--End Bloom AI modal-->

		<!--Messages wrapper-->
		{% include 'snippets/messages.html' %}
		<!--End messages wrapper-->

		<!--Todo-->
		{% include 'snippets/todo_modal.html' %}
		<!--End Todo-->
		


		<!--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.io/">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 -->


		<!-- 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>

		<!-- 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>

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

		<!--LLM-->
		<script src="{% static 'bloomerp/js/llm.js' %}"></script>

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

