<li class="iz-nav__item">

	<div id="notification_list" class="iz-notifications" aria-label="{{ L_NOTIFICATIONS }}">
		<section class="iz-card iz-card--menu" aria-labelledby="iz-notifications-title">
			<header class="iz-card__header">
				<h2 class="iz-card__title" id="iz-notifications-title">{{ L_NOTIFICATIONS }}</h2>
			</header>

			<div class="iz-card__body">
				<div class="iz-menu" role="region" aria-label="{{ L_NOTIFICATIONS }}">
					<ul class="iz-menu__list" role="list">

						{% if not .notifications %}
							<li class="iz-menu__empty" role="status">
								<p class="iz-alert iz-alert--info">{{ L_NO_NOTIFICATIONS }}</p>
							</li>
						{% endif %}

						{% for notifications in notifications %}
							<li class="iz-notice
								{% if notifications.UNREAD %} iz-notice--unread{% endif %}
								{% if notifications.STYLING %} {{ notifications.STYLING }}{% endif %}
								{% if not notifications.URL %} iz-notice--no-url{% endif %}"
								{% if notifications.UNREAD %}data-unread="1"{% endif %}>

								<div class="iz-notice__row">

									<div class="iz-notice__mark">
										{% if notifications.UNREAD %}
											<a
												class="iz-btn iz-btn--ghost iz-btn--sm mark_read"
												href="{{ notifications.U_MARK_READ }}"
												data-ajax="notification.mark_read"
												aria-label="{{ L_MARK_READ }}"
												title="{{ L_MARK_READ }}">
												{{ L_MARK_READ }}
											</a>
										{% else %}
											<span class="iz-btn iz-btn--ghost iz-btn--sm iz-btn--disabled"
												  aria-disabled="true"
												  title="{{ L_MARK_READ }}">
												{{ L_MARK_READ }}
											</span>
										{% endif %}

										{% if notifications.UNREAD %}
											<a class="tmp_read iz-visually-hidden">{{ L_MARK_READ }}</a>
										{% endif %}
									</div>

									{% if notifications.URL %}
										<a class="iz-notice__content notification-block"
										   href="{% if notifications.UNREAD %}{{ notifications.U_MARK_READ }}{% else %}{{ notifications.URL }}{% endif %}"
										   {% if notifications.UNREAD %}data-real-url="{{ notifications.URL }}"{% endif %}
										   aria-label="{{ notifications.FORMATTED_TITLE }}">
									{% else %}
										<div class="iz-notice__content notification-block">
									{% endif %}

											<div class="iz-notice__avatar">
												{% if notifications.AVATAR %}
													{{ notifications.AVATAR }}
												{% else %}
													<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
												{% endif %}
											</div>

											<div class="iz-notice__text">
												<p class="iz-notice__title">{{ notifications.FORMATTED_TITLE }}</p>

												{% if notifications.REFERENCE %}
													<p class="iz-notice__meta">{{ notifications.REFERENCE }}</p>
												{% endif %}
												{% if notifications.FORUM %}
													<p class="iz-notice__meta">{{ notifications.FORUM }}</p>
												{% endif %}
												{% if notifications.REASON %}
													<p class="iz-notice__meta">{{ notifications.REASON }}</p>
												{% endif %}

												<p class="iz-notice__time">
													<time>{{ notifications.TIME }}</time>
												</p>
											</div>

									{% if notifications.URL %}
										</a>
									{% else %}
										</div>
									{% endif %}

								</div>
							</li>
						{% endfor %}

					</ul>
				</div>
			</div>

			<footer class="iz-card__footer">
				<div class="iz-toolbar" role="region" aria-label="{{ L_OPTIONS }}">
					<div class="iz-toolbar__left">
						<a class="iz-btn iz-btn--secondary iz-btn--sm" href="{{ U_NOTIFICATION_SETTINGS }}">
							{{ L_SETTINGS }}
						</a>
					</div>

					<div class="iz-toolbar__right">
						{% if NOTIFICATIONS_COUNT %}
							<a id="mark_all_notifications"
							   class="iz-btn iz-btn--secondary iz-btn--sm"
							   href="{{ U_MARK_ALL_NOTIFICATIONS }}"
							   data-ajax="notification.mark_all_read">
								{{ L_MARK_ALL_READ }}
							</a>
						{% endif %}
					</div>
				</div>
			</footer>
		</section>
	</div>

</li>
