{% 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">{{ L_TITLE }}</h2>
			</header>

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

				{% if forumrow %}
					<div class="iz-space iz-space--md"></div>

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

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_WATCHED_FORUMS }}">
								<table class="iz-table iz-table--watch-forums">
									<thead>
										<tr>
											<th scope="col">{{ L_FORUMS }}</th>
											<th scope="col" class="iz-only-desktop">{{ L_LAST_POST }}</th>
											<th scope="col" class="iz-table__check">{{ L_MARK }}</th>
										</tr>
									</thead>
									<tbody>
										{% for forumrow in forumrow %}
											<tr id="forum-{{ forumrow.FORUM_ID }}">
												<td>
													<a class="iz-link" href="{{ forumrow.U_VIEWFORUM }}">{{ forumrow.FORUM_NAME }}</a>
													{% if forumrow.FORUM_DESC %}
														<div class="iz-prose iz-prose--compact">{{ forumrow.FORUM_DESC }}</div>
													{% endif %}

													<!-- Mobile last-post summary -->
													<div class="iz-only-mobile iz-meta iz-meta--small">
														{% if forumrow.LAST_POST_TIME_RFC3339 %}
															<span class="iz-meta__item">{{ L_LAST_POST }}</span>
															<span class="iz-sep">•</span>
															<span class="iz-meta__item">{{ L_POST_BY_AUTHOR }}&nbsp;{{ forumrow.LAST_POST_AUTHOR_FULL }}</span>
															<span class="iz-sep">•</span>
															<a class="iz-link" href="{{ forumrow.U_LAST_POST }}">
																<time datetime="{{ forumrow.LAST_POST_TIME_RFC3339 }}">{{ forumrow.LAST_POST_TIME }}</time>
															</a>
														{% else %}
															<span class="iz-meta__item">{{ L_NO_POSTS }}</span>
														{% endif %}
													</div>
												</td>

												<td class="iz-only-desktop">
													{% if forumrow.LAST_POST_TIME_RFC3339 %}
														<div class="iz-meta iz-meta--small">
															<span class="iz-meta__item">{{ L_POST_BY_AUTHOR }}&nbsp;{{ forumrow.LAST_POST_AUTHOR_FULL }}</span>
														</div>
														<div class="iz-actions iz-actions--compact">
															<a class="iz-link" href="{{ forumrow.U_LAST_POST }}">
																<span class="iz-visually-hidden">{{ L_FORUMLIST_LASTPOST }}</span>
																{{ L_VIEW_LATEST_POST }}
															</a>
															<span class="iz-sep">•</span>
															<span class="iz-meta iz-meta--small">
																<time datetime="{{ forumrow.LAST_POST_TIME_RFC3339 }}">{{ forumrow.LAST_POST_TIME }}</time>
															</span>
														</div>
													{% else %}
														<div class="iz-meta iz-meta--small">{{ L_NO_POSTS }}</div>
													{% endif %}
												</td>

												<td class="iz-table__check">
													<div class="iz-choice iz-choice--check">
														<input type="checkbox" name="f[{{ forumrow.FORUM_ID }}]" id="f{{ forumrow.FORUM_ID }}">
														<label for="f{{ forumrow.FORUM_ID }}">
															<span class="iz-visually-hidden">{{ L_MARK }}</span>
														</label>
													</div>
												</td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>
						</div>
					</section>

				{% elseif S_FORUM_NOTIFY %}
					<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_WATCHED_FORUMS }}
					</div>
				{% endif %}


				{% if topicrow %}
					<div class="iz-space iz-space--md"></div>

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

						<div class="iz-card__body">
							<div class="iz-tablewrap" role="region" aria-label="{{ L_WATCHED_TOPICS }}">
								<table class="iz-table iz-table--watch-topics">
									<thead>
										<tr>
											<th scope="col">{{ L_TOPICS }}</th>
											<th scope="col" class="iz-only-desktop">{{ L_LAST_POST }}</th>
											<th scope="col" class="iz-table__check">{{ L_MARK }}</th>
										</tr>
									</thead>

									{% set VAR = {{ L_VIEW_TOPIC_LOCKED }} %}
									<tbody>
										{% for topicrow in topicrow %}
											<tr id="topic-{{ topicrow.TOPIC_ID }}">
												<td>
													<div class="iz-topicline">
														{% if topicrow.S_UNREAD_TOPIC %}
															<a class="iz-link iz-link--muted" href="{{ topicrow.U_NEWEST_POST }}">
																<span class="iz-visually-hidden">{{ L_VIEW_NEWEST_POST }}</span>
																{{ L_NEW_POST }}
															</a>
															<span class="iz-sep">•</span>
														{% endif %}

														{% if topicrow.TOPIC_TYPE == VAR %}
															<span class="iz-badge iz-badge--lock">{{ L_VIEW_TOPIC_LOCKED }}</span>
															<span class="iz-sep">•</span>
														{% endif %}

														<a class="iz-link" href="{{ topicrow.U_VIEW_TOPIC }}">{{ topicrow.TOPIC_TITLE }}</a>

														{% if topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED %}
															<span class="iz-sep">•</span>
															<a class="iz-link" href="{{ topicrow.U_MCP_QUEUE }}">{{ L_TOPICS_ROW_NOT_APPROVED }}</a>
														{% endif %}

														{% if topicrow.S_TOPIC_REPORTED %}
															<span class="iz-sep">•</span>
															<a class="iz-link" href="{{ topicrow.U_MCP_REPORT }}">{{ L_TOPICS_ROW_REPORTED }}</a>
														{% endif %}

														{% if topicrow.pagination %}
															<nav class="iz-pagination iz-pagination--compact" aria-label="{{ L_PAGINATION }}">
																<ul class="iz-pagination__list">
																	{% for pagination in pagination %}
																		{% if topicrow.pagination.S_IS_PREV %}
																			<li class="iz-pagination__item">
																				<a class="iz-pagination__link" href="{{ topicrow.pagination.PAGE_URL }}">{{ L_PREVIOUS }}</a>
																			</li>
																		{% elseif topicrow.pagination.S_IS_CURRENT %}
																			<li class="iz-pagination__item" aria-current="page">
																				<span class="iz-pagination__current">{{ topicrow.pagination.PAGE_NUMBER }}</span>
																			</li>
																		{% elseif topicrow.pagination.S_IS_ELLIPSIS %}
																			<li class="iz-pagination__item">
																				<span class="iz-pagination__ellipsis">{{ L_ELLIPSIS }}</span>
																			</li>
																		{% elseif topicrow.pagination.S_IS_NEXT %}
																			<li class="iz-pagination__item">
																				<a class="iz-pagination__link" href="{{ topicrow.pagination.PAGE_URL }}">{{ L_NEXT }}</a>
																			</li>
																		{% else %}
																			<li class="iz-pagination__item">
																				<a class="iz-pagination__link" href="{{ topicrow.pagination.PAGE_URL }}">{{ topicrow.pagination.PAGE_NUMBER }}</a>
																			</li>
																		{% endif %}
																	{% endfor %}
																</ul>
															</nav>
														{% endif %}
													</div>

													<div class="iz-meta iz-meta--small">
														{% if topicrow.ATTACH_ICON_IMG %}
															<span class="iz-meta__item">{{ L_ATTACH_FORUM }}</span>
															<span class="iz-sep">•</span>
														{% endif %}
														<span class="iz-meta__item">{{ L_POST_BY_AUTHOR }}&nbsp;{{ topicrow.TOPIC_AUTHOR_FULL }}</span>
														<span class="iz-sep">•</span>
														<span class="iz-meta__item">{{ topicrow.FIRST_POST_TIME }}</span>
													</div>

													<!-- Mobile last-post summary -->
													<div class="iz-only-mobile iz-meta iz-meta--small">
														<span class="iz-meta__item">{{ L_LAST_POST }}</span>
														<span class="iz-sep">•</span>
														<span class="iz-meta__item">{{ L_POST_BY_AUTHOR }}&nbsp;{{ topicrow.LAST_POST_AUTHOR_FULL }}</span>
														<span class="iz-sep">•</span>
														<a class="iz-link" href="{{ topicrow.U_LAST_POST }}">{{ topicrow.LAST_POST_TIME }}</a>
													</div>
												</td>

												<td class="iz-only-desktop">
													<div class="iz-meta iz-meta--small">
														<span class="iz-meta__item">{{ L_POST_BY_AUTHOR }}&nbsp;{{ topicrow.LAST_POST_AUTHOR_FULL }}</span>
													</div>
													<div class="iz-actions iz-actions--compact">
														{% if not S_IS_BOT %}
															<a class="iz-link" href="{{ topicrow.U_LAST_POST }}">
																<span class="iz-visually-hidden">{{ L_FORUMLIST_LASTPOST }}</span>
																{{ L_VIEW_LATEST_POST }}
															</a>
															<span class="iz-sep">•</span>
														{% endif %}
														<span class="iz-meta iz-meta--small">{{ topicrow.LAST_POST_TIME }}</span>
													</div>
												</td>

												<td class="iz-table__check">
													<div class="iz-choice iz-choice--check">
														<input type="checkbox" name="t[{{ topicrow.TOPIC_ID }}]" id="t{{ topicrow.TOPIC_ID }}">
														<label for="t{{ topicrow.TOPIC_ID }}">
															<span class="iz-visually-hidden">{{ L_MARK }}</span>
														</label>
													</div>
												</td>
											</tr>
										{% endfor %}
									</tbody>
								</table>
							</div>

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

							<nav class="iz-pager" aria-label="{{ L_PAGINATION }}">
								<div class="iz-pager__meta">{{ TOTAL_TOPICS }}</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>
					</section>

				{% elseif S_TOPIC_NOTIFY %}
					<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_WATCHED_TOPICS }}
					</div>
				{% endif %}


				<!-- Actions -->
				{% if topicrow or .forumrow %}
					<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">
							<div class="iz-actions">
								<button type="button"
									class="iz-btn iz-btn--ghost iz-btn--sm"
									onclick="marklist('ucp', 't', true); marklist('ucp', 'f', true); return false;">
									{{ L_MARK_ALL }}
								</button>

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

								<button class="iz-btn iz-btn--danger iz-btn--sm"
									type="submit" name="unwatch" title="{{ L_UNWATCH_MARKED }}">
									{{ L_UNWATCH_MARKED }}
								</button>
							</div>

							{{ S_FORM_TOKEN }}
						</div>
					</div>
				{% endif %}

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}