<div id="notification-menu" class="dropdown dropdown-extended notification-menu">
	<div class="pointer dropdown-extended-pointer"><div class="pointer-inner"></div></div>
	<div class="dropdown-contents">
		<div class="header">
			{L_NOTIFICATIONS}
			<span class="header-settings">
				<a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a>
				<!-- IF NOTIFICATIONS_COUNT -->
					<span id="mark_all_notifications"> &bull; <a href="{U_MARK_ALL_NOTIFICATIONS}" data-ajax="notification.mark_all_read">{L_MARK_ALL_READ}</a></span>
				<!-- ENDIF -->
			</span>
		</div>

		<ul class="dropdown-extended-list notification-list">
			<!-- IF not .notifications -->
				<li class="dropdown-extended-item no-notifications">
					{L_NO_NOTIFICATIONS}
				</li>
			<!-- ENDIF -->
			<!-- BEGIN notifications -->
				<li class="dropdown-extended-item notification-item<!-- IF notifications.UNREAD --> bg2<!-- ENDIF --><!-- IF notifications.STYLING --> {notifications.STYLING}<!-- ENDIF --><!-- IF not notifications.URL --> no-url<!-- ENDIF -->" <!-- IF notifications.UNREAD -->data-notification-unread="true"<!-- ENDIF -->>
					<!-- IF notifications.URL -->
						<a class="notification-block" href="<!-- IF notifications.UNREAD -->{notifications.U_MARK_READ}" data-real-url="{notifications.URL}<!-- ELSE -->{notifications.URL}<!-- ENDIF -->">
					<!-- ENDIF -->
						{% include 'avatar.html' with {'avatar_data': notifications.AVATAR} only %}
						<div class="notification-text">
							<p class="notification-title">{notifications.FORMATTED_TITLE}</p>
							<!-- IF notifications.REFERENCE --><p class="notification-reference">{notifications.REFERENCE}</p><!-- ENDIF -->
							<!-- IF notifications.FORUM --><p class="notification-forum">{notifications.FORUM}</p><!-- ENDIF -->
							<!-- IF notifications.REASON --><p class="notification-reason">{notifications.REASON}</p><!-- ENDIF -->
							<p class="notification-time">{notifications.TIME}</p>
						</div>
					<!-- IF notifications.URL --></a><!-- ENDIF -->
					<!-- IF notifications.UNREAD -->
						<a href="{notifications.U_MARK_READ}" class="mark_read icon-mark" data-ajax="notification.mark_read" title="{L_MARK_READ}">
							 {{ Icon('font', 'circle-check', lang('MARK_READ'), true, 'fas c-notification-check-icon') }}
						</a>
					<!-- ENDIF -->
				</li>
			<!-- END notifications -->
		</ul>

		{% EVENT notification_dropdown_footer_before %}
		<div class="footer">
			<a href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_SEE_ALL}</span></a>
		</div>
		{% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is not defined %}
			<div class="footer webpush-subscribe">
				<span class="ellipsis-text">{{ lang('NOTIFY_WEB_PUSH_ENABLE') ~ lang('COLON') }}</span>
				<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION')|e('html_attr') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED')|e('html_attr') }}" data-disabled-msg="{{ lang('NOTIFY_WEB_PUSH_DISABLED')|e('html_attr') }}">{{ Icon('svg', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), true, 'push-subscribe-toggle-icon toggle-off') }}</button>
				<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('svg', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), true, 'push-subscribe-toggle-icon toggle-on') }}</button>
			</div>
		{% endif %}
		{% EVENT notification_dropdown_footer_after %}
	</div>
</div>
