{% include 'mcp_header.html' %}

<div class="iz-mcp">

	<header class="iz-pagehead" aria-labelledby="iz-mcp-topic-title">
		<h2 class="iz-pagehead__title" id="iz-mcp-topic-title">
			<a class="iz-link iz-link--strong" href="{{ U_VIEW_TOPIC }}">
				{{ L_TOPIC }}{{ L_COLON }}&nbsp;{{ TOPIC_TITLE }}
			</a>
		</h2>
	</header>

	<form id="mcp" method="post" action="{{ S_MCP_ACTION }}" class="iz-form">

		<section class="iz-card iz-card--mcp" aria-labelledby="iz-topic-tools-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-topic-tools-title">{{ L_TITLE }}</h3>
			</header>

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

				<div class="iz-accordion" id="iz-mcp-topic-accordion">

					<!-- Display options -->
					<details class="iz-details" open>
						<summary class="iz-details__summary">
							<span class="iz-details__title">{{ L_DISPLAY_OPTIONS }}</span>
						</summary>

						<div class="iz-details__content">
							<div class="iz-grid iz-grid--2">
								<div class="iz-field">
									<label class="iz-label" for="posts_per_page">{{ L_POSTS_PER_PAGE }}{{ L_COLON }}</label>
									<p class="iz-help">{{ L_POSTS_PER_PAGE_EXPLAIN }}</p>
									<input class="iz-input" type="number" name="posts_per_page" id="posts_per_page" value="{{ POSTS_PER_PAGE }}" min="0" max="999999" />
								</div>

								<div class="iz-field">
									<label class="iz-label">{{ L_DISPLAY_POSTS }}{{ L_COLON }}</label>
									<div class="iz-grid iz-grid--3">
										<div class="iz-field">
											<label class="iz-label" for="st">{{ L_DISPLAY }}{{ L_COLON }}</label>
											<div class="iz-field__row">
												{{ S_SELECT_SORT_DAYS }}
											</div>
										</div>

										<div class="iz-field">
											<label class="iz-label" for="sk">{{ L_SORT_BY }}</label>
											<div class="iz-field__row">
												{{ S_SELECT_SORT_KEY }}
											</div>
										</div>

										<div class="iz-field">
											<label class="iz-label" for="sd">{{ L_SORT_BY }}</label>
											<div class="iz-field__row iz-field__row--actions">
												{{ S_SELECT_SORT_DIR }}
												<button class="iz-btn iz-btn--primary" name="sort" type="submit" value="{{ L_GO }}">
													{{ L_GO }}
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</details>

					<!-- Split topic -->
					<details class="iz-details" {% if S_SPLIT_VIEW %}open{% endif %}>
						<summary class="iz-details__summary">
							<span class="iz-details__title">{{ L_SPLIT_TOPIC }}</span>
						</summary>

						<div class="iz-details__content">
							{% if S_CAN_SPLIT %}
								<div class="iz-prose">
									<p>{{ L_SPLIT_TOPIC_EXPLAIN }}</p>
								</div>

								{% if S_SHOW_TOPIC_ICONS %}
									<div class="iz-field">
										<span class="iz-label">{{ L_TOPIC_ICON }}{{ L_COLON }}</span>

										<div class="iz-choices">
											<label class="iz-choice" for="icon_0">
												<input class="iz-choice__input" type="radio" name="icon" id="icon_0" value="0" checked="checked" />
												<span class="iz-choice__label">{{ L_NO_TOPIC_ICON }}</span>
											</label>

											{% for topic_icon in topic_icon %}
												<label class="iz-choice" for="icon_{{ topic_icon.ICON_ID }}">
													<input class="iz-choice__input" type="radio" name="icon" id="icon_{{ topic_icon.ICON_ID }}" value="{{ topic_icon.ICON_ID }}" {{ topic_icon.S_ICON_CHECKED }} />
													<span class="iz-choice__label">
														<img src="{{ topic_icon.ICON_IMG }}" width="{{ topic_icon.ICON_WIDTH }}" height="{{ topic_icon.ICON_HEIGHT }}" alt="" />
													</span>
												</label>
											{% endfor %}
										</div>
									</div>
								{% endif %}

								{% EVENT mcp_topic_options_before %}

								<div class="iz-field">
									<label class="iz-label" for="subject">{{ L_SPLIT_SUBJECT }}{{ L_COLON }}</label>
									<input class="iz-input" type="text" name="subject" id="subject" maxlength="64" tabindex="2" value="{{ SPLIT_SUBJECT }}" title="{{ L_SPLIT_SUBJECT }}" />
								</div>

								{% EVENT mcp_topic_options_after %}

								<div class="iz-field">
									<label class="iz-label" for="to_forum_id">{{ L_SPLIT_FORUM }}{{ L_COLON }}</label>
									<div class="iz-field__row iz-field__row--actions">
										<select class="iz-select" name="to_forum_id" id="to_forum_id">
											{{ S_FORUM_SELECT }}
										</select>
										<button class="iz-btn iz-btn--primary" name="sort" type="submit" value="{{ L_GO }}">
											{{ L_GO }}
										</button>
									</div>
								</div>
							{% endif %}
						</div>
					</details>

					<!-- Merge posts -->
					<details class="iz-details" {% if S_MERGE_VIEW %}open{% endif %}>
						<summary class="iz-details__summary">
							<span class="iz-details__title">{{ L_MERGE_POSTS }}</span>
						</summary>

						<div class="iz-details__content">
							{% if S_CAN_MERGE %}
								<div class="iz-prose">
									<p>{{ L_MERGE_TOPIC_EXPLAIN }}</p>
								</div>

								<div class="iz-field">
									<label class="iz-label" for="to_topic_id">{{ L_MERGE_TOPIC_ID }}{{ L_COLON }}</label>
									<input class="iz-input" type="text" name="to_topic_id" id="to_topic_id" value="{{ TO_TOPIC_ID }}" />
									<p class="iz-help">
										<a class="iz-link" href="{{ U_SELECT_TOPIC }}">{{ L_SELECT_TOPIC }}</a>
										{% if TO_TOPIC_INFO %}&nbsp;{{ TO_TOPIC_INFO }}{% endif %}
									</p>
								</div>
							{% endif %}
						</div>
					</details>

				</div>
			</div>
		</section>


		<section class="iz-card iz-card--mcp" aria-labelledby="iz-topic-review-title">
			<header class="iz-card__header">
				<div class="iz-toolbar" role="region" aria-label="{{ L_TOPIC_REVIEW }}">
					<div class="iz-toolbar__left">
						<h3 class="iz-card__title" id="iz-topic-review-title">{{ L_TOPIC_REVIEW }}</h3>
					</div>
					<div class="iz-toolbar__right">
						<a class="iz-link iz-link--muted topicreview-trigger"
						   href="#topicreview"
						   id="topicreview"
						   aria-expanded="true"
						   data-text-swap="{{ L_EXPAND_CLOSE }}"
						   data-text-original="{{ L_EXPAND_VIEW }}">
							{{ L_EXPAND_VIEW }}
						</a>
					</div>
				</div>
			</header>

			<div class="iz-card__body">
				<p class="iz-meta">
					{% EVENT mcp_topic_topic_title_before %}
					{{ TOPIC_TITLE }}
					{% EVENT mcp_topic_topic_title_after %}
				</p>

				<div class="topicreview topicreview-expand">

					{% for postrow in postrow %}
						{% EVENT mcp_topic_postrow_post_before %}

						<article class="iz-card iz-card--subtle" id="pr{{ postrow.POST_ID }}" aria-labelledby="iz-post-{{ postrow.POST_ID }}-title">
							<header class="iz-card__header">
								<div class="iz-toolbar" role="region" aria-label="{{ L_POST_DETAILS }}">
									<div class="iz-toolbar__left">
										<h4 class="iz-card__title" id="iz-post-{{ postrow.POST_ID }}-title">
											{% EVENT mcp_topic_postrow_post_subject_before %}
											<a class="iz-link iz-link--strong" href="{{ postrow.U_POST_DETAILS }}">{{ postrow.POST_SUBJECT }}</a>
											{% EVENT mcp_topic_postrow_post_subject_after %}
										</h4>
									</div>

									<div class="iz-toolbar__right">
										<a class="iz-btn iz-btn--secondary" href="{{ postrow.U_POST_DETAILS }}" title="{{ L_POST_DETAILS }}">
											{{ L_POST_DETAILS }}
										</a>

										<label class="iz-choice" for="post_id_list_select_{{ postrow.POST_ID }}">
											<input class="iz-choice__input"
												   type="checkbox"
												   id="post_id_list_select_{{ postrow.POST_ID }}"
												   name="post_id_list[]"
												   value="{{ postrow.POST_ID }}"{% if postrow.S_CHECKED %} checked="checked"{% endif %} />
											<span class="iz-choice__label">{{ L_MARK }}</span>
										</label>
									</div>
								</div>
							</header>

							<div class="iz-card__body">
								{% EVENT mcp_topic_postrow_post_details_before %}
								<p class="iz-meta">
									<a class="iz-link iz-link--muted" href="#pr{{ postrow.POST_ID }}">&#35;{{ postrow.POST_ID }}</a>
									&nbsp;{{ L_POSTED }}&nbsp;{{ L_POST_BY_AUTHOR }}&nbsp;<strong>{{ postrow.POST_AUTHOR_FULL }}</strong>
									&nbsp;&raquo;&nbsp;<time>{{ postrow.POST_DATE }}</time>
									{% if postrow.U_MCP_DETAILS %}
										&nbsp;&#91;&nbsp;<a class="iz-link" href="{{ postrow.U_MCP_DETAILS }}">{{ L_POST_DETAILS }}</a>&nbsp;&#93;
									{% endif %}
								</p>
								{% EVENT mcp_topic_postrow_post_details_after %}

								{% if postrow.S_POST_UNAPPROVED or postrow.S_POST_REPORTED %}
									<p class="iz-alert iz-alert--info" role="status">
										{% if postrow.S_POST_UNAPPROVED %}
											<a class="iz-link iz-link--strong" href="{{ postrow.U_MCP_APPROVE }}">{{ L_POST_UNAPPROVED }}</a>
											{% if postrow.S_POST_REPORTED %}<br />{% endif %}
										{% endif %}
										{% if postrow.S_POST_REPORTED %}
											<a class="iz-link iz-link--strong" href="{{ postrow.U_MCP_REPORT }}">{{ L_POST_REPORTED }}</a>
										{% endif %}
									</p>
								{% endif %}

								<div class="iz-prose" id="message_{{ postrow.POST_ID }}">
									{{ postrow.MESSAGE }}
								</div>

								{% EVENT mcp_topic_postrow_attachments_before %}

								{% if postrow.S_HAS_ATTACHMENTS %}
									<section class="iz-card iz-card--subtle" aria-labelledby="iz-attach-{{ postrow.POST_ID }}">
										<header class="iz-card__header">
											<h5 class="iz-card__title" id="iz-attach-{{ postrow.POST_ID }}">{{ L_ATTACHMENTS }}</h5>
										</header>
										<div class="iz-card__body">
											{% EVENT ss_mcp_topic_postrow_attachment_row_before %}
												{% for attachment in attachment %}{{ postrow.attachment.DISPLAY_ATTACHMENT }}{% endfor %}
											{% EVENT ss_mcp_topic_postrow_attachment_row_after %}
										</div>
									</section>
								{% endif %}

								{% EVENT mcp_topic_postrow_attachments_after %}
							</div>
						</article>

					<!-- BEGINELSE -->
						<p class="iz-alert iz-alert--info" role="status"><strong>{{ lang('NO_POSTS_TIME_FRAME') }}</strong></p>
					{% endfor %}
				</div>
			</div>
		</section>


		<section class="iz-card iz-card--mcp" aria-labelledby="iz-topic-actions-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-topic-actions-title">{{ L_OPTIONS }}</h3>
			</header>

			<div class="iz-card__body">
				<div class="iz-toolbar" role="region" aria-label="{{ L_OPTIONS }}">
					<div class="iz-toolbar__left">
						<div class="iz-field">
							<label class="iz-label" for="mcp_action">{{ L_SELECT_ACTION }}</label>
							<div class="iz-field__row iz-field__row--actions">
								<select class="iz-select" name="action" id="mcp_action">
									<option value="" selected="selected">{{ L_SELECT_ACTION }}</option>
									{% if S_CAN_APPROVE %}<option value="approve">{{ L_APPROVE_POSTS }}</option>{% endif %}
									{% if S_CAN_LOCK %}
										<option value="lock_post">{{ L_LOCK_POST_POSTS }}&nbsp;&#91;&nbsp;{{ L_LOCK_POST_EXPLAIN }}&nbsp;&#93;</option>
										<option value="unlock_post">{{ L_UNLOCK_POST_POSTS }}</option>
									{% endif %}
									{% if S_CAN_DELETE %}<option value="delete_post">{{ L_DELETE_POSTS }}</option>{% endif %}
									{% if S_CAN_MERGE %}<option value="merge_posts"{% if S_MERGE_VIEW %} selected="selected"{% endif %}>{{ L_MERGE_POSTS }}</option>{% endif %}
									{% if S_CAN_SPLIT %}
										<option value="split_all"{% if S_SPLIT_VIEW %} selected="selected"{% endif %}>{{ L_SPLIT_POSTS }}</option>
										<option value="split_beyond">{{ L_SPLIT_AFTER }}</option>
									{% endif %}
									{% if S_CAN_SYNC %}<option value="resync">{{ L_RESYNC }}</option>{% endif %}
								</select>

								<button class="iz-btn iz-btn--secondary" type="button" onclick="marklist('mcp', 'post', true); return false;">
									{{ L_MARK_ALL }}
								</button>
								<button class="iz-btn iz-btn--secondary" type="button" onclick="marklist('mcp', 'post', false); return false;">
									{{ L_UNMARK_ALL }}
								</button>

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

						{{ S_HIDDEN_FIELDS }}
						{{ S_FORM_TOKEN }}
					</div>

					<div class="iz-toolbar__right">
						<nav class="iz-pagination iz-pagination--compact" aria-label="{{ L_PAGINATION }}">
							<ul class="iz-pagination__list">
								<li class="iz-pagination__item"><span class="iz-pagination__meta">{{ TOTAL_POSTS }}</span></li>
								{% if pagination %}
									{% include 'pagination.html' %}
								{% else %}
									<li class="iz-pagination__item">
										<span class="iz-pagination__current" aria-current="page">{{ PAGE_NUMBER }}</span>
									</li>
								{% endif %}
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</section>

	</form>

	<script>
	(function () {
		'use strict';

		function toggleTopicReview(e) {
			var trigger = e.currentTarget;
			var review = document.querySelector('.topicreview');
			if (!review) return;

			e.preventDefault();

			var expanded = review.classList.toggle('topicreview-expand');
			trigger.setAttribute('aria-expanded', expanded ? 'true' : 'false');

			var swap = trigger.getAttribute('data-text-swap') || '';
			var original = trigger.getAttribute('data-text-original') || '';
			var current = trigger.textContent || '';

			trigger.textContent = (current == swap) ? original : swap;
		}

		document.addEventListener('DOMContentLoaded', function () {
			var trigger = document.querySelector('.topicreview-trigger');
			if (trigger) trigger.addEventListener('click', toggleTopicReview);
		});
	})();
	</script>

</div>

{% include 'mcp_footer.html' %}