<!-- </div> breaks the tabbed panel so the review is not merged into the tabs above -->

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

<div class="iz-section" aria-labelledby="iz-pm-history-title">
	<div class="iz-section__head">
		<h3 class="iz-section__title" id="iz-pm-history-title">
			{{ L_MESSAGE_HISTORY }}{{ L_COLON }}

			<span class="iz-section__action" id="topic-review">
				<a
					class="iz-link iz-link--muted iz-js-topicreview-toggle"
					href="#topic-review"
					data-text-swap="{{ L_EXPAND_CLOSE }}"
					data-text-original="{{ L_EXPAND_VIEW }}"
					aria-controls="iz-topicreview-content"
					aria-expanded="false"
				>
					{{ L_EXPAND_VIEW }}
				</a>
			</span>
		</h3>
	</div>
</div>

{% EVENT ucp_pm_history_review_before %}

<div class="iz-topicreview" id="iz-topicreview-content">
	<script>
		bbcodeEnabled = {{ S_BBCODE_ALLOWED }};
	</script>

	{% for history_row in history_row %}
		<section class="iz-card iz-card--nested iz-card--pm-history" id="pr{{ history_row.MSG_ID }}">
			<header class="iz-card__header">
				<h4 class="iz-card__title">
					<a class="iz-link{% if history_row.S_CURRENT_MSG %} iz-link--current{% endif %}"
					   href="{{ history_row.U_VIEW_MESSAGE }}">
						{{ history_row.SUBJECT }}
					</a>
				</h4>
			</header>

			<div class="iz-card__body">
				<div class="iz-row iz-row--between iz-row--wrap">
					<div class="iz-meta iz-meta--small">
						<span class="iz-meta__item">
							{{ history_row.MINI_POST_IMG }}&nbsp;{{ L_SENT_AT }}{{ L_COLON }}&nbsp;<strong>{{ history_row.SENT_DATE }}</strong>
						</span>
						<span class="iz-sep">•</span>
						<span class="iz-meta__item">
							{{ L_MESSAGE_BY_AUTHOR }}&nbsp;{{ history_row.MESSAGE_AUTHOR_FULL }}
						</span>
					</div>

					{% set SHOW_PM_HISTORY_POST_BUTTONS = (history_row.U_QUOTE or history_row.MESSAGE_AUTHOR_QUOTE) %}
					{% EVENT ucp_pm_history_post_buttons_list_before %}
					{% if $SHOW_PM_HISTORY_POST_BUTTONS %}
						<div class="iz-actions iz-actions--compact">
							{% EVENT ucp_pm_history_post_buttons_before %}
							{% if history_row.U_QUOTE or history_row.MESSAGE_AUTHOR_QUOTE %}
								<a
									class="iz-btn iz-btn--ghost iz-btn--sm"
									{% if history_row.U_QUOTE %}
										href="{{ history_row.U_QUOTE }}"
									{% else %}
										href="#postingbox"
										onclick="addquote({{ history_row.MSG_ID }}, '{{ history_row.MESSAGE_AUTHOR_QUOTE }}', '{{ LA_WROTE }}', {time:{{ history_row.MESSAGE_TIME }},user_id:{{ history_row.USER_ID }});"
									{% endif %}
									title="{{ L_QUOTE }} {{ history_row.MESSAGE_AUTHOR }}"
								>
									{{ L_QUOTE }}
								</a>
							{% endif %}
							{% EVENT ucp_pm_history_post_buttons_after %}
						</div>
					{% endif %}
					{% EVENT ucp_pm_history_post_buttons_list_after %}
				</div>

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

				<div class="iz-prose">
					{% if history_row.MESSAGE %}
						{{ history_row.MESSAGE }}
					{% else %}
						<div class="iz-alert iz-alert--danger" role="status">
							<strong>{{ L_ERROR }}</strong>&nbsp;{{ L_MESSAGE_REMOVED_FROM_OUTBOX }}
						</div>
					{% endif %}
				</div>

				<div id="message_{{ history_row.MSG_ID }}" class="iz-hidden" hidden>
					{{ history_row.DECODED_MESSAGE }}
				</div>
			</div>
		</section>

		<div class="iz-space iz-space--sm"></div>
	{% endfor %}

	<script>
		(function () {
			var toggle = document.querySelector('.iz-js-topicreview-toggle');
			var content = document.getElementById('iz-topicreview-content');
			if (!toggle || !content) return;

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

			toggle.addEventListener('click', function (e) {
				e.preventDefault();

				var expanded = toggle.getAttribute('aria-expanded') == 'true';
				var nextExpanded = !expanded;

				toggle.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
				toggle.textContent = nextExpanded ? swap : original;

				content.classList.toggle('iz-topicreview--expanded', nextExpanded);
			});
		})();
	</script>
</div>

{% EVENT ucp_pm_history_review_after %}
