<div id="top-navbar">
	<div class="container">
		<div class="nav-wrapper">

			<div class="toggle-btn" onclick="toggleSidebar()">
				<i class="fas fa-bars"></i>
			</div>

			<form class="form-header" action="{% url 'query' %}" method="GET">
				<input class="au-input au-input--xl" type="text" name="q" value="{{ request.GET.q }}"
					placeholder="Search All... #course, #program, #Quiz, #News, #Events" required />
				<button class="au-btn--submit" type="submit">
					<i class="fas fa-search"></i>
				</button>
			</form>

			<div class="dropdown">
				<button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
					aria-haspopup="true" aria-expanded="false">
					<img class="profile-pic" src="{{ request.user.picture.url }}">
					{{ request.user.get_full_name|truncatechars:15 }}
				</button>
				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<p class="container text-muted-xs text-center">
						Last login: {{ request.user.last_login|date }}</p>

					{% if request.user.is_lecturer or request.user.is_student %}
					<a class="dropdown-item" href="{% url 'user_course_list' %}"><i class="fas fa-book"></i>My
						Courses</a>
					{% endif %}

					{% if request.user.is_superuser %}
					<a class="dropdown-item" href="{% url 'admin_panel' %}"><i class="fas fa-user-tie"></i>Admin
						Panel</a>
					{% endif %}

					<a class="dropdown-item" href="{% url 'profile' %}"><i class="fas fa-user"></i>Profile</a>
					<a class="dropdown-item" href="{% url 'edit_profile' %}"><i class="fas fa-cogs"></i>Setting</a>
					<hr>
					<div style="display: flex; justify-content: center; align-items: center;">
						<a class="btn btn-secondary" href="{% url 'logout' %}">
							<i class="fas fa-sign-out-alt"></i> Signout
						</a>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>