{% include 'ucp_header.html' %}

<div class="tab-pane active">
	<form id="ucp" method="post" action="{{ S_UCP_ACTION }}"{{ S_FORM_ENCTYPE }} class="iz-form">

		<section class="iz-card iz-card--ucp">
			<header class="iz-card__header">
				<h2 class="iz-card__title">{{ TITLE }}</h2>
			</header>

			<div class="iz-card__body">
				<p class="iz-prose">{{ TITLE_EXPLAIN }}</p>

				{% if MODE == 'notification_options' %}
					{% EVENT before_notification_methods %}

					<section class="iz-card iz-card--nested" aria-label="{{ L_NOTIFICATION_TYPE }}">
						<header class="iz-card__header">
							<h3 class="iz-card__title">{{ L_NOTIFICATION_TYPE }}</h3>
						</header>

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_NOTIFICATION_TYPE }}">
								<table class="iz-table iz-table--notifications">
									<thead>
										<tr>
											<th scope="col">&nbsp;</th>
											{% for notification_methods in notification_methods %}
												<th scope="col" class="iz-table__center">{{ notification_methods.NAME }}</th>
											{% endfor %}
										</tr>
									</thead>

									<tbody>
										{% for notification_types in notification_types %}
											{% if notification_types.GROUP_NAME %}
												<tr class="iz-table__group">
													<th scope="row" colspan="{{ NOTIFICATION_TYPES_COLS }}" class="iz-table__groupcell">
														{{ notification_types.GROUP_NAME }}
													</th>
												</tr>
											{% else %}
												<tr>
													<th scope="row">
														<div class="iz-prose iz-prose--compact">
															<div><strong>{{ notification_types.NAME }}</strong></div>
															{% if notification_types.EXPLAIN %}
																<div class="iz-meta iz-meta--small">{{ notification_types.EXPLAIN }}</div>
															{% endif %}
														</div>
													</th>

													{% for notification_methods in notification_methods %}
														<td class="iz-table__center">
															<div class="iz-choice iz-choice--check">
																<input
																	type="checkbox"
																	data-notify="method{{ notification_methods.S_ROW_COUNT }}"
																	name="{{ notification_types.TYPE }}_{{ notification_types.notification_methods.METHOD }}"
																	id="nt_{{ notification_types.S_ROW_COUNT }}_{{ notification_types.notification_methods.S_ROW_COUNT }}"
																	{% if notification_types.notification_methods.SUBSCRIBED %}checked="checked"{% endif %}
																	{% if not notification_types.notification_methods.AVAILABLE %}disabled="disabled"{% endif %}
																/>
																<label for="nt_{{ notification_types.S_ROW_COUNT }}_{{ notification_types.notification_methods.S_ROW_COUNT }}">
																	<span class="iz-visually-hidden">{{ notification_methods.NAME }}</span>
																</label>
															</div>
														</td>
													{% endfor %}
												</tr>
											{% endif %}
										{% endfor %}

										<tr>
											<td>
												<input type="hidden" name="form_time" value="{{ FORM_TIME }}" />
												{{ S_HIDDEN_FIELDS }}
												{{ S_FORM_TOKEN }}

												<button type="submit" name="submit" value="{% if MODE == 'notification_options' %}{{ L_SUBMIT }}{% else %}{{ L_MARK_READ }}{% endif %}"
													class="iz-btn iz-btn--primary">
													{% if MODE == 'notification_options' %}{{ L_SUBMIT }}{% else %}{{ L_MARK_READ }}{% endif %}
												</button>
											</td>

											{% for notification_methods in notification_methods %}
												<td class="iz-table__center">
													<div class="iz-actions iz-actions--compact iz-actions--center">
														<button
															type="button"
															class="iz-btn iz-btn--ghost iz-btn--sm"
															onclick="marklist('ucp', '', false); return false;">
															{{ L_UNMARK_ALL }}
														</button>
														<button
															type="button"
															class="iz-btn iz-btn--ghost iz-btn--sm"
															onclick="
																(function(){
																	var els = document.querySelectorAll('#ucp input[data-notify=method{{ notification_methods.S_ROW_COUNT }}]');
																	for (var i=0; i<els.length; i++) { if (!els[i].disabled) { els[i].checked = true; } }
																})();
																return false;">
															{{ L_MARK_ALL }}
														</button>
													</div>
												</td>
											{% endfor %}
										</tr>
									</tbody>
								</table>
							</div>

							<div class="iz-space iz-space--xs"></div>
							<p class="iz-meta iz-meta--small">
								{{ L_MARK_ALL }}/{{ L_UNMARK_ALL }} applies per method column; disabled options remain unchanged.
							</p>
						</div>
					</section>

				{% else %}

					{% if notification_list %}

						<div class="iz-space iz-space--md"></div>

						<div class="iz-toolbar iz-toolbar--ucp-actions" aria-label="{{ L_OPTIONS }}">
							<div class="iz-toolbar__left">
								{% if U_MARK_ALL %}
									<a class="iz-link" href="{{ U_MARK_ALL }}">{{ L_NOTIFICATIONS_MARK_ALL_READ }}</a>
								{% endif %}
							</div>

							<div class="iz-toolbar__right">
								<nav class="iz-pager" aria-label="{{ L_PAGINATION }}">
									<div class="iz-pager__meta">{{ L_NOTIFICATIONS }}&nbsp;{{ TOTAL_COUNT }}</div>
									<div class="iz-pager__nav">
										{% if pagination %}
											{% include 'pagination.html' %}
										{% else %}
											<span class="iz-pager__current" aria-current="page">{{ PAGE_NUMBER }}</span>
										{% endif %}
									</div>
								</nav>
							</div>
						</div>

						<div class="iz-space iz-space--sm"></div>

						<section class="iz-card iz-card--nested" aria-label="{{ L_NOTIFICATIONS }}">
							<header class="iz-card__header">
								<h3 class="iz-card__title">{{ L_NOTIFICATIONS }}</h3>
							</header>

							<div class="iz-card__body">
								<ul class="iz-list iz-list--notifications">
									{% for notification_list in notification_list %}
										<li class="iz-list__item">
											<div class="iz-noti {% if notification_list.UNREAD %}iz-noti--unread{% endif %}{% if notification_list.STYLING %} {{ notification_list.STYLING }}{% endif %}">

												<div class="iz-noti__media" aria-hidden="true">
													{% if notification_list.AVATAR %}
														{{ notification_list.AVATAR }}
													{% else %}
														<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
													{% endif %}
												</div>

												<div class="iz-noti__body">
													<div class="iz-noti__title">
														{% if notification_list.URL %}
															<a class="iz-link" href="{% if notification_list.UNREAD %}{{ notification_list.U_MARK_READ }}{% else %}{{ notification_list.URL }}{% endif %}">
																{{ notification_list.FORMATTED_TITLE }}{% if notification_list.REFERENCE %} {{ notification_list.REFERENCE }}{% endif %}
															</a>
														{% else %}
															{{ notification_list.FORMATTED_TITLE }}{% if notification_list.REFERENCE %} {{ notification_list.REFERENCE }}{% endif %}
														{% endif %}
													</div>

													{% if notification_list.FORUM %}
														<div class="iz-meta iz-meta--small">{{ notification_list.FORUM }}</div>
													{% endif %}

													{% if notification_list.REASON %}
														<div class="iz-meta iz-meta--small">{{ notification_list.REASON }}</div>
													{% endif %}

													<div class="iz-meta iz-meta--small">{{ notification_list.TIME }}</div>
												</div>

												<div class="iz-noti__actions">
													<div class="iz-choice iz-choice--check">
														<input
															type="checkbox"
															name="mark[]"
															value="{{ notification_list.NOTIFICATION_ID }}"
															id="mark{{ notification_list.S_ROW_COUNT }}"
															{% if not notification_list.UNREAD %}disabled="disabled"{% endif %}
														/>
														<label for="mark{{ notification_list.S_ROW_COUNT }}">
															<span class="iz-visually-hidden">{{ L_MARK }}</span>
														</label>
													</div>
												</div>

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

						<div class="iz-space iz-space--md"></div>

						<div class="iz-toolbar iz-toolbar--ucp-actions" aria-label="{{ L_OPTIONS }}">
							<div class="iz-toolbar__left">
								<input type="hidden" name="form_time" value="{{ FORM_TIME }}" />
								{{ S_HIDDEN_FIELDS }}

								<div class="iz-actions">
									<button type="submit" name="submit" value="{{ L_MARK_READ }}" class="iz-btn iz-btn--primary">
										{{ L_MARK_READ }}
									</button>

									<button type="button" class="iz-btn iz-btn--ghost iz-btn--sm"
										onclick="marklist('ucp', 'mark', true); return false;">
										{{ L_MARK_ALL }}
									</button>

									<button type="button" class="iz-btn iz-btn--ghost iz-btn--sm"
										onclick="marklist('ucp', 'mark', false); return false;">
										{{ L_UNMARK_ALL }}
									</button>
								</div>

								{{ S_FORM_TOKEN }}
							</div>

							<div class="iz-toolbar__right">
								<nav class="iz-pager" aria-label="{{ L_PAGINATION }}">
									<div class="iz-pager__meta">{{ L_NOTIFICATIONS }}&nbsp;{{ TOTAL_COUNT }}</div>
									<div class="iz-pager__nav">
										{% if pagination %}
											{% include 'pagination.html' %}
										{% else %}
											<span class="iz-pager__current" aria-current="page">{{ PAGE_NUMBER }}</span>
										{% endif %}
									</div>
								</nav>
							</div>
						</div>

					{% else %}
						<div class="iz-space iz-space--md"></div>
						<div class="iz-alert iz-alert--info" role="status">
							<strong>{{ L_INFO_BOX }}</strong>&nbsp;{{ L_NO_NOTIFICATIONS }}
						</div>
					{% endif %}

				{% endif %}

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}