{% load bloomerp %}

<aside id="sidebar" class="sidebar">
    <ul class="sidebar-nav" id="sidebar-nav">
		<li 
			class="nav-heading pointer dropdown-toggle"
			data-bs-toggle="collapse"
			data-bs-target="#personalWorkspaces"
			>Personal workspaces</li>

		<!-- Personal workspaces -->
		<div id="personalWorkspaces" class="collapse show">
		{% for workspace in request.user.workspaces %}
			<li class="nav-item">
				<a class="nav-link collapsed pointer" hx-get="{% url 'view_workspace' workspace.pk %}" hx-target="#main-content" hx-push-url="true">
				<span>{{ workspace.name }}</span>
				</a>
			</li>
		{% endfor %}
		</div>
		
		<!-- Model workspaces -->
		<li 
			class="nav-heading pointer dropdown-toggle"
			data-bs-toggle="collapse"
			data-bs-target="#modelWorkspaces"
			>Model workspaces</li>

		<div id="modelWorkspaces" class="collapse show">
			<!-- Search input -->
			<li class="nav-item" style="padding: 10px 15px;">
				<input class="form-control form-control-sm ml-3 mr-4" type="text" placeholder="Search" aria-label="Search" oninput="searchContentTypes()">
			</li>

			<!-- Content types -->
			{% for content_type in request.user.accessible_content_types %}
			<li class="nav-item content-type-item" id="contentTypesNav">
				<a 
				class="nav-link collapsed pointer" 
				hx-get="{{ content_type | model_dashboard_url }}"
				hx-target="#main-content"
				hx-push-url="true"
				hx-swap="innerHTML"
				href=""
				>
				<span>{{ content_type | model_name_plural_from_content_type | title }}</span>
				</a>
			</li>
			{% endfor %}
		</div>

		</ul>

</aside>

<!-- Search Functionality -->
<script>
  function searchContentTypes() {
    var input, filter, ul, li, a, i, txtValue;

    // Get the input element and filter value
    input = document.querySelector('#sidebar-nav input[type="text"]');
    filter = input.value.toUpperCase();

    // Get all list items that are part of the content type items
    li = document.querySelectorAll("#sidebar-nav .content-type-item");

    // Loop through all list items and filter based on text content
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;

      // Show or hide the list item based on the search value
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
</script>
