{% block topnav %}
	<nav class="navbar navbar-main navbar-expand-lg px-0 mx-3 border-radius-xl blur shadow-blur left-auto position-sticky mt-4 top-1 z-index-sticky" id="navbarBlur" data-scroll="true">
		<div class="container-fluid py-1 px-3">
			{{ block('breadcrumb', 'internal/libs/breadcrumb.html.twig') }}
			<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
				<div class='ms-md-auto pe-md-3 d-flex align-items-left'>
					{% for label, messages in app.flashes %}
						{% for message in messages %}
							<div class="flash-{{ label }} bg-gradient-info text-white">
								{{ message }}
							</div>
						{% endfor %}
					{% endfor %}
				</div>

				<div class="ms-md-auto pe-md-3 d-flex align-items-center">
					<div class="input-group input-group-outline">
						<label class="form-label">Case Search...</label>
						<input type="text" class="form-control">
					</div>
				</div>
				<ul class="navbar-nav d-flex align-items-center justify-content-end">
					<li class="nav-item d-xl-none ps-3 d-flex align-items-center">
						<a href="javascript:;" class="nav-link p-0 text-body" id="iconNavbarSidenav">
							<div class="sidenav-toggler-inner">
								<i class="sidenav-toggler-line"></i>
								<i class="sidenav-toggler-line"></i>
								<i class="sidenav-toggler-line"></i>
							</div>
						</a>
					</li>
					{% if is_granted('ROLE_ADMIN') %}
						<li class="nav-item px-3 d-flex align-items-center" title="Site Settings">
							<a href="javascript:;" class="nav-link text-body p-0">
								<i class="material-symbols-rounded fixed-plugin-button-nav">settings</i>
							</a>
						</li>
					{% endif %}
					<li class="nav-item dropdown pe-3 d-flex align-items-center" title="Notifications">
						<a href="javascript:;" class="nav-link text-body p-0 notification" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
							<i class="material-symbols-rounded">notifications</i>
							<span class='badge' {% if notificationCount == 0 %} style='display:none;' {% endif %}>{{ notificationCount }}</span>
						</a>
						<ul class="dropdown-menu  dropdown-menu-end  px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
							{% for note in notifications %}
								<li class='mb-2'>
									<a class='dropdown-item border-radius-md' href="javascript:openNotification('{{ note.id }}');">
										<div class='d-flex py-1'>
											<div class='my-auto'>
												<img src='' class='avatar avatar-sm me-3'>
											</div>
											<div class='d-flex flex-column justify-content-center'>
												<h6 class='text-sm font-weight-normal mb-1'>
													<span class='font-weight-bold'>{{ note.title }}</span>
													{{ note.sender.getName() }}
												</h6>
												<p>{{ note.message }}</p>
												<p class='text-xs text-secondary mb-0'>
													<i class='fa fa-clock me-1'></i>
													{{ note.sent|format_datetime('short', 'short', timezone: 'America/Indiana/Indianapolis') }}
												</p>
											</div>
										</div>
									</a>
								</li>
							{% endfor %}
						</ul>
					</li>
					<li class="nav-item d-flex align-items-center" title="Profile">
						<a href="{{ path('app_profile') }}" class="nav-link text-body font-weight-bold px-0">
							<i class="material-symbols-rounded">account_circle</i>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- End Navbar -->
{% endblock %}