
<li class="nav-item dropdown d-md-inline-flex">
	<audio id="message-sound" src="{$theme}/assets/sounds/chat-message.mp3" preload="auto"></audio>

	<a class="dropdown-toggle dropdown-toggle-notification gray-6" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="notification">
		<span class="bullet-dot bg-primary animation-blink" style="display: none;"></span>
		<svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
			<path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
			<path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
			<path d="M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727"></path>
			<path d="M3 6.727a11.05 11.05 0 0 1 2.792 -3.727"></path>
		</svg>
	</a>
	<div class="dropdown-menu shadow rounded-2 notification" id="NotificationsDiv">
		<div class="card border-0">
			<div class="card-header d-flex justify-content-between align-items-center py-3">
				<h4 class="mb-0 title-font">{$lang.chat.notifications}</h4>
				<a href="/notifications" class="btn btn-link" title="view all">{$lang.chat.view_all}</a>
			</div>
			<ul class="card-body p-0 list-unstyled mb-0 custom_scroll ps-2" style="height: 400px;">
			</ul>
		</div>
	</div>
</li>
<style>
	.bullet-dot {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 14px;
		height: 14px;
		font-size: 11px;
		font-weight: bold;
		color: white;
		border-radius: 50%;
		padding: 0 4px;
		top: -2px;
	}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js"></script>

<script>
	window.globalLang = '{$globalLangJson}';
	window.globalLang = JSON.parse(window.globalLang);
</script>
<script src="{$theme}/assets/ws/notification.js"></script>