{% block topnav %}
	<nav class="navbar navbar-main navbar-expand-lg px-0 mx-3 shadow-none border-radius-xl" 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' id='messages'>
					{% for label, messages in app.flashes %}
						{% for message in messages %}
							<div class="flash-{{ label }} bg-gradient-{{ label }} 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" for='case-search'>Case Search...</label>
						<input type="text" id='case-search' 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 (notifications|length) == 0 %} style='display:none;' {% endif %}>{{ notifications|length }}</span>
						</a>
						<ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
							{% for note in notifications|slice(0, 4) %}
								<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'>
												{% if note.sender.imageName %}<img src='{{ user_image_path }}/{{ note.sender.imageName }}' class='avatar avatar-sm me-3'><br/>
												{% endif %}
												<i class='material-symbols-rounded opacity-7'>
													{% if note.type == enum('App\\Enums\\MessageType').CASE %}
														cases
													{% elseif note.type == enum('App\\Enums\\MessageType').STAFFING %}
														person
													{% elseif note.type == enum('App\\Enums\\MessageType').GENERAL %}
														chat_bubble
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').BILLING %}
                                                        local_atm
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').NEW_CASE %}
                                                        business_center
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').USER %}
                                                        person_add
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').NEW_REFERRAL %}
                                                        add_to_queue
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').STAFF_NOTE %}
                                                        add_notes
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').CALENDAR %}
                                                        calendar_month
                                                    {% elseif note.type == enum('App\\Enums\\MessageType').REMINDER %}
                                                        notifications
													{% endif %}
												</i>
											</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 %}
