{% include 'ucp_header.html' %}

<div class="tab-pane active">

	<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">
			<div class="iz-alert iz-alert--info" role="status">
				{{ L_UCP_WELCOME }}
			</div>

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

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

					<div class="iz-card__body">
						<div class="iz-tablewrap" role="region" aria-label="{{ L_IMPORTANT_NEWS }}">
							<table class="iz-table iz-table--topics">
								<thead>
									<tr>
										<th scope="col">{{ L_TOPICS }}</th>
										<th scope="col" class="iz-only-desktop">{{ L_LAST_POST }}</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 %}
														<span class="iz-badge iz-badge--new">{{ topicrow.TOPIC_FOLDER_IMG_ALT }}</span>
													{% else %}
														<span class="iz-badge iz-badge--muted">{{ topicrow.TOPIC_FOLDER_IMG_ALT }}</span>
													{% endif %}

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

													{% if topicrow.S_UNREAD %}
														<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 %}

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

													{% 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 }}">
																				<span class="iz-visually-hidden">{{ L_PREVIOUS }}</span>
																				{{ 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 }}">
																				<span class="iz-visually-hidden">{{ L_NEXT }}</span>
																				{{ 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 (desktop has its own column) -->
												<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">
													<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>
													<span class="iz-meta iz-meta--small">{{ topicrow.LAST_POST_TIME }}</span>
												</div>
											</td>
										</tr>
									{% endfor %}
								</tbody>
							</table>
						</div>
					</div>
				</section>
			{% endif %}

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

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

				<div class="iz-card__body">
					{% EVENT ucp_main_front_user_activity_before %}

					<ul class="iz-timeline" aria-label="{{ L_YOUR_DETAILS }}">
						{% EVENT ucp_main_front_user_activity_prepend %}

						<li class="iz-timeline__item">
							<div class="iz-timeline__label">{{ L_USER }}&nbsp;{{ L_JOINED_BOARD }}</div>
							<div class="iz-timeline__value">{{ JOINED }}</div>
						</li>

						<li class="iz-timeline__item">
							<div class="iz-timeline__label">{{ L_VISITED_BOARD }}</div>
							<div class="iz-timeline__value">{{ LAST_VISIT_YOU }}</div>
						</li>

						<li class="iz-timeline__item">
							<div class="iz-timeline__label">
								{{ L_TOTAL_POSTS }}
								{% if POSTS_PCT %}
									&nbsp;{{ POSTS }}
									{% if S_DISPLAY_SEARCH %}
										&nbsp;&#124;&nbsp;<a class="iz-link" href="{{ U_SEARCH_USER }}">{{ L_SEARCH_YOUR_POSTS }}</a>
									{% endif %}
								{% else %}
									&nbsp;{{ POSTS }}
								{% endif %}
							</div>
							<div class="iz-timeline__value">
								&#40;{{ POSTS_DAY }}&nbsp;&#47;&nbsp;{{ POSTS_PCT }}&#41;
							</div>
						</li>

						{% if ACTIVE_FORUM != '' %}
							<li class="iz-timeline__item">
								<div class="iz-timeline__label">
									{{ L_ACTIVE_IN_FORUM }}&nbsp;
									<strong><a class="iz-link" href="{{ U_ACTIVE_FORUM }}">{{ ACTIVE_FORUM }}</a></strong>
								</div>
								<div class="iz-timeline__value">
									&#40;{{ ACTIVE_FORUM_POSTS }}&nbsp;&#47;&nbsp;{{ ACTIVE_FORUM_PCT }}&#41;
								</div>
							</li>
						{% endif %}

						{% if ACTIVE_TOPIC != '' %}
							<li class="iz-timeline__item">
								<div class="iz-timeline__label">
									{{ L_ACTIVE_IN_TOPIC }}&nbsp;
									<strong><a class="iz-link" href="{{ U_ACTIVE_TOPIC }}">{{ ACTIVE_TOPIC }}</a></strong>
								</div>
								<div class="iz-timeline__value">
									&#40;{{ ACTIVE_TOPIC_POSTS }}&nbsp;&#47;&nbsp;{{ ACTIVE_TOPIC_PCT }}&#41;
								</div>
							</li>
						{% endif %}

						{% if WARNINGS %}
							<li class="iz-timeline__item">
								<div class="iz-timeline__label">{{ L_YOUR_WARNINGS }}</div>
								<div class="iz-timeline__value">
									{{ WARNING_IMG }}&nbsp;&#91;{{ WARNINGS }}&#93;
								</div>
							</li>
						{% endif %}

						{% EVENT ucp_main_front_user_activity_append %}
					</ul>

					{% EVENT ucp_main_front_user_activity_after %}
				</div>
			</section>

		</div>
	</section>

</div>

{% include 'ucp_footer.html' %}