<!-- Sidebar -->
<ul class="navbar-nav bg-blue sidebar sidebar-dark accordion toggled" id="accordionSidebar">

	<!-- Sidebar - Brand -->
	<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
		<div class="sidebar-brand-text mx-3"><img src="<!--[#SITE_URL;]-->/res/img/website-logo.png" style="height: 55px"></div>
	</a>
	<hr class="sidebar-divider my-0">
	<div class="navbar-custom-menu" style="margin: 5px 13px; text-align: center;">
		<ul class="nav navbar-nav">
			<li class="user-menu">
				<a href="#" style="text-decoration:none;">
					<img src="<!--[#SITE_URL;]-->/res/img/avatar.png" class="user-image" alt="User Image" style="height: 25px; border-radius: 50px">
					<span class="admin-name" style="color: #fff; font-size: 14px" id="AUTH_ACC_ACCOUNT_NAME_LBL"></span>
				</a>
			</li>
		</ul>
	</div>
	<hr class="sidebar-divider my-0">

	<!-- Nav Item - reservations -->
	<li class="nav-item">
		<a class="nav-link" href="<!--[#SITE_URL;]-->/p/agent/pos_reserve.html">
		<i class="far fa-list-alt"></i> <span>Reservations</span></a>
	</li>

	<!-- Nav Item - Settings -->
	<li class="nav-item"  id="LI_SIDE_SETTINGS">
		<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseSettings" aria-expanded="true" aria-controls="collapseSettings">
			<i class="fas fa-fw fa-cog"></i><span>Settings</span>
		</a>
		<div id="collapseSettings" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
			<div class="bg-white collapse-inner rounded">				
				<!-- CHANGE PASSWORD -->
				<a id="" class="collapse-item" href="<!--[#SITE_URL;]-->/p/record/client_water.html">Customers</a>
				<a id="CHANGE_PASSWORD_CMD" class="collapse-item" href="javascript:void(0)">Change Password</a>
			</div>
		</div>
	</li>

	<!-- LOGOUT -->
	<li class="nav-item">
		<a class="nav-link" href="javascript:void(0)" id="LOGOUT_CMD">
		<i class="fas fa-power-off"></i> <span>Logout</span></a>
	</li>

	<hr class="sidebar-divider">
	
	<!-- Sidebar Toggler (Sidebar) -->
	<div class="text-center d-none d-md-inline">
		<button class="rounded-circle border-0" id="sidebarToggle"></button>
	</div>
</ul>

<!-- End of Sidebar -->

