<header class="iz-sectionhead" id="topic-review">
	<h2 class="iz-sectionhead__title">
		{{ L_TOPIC_REVIEW }}{{ L_COLON }}&nbsp;{{ TOPIC_TITLE }}
	</h2>

	<div class="iz-sectionhead__actions">
		<button
			type="button"
			class="iz-btn iz-btn--ghost iz-btn--sm topic-review-trigger"
			data-text-swap="{{ L_EXPAND_CLOSE }}"
			data-text-original="{{ L_EXPAND_VIEW }}"
			aria-controls="topicreview-content"
			aria-expanded="false"
		>
			{{ L_EXPAND_VIEW }}
		</button>
	</div>
</header>

<div class="topicreview-content" id="topicreview-content">
{% for topic_review_row in topic_review_row %}

	{% if topic_review_row.S_IGNORE_POST %}
		<section class="iz-alert iz-alert--muted iz-topicreview__notice">
			<p>{{ topic_review_row.L_IGNORE_POST }}</p>
			<button type="button" class="iz-btn iz-btn--warning iz-btn--sm iz-topicreview__toggle" data-target="pr{{ topic_review_row.POST_ID }}">
				{{ L_SHOW }}
			</button>
		</section>
	<!-- ELSE IF topic_review_row.S_POST_DELETED -->
		<section class="iz-alert iz-alert--muted iz-topicreview__notice">
			<p>{{ topic_review_row.L_DELETE_POST }}</p>
			<button type="button" class="iz-btn iz-btn--warning iz-btn--sm iz-topicreview__toggle" data-target="pr{{ topic_review_row.POST_ID }}">
				{{ L_SHOW }}
			</button>
		</section>
	{% else %}
	{% endif %}

	<article
		class="iz-card iz-topicreview__post{% if topic_review_row.POST_ID == REPORTED_POST_ID %} is-reported{% endif %}{% if topic_review_row.S_IGNORE_POST or topic_review_row.S_POST_DELETED %} is-collapsed{% endif %}"
		id="pr{{ topic_review_row.POST_ID }}"
		{% if topic_review_row.S_IGNORE_POST or topic_review_row.S_POST_DELETED %}hidden{% endif %}
	>
		<div class="iz-card__body">

			{% if topic_review_row.S_POST_PRIVATE %}
				<p class="iz-meta">
					{{ L_PRIVATE_BY }}<strong>&nbsp;{{ topic_review_row.POST_AUTHOR_FULL }}</strong>&nbsp;&raquo;&nbsp;{{ topic_review_row.POST_DATE }}
				</p>
			{% else %}

				<h3 class="iz-h4">
					<a class="iz-link" href="#pr{{ topic_review_row.POST_ID }}">{{ topic_review_row.POST_SUBJECT }}</a>

					<span class="iz-topicreview__postid iz-only-desktop">
						{% if S_IS_BOT %}
							{{ topic_review_row.POST_ID }}
						{% else %}
							<a class="iz-link" href="{{ topic_review_row.U_MINI_POST }}" title="{{ L_JUMP_TO_POST }}">&#35;{{ topic_review_row.POST_ID }}</a>
						{% endif %}
					</span>
				</h3>

				<div class="iz-topicreview__meta">
					{% EVENT posting_topic_review_row_post_details_before %}
					<p class="iz-meta">
						{{ L_POST_BY_AUTHOR }}<strong>&nbsp;{{ topic_review_row.POST_AUTHOR_FULL }}</strong>&nbsp;&raquo;&nbsp;{{ topic_review_row.POST_DATE }}
					</p>
					{% EVENT posting_topic_review_row_post_details_after %}

					{% if (topic_review_row.POSTER_QUOTE and topic_review_row.DECODED_MESSAGE) or topic_review_row.U_MCP_DETAILS %}
						<div class="iz-topicreview__actions">
							{% if topic_review_row.POSTER_QUOTE and topic_review_row.DECODED_MESSAGE %}
								<a
									class="iz-btn iz-btn--ghost iz-btn--sm"
									href="#postingbox"
									onclick="addquote({{ topic_review_row.POST_ID }}, '{{ topic_review_row.POSTER_QUOTE }}', '{{ LA_WROTE }}', {post_id:{{ topic_review_row.POST_ID }},time:{{ topic_review_row.POST_TIME }},user_id:{{ topic_review_row.USER_ID }});"
									title="{{ L_QUOTE }} {{ topic_review_row.POST_AUTHOR }}"
								>
									{{ L_QUOTE }}
								</a>
							{% endif %}

							{% if topic_review_row.U_MCP_DETAILS %}
								<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ topic_review_row.U_MCP_DETAILS }}" title="{{ L_POST_DETAILS }}">
									{{ L_POST_DETAILS }}
								</a>
							{% endif %}
						</div>
					{% endif %}
				</div>

				<div class="iz-prose iz-topicreview__content">{{ topic_review_row.MESSAGE }}</div>

				{% if topic_review_row.S_HAS_ATTACHMENTS %}
					<section class="iz-attachments" aria-label="{{ L_ATTACHMENTS }}">
						<h4 class="iz-h5">{{ L_ATTACHMENTS }}</h4>
						{% EVENT ss_posting_topic_review_attachment_row_before %}
							{% for attachment in attachment %}{{ topic_review_row.attachment.DISPLAY_ATTACHMENT }}{% endfor %}
						{% EVENT ss_posting_topic_review_attachment_row_after %}
					</section>
				{% endif %}

				{% if topic_review_row.POSTER_QUOTE and topic_review_row.DECODED_MESSAGE %}
					<div id="message_{{ topic_review_row.POST_ID }}" style="display:none;">{{ topic_review_row.DECODED_MESSAGE }}</div>
				{% endif %}

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

{% endfor %}
</div>

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

	var bbcodeEnabled = {{ S_BBCODE_ALLOWED }};

	function swapText(el) {
		var swap = el.getAttribute('data-text-swap') || '';
		var original = el.getAttribute('data-text-original') || '';
		el.textContent = (el.textContent == swap) ? original : swap;
	}

	function toggleExpanded(el, expanded) {
		el.setAttribute('aria-expanded', expanded ? 'true' : 'false');
	}

	window.addEventListener('load', function () {
		var trigger = document.querySelector('.topic-review-trigger');
		var container = document.querySelector('.topicreview-content');

		if (trigger && container) {
			trigger.addEventListener('click', function () {
				swapText(trigger);
				container.classList.toggle('topicreview-expand');
				toggleExpanded(trigger, container.classList.contains('topicreview-expand'));
			});
		}

		var toggles = document.querySelectorAll('.iz-topicreview__toggle[data-target]');
		for (var i = 0; i < toggles.length; i++) {
			toggles[i].addEventListener('click', function (e) {
				var id = e.currentTarget.getAttribute('data-target');
				var panel = document.getElementById(id);
				if (!panel) return;

				var isHidden = panel.hasAttribute('hidden');
				if (isHidden) {
					panel.removeAttribute('hidden');
					panel.classList.remove('is-collapsed');
				} else {
					panel.setAttribute('hidden', '');
					panel.classList.add('is-collapsed');
				}
			});
		}
	});
})();
</script>
