{% load static %}
<style>
	@media only screen and (min-width: 992px) {
		.log-out {
			display: none !important;
		}
	}
</style>
<div class="sidebar" data-color="purple" data-background-color="white" data-image="{% static 'img/sidebar-1.jpg' %}">
	<!--
				Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"

				Tip 2: you can also add an image using data-image tag
		-->
	<div class="logo">
		<a href="{% url 'users'  %}" class="simple-text logo-normal">
			Cheetah Admin
		</a>
	</div>

	<div class="sidebar-wrapper">
		<ul class="nav">
			<li class="nav-item users Users  li-elements-js" id="users">
				<a class="nav-link" id="users-link" href="{% url 'users' %}">
					<i class="material-icons">person</i>
					<p class="users-link">Users</p>
				</a>
			</li>

			<li class="nav-item frontend-users Users  li-elements-js" id="frontend-users">
				<a class="nav-link" id="frontend-users-link" href="{% url 'frontend-users' %}">
					<i class="material-icons">person</i>
					<p class="frontend-users-link">Coursecreator Users</p>
				</a>
			</li>

			<li class="nav-item marketing-manager li-elements-js" id="marketing-manager">
				<a class="nav-link" id="marketing-manager-link" href="{% url 'marketing-manager' %}">
					<i class="material-icons">perm_media</i>
					<p class="marketing-manager-link">Marketing Manager</p>
				</a>
			</li>

			<li class="nav-item chatbot-manager li-elements-js" id="chatbot-manager">
				<a class="nav-link" id="chatbot-manager-link" href="{% url 'chatbot-manager' %}">
					<i class="material-icons">chat</i>
					<p class="chatbot-manager-link">Chatbot Prompt</p>
				</a>
			</li>
			<li class="nav-item manage-lean-more">
				<a class="nav-link" data-toggle="collapse" id="request-parent-list" href="#collapseService" role="button" aria-expanded="false" aria-controls="collapseService">
					<i class="material-icons">picture_as_pdf</i>
					<p class="" style="color:#666666 !important">Manage Learn More <span><i class="fas fa-caret-down caret-down"></i></span> <span><i class="fas fa-caret-up caret-up" ></i></span> </p>
				</a>
				<div class="collapse" id="collapseService" data-parent-id="request-parent-list">
					<ul class="nav collapse" data-parent-id="request-parent-list" id="collapseServiceId">
						<li class="nav-item pdf-viewer-manager" id="pdf-viewer-manager">
							<a class="nav-link"  href="{% url 'pdf-viewer-manager' %}">
								<i class="material-icons">picture_as_pdf</i>
								<p class="pdf-viewer-manager-link">PreStudyRedinessSchedule</p>
							</a>
						</li>
						<li class="nav-item topicdetails-manager" data-schedule-type="TopicDetails">
							<a class="nav-link" id="topicdetails-manager-link" href="{% url 'topicdetails-manager' %}">
								<i class="material-icons">picture_as_pdf</i>
								<p class="topicdetails-manager-link">TopicDetails</p>
							</a>
						</li>
						<li class="nav-item eveningreview-manager" data-schedule-type="eveningReview">
							<a class="nav-link" id="eveningreview-manager-link" href="{% url 'eveningreview-manager' %}">
								<i class="material-icons">picture_as_pdf</i>
								<p class="eveningreview-manager-link">EveningReview</p>
							</a>
						</li>
						<li class="nav-item everythreemodule-manager" data-schedule-type="everyThreeModule">
							<a class="nav-link" id="everythreemodule-manager-link" href="{% url 'everythreemodule-manager' %}">
								<i class="material-icons">picture_as_pdf</i>
								<p class="everythreemodule-manager-link">EveryThreeModule</p>
							</a>
						</li>
						
						<li class="nav-item suggestedfinalreview-manager" data-schedule-type="SuggestedFinalReview">
							<a class="nav-link" id="suggestedfinalreview-manager-link" href="{% url 'suggestedfinalreview-manager' %}">
								<i class="material-icons">picture_as_pdf</i>
								<p class="suggestedfinalreview-manager-link">Suggested Final Review</p>
							</a>
						</li>
						
						
						
					</ul>
				</div>
			</li>
			<li class="nav-item manage-pdf li-elements-js" id="manage-pdf">
				<a class="nav-link" id="manage-pdf-link" href="{% url 'manage-pdf-manager' %}">
					<i class="material-icons">description</i>
					<p class="manage-pdf-link">Manage Files</p>
				</a>
			</li>
			
			<li class="nav-item settings Settings  li-elements-js" id="users">
				<a class="nav-link" id="settings-link" href="{% url 'settings' %}">
					<i class="material-icons">settings</i>
					<p class="settings-link">Settings</p>
				</a>
			</li>


			<li class="nav-item log-out">
				<a class="nav-link" href="{% url 'logout' %}">
					<i class="fas fa-user"></i>
					<p class="log-out-link">Log Out</p>
				</a>
			</li>

		</ul>
	</div>
</div>
<script type="text/javascript">
	function hideAllElements(perm_list) {
		try {
			let promise = new Promise((resolve, reject) => {
				$(".li-elements-js").each(async (index, ele) => {
					let permisssion_status = ele.id
					if (!perm_list.includes(permisssion_status)) {
						ele.style.display = "none"
					}
				})
				resolve(true)
			})
			return promise;
		}
		catch (err) {
			console.log("error in hideAllElements :::: ", err)
		}
	}

	async function handleUserPermissions(perm_list) {
		let elementHidden = await hideAllElements(perm_list)

		$.getchildrenLength = function () {
			return ($(this).css('display') != 'none')
		}

		if (elementHidden) {
			if ($("#collapseExample").children().filter($.getchildrenLength).length < 1) {
				let parent_id = $("#collapseExample").attr("data-parent-id")
				$("#" + parent_id).hide()
			}
		}
	}


	$('.caret-down').css('display', 'block')
	$('.caret-up').css('display', 'none')
	$('.manage-lean-more').on('click',function(){
		if($(this).find('.caret-down').css('display') === 'block'){
			$('.caret-down').css('display','none')
			$('.caret-up').css('display','block')
		}
		else{
			$('.caret-up').css('display','none')
			$('.caret-down').css('display','block')
		}
	})

</script>