{% include 'ucp_header.html' %}

<div class="tab-pane active">
	{% include 'ucp_pm_message_header.html' %}

	{% if S_DISPLAY_HISTORY and (U_VIEW_PREVIOUS_HISTORY or U_VIEW_NEXT_HISTORY) %}
		<nav class="iz-pager iz-pager--history" aria-label="{{ L_MESSAGE_HISTORY }}">
			<div class="iz-pager__nav">
				{% if U_VIEW_PREVIOUS_HISTORY %}
					<a class="iz-link" href="{{ U_VIEW_PREVIOUS_HISTORY }}">{{ L_VIEW_PREVIOUS_HISTORY }}</a>
				{% endif %}
				{% if U_VIEW_NEXT_HISTORY %}
					<span class="iz-sep">•</span>
					<a class="iz-link" href="{{ U_VIEW_NEXT_HISTORY }}">{{ L_VIEW_NEXT_HISTORY }}</a>
				{% endif %}
			</div>
		</nav>
		<div class="iz-space iz-space--sm"></div>
	{% endif %}

	<article id="post-{{ MESSAGE_ID }}" class="iz-pm">

		<section class="iz-card iz-card--pm-message" aria-label="{{ SUBJECT }}">
			<header class="iz-card__header">
				<div class="iz-row iz-row--between iz-row--wrap iz-row--gap-sm">
					<h3 class="iz-card__title">{{ SUBJECT }}</h3>

					<div class="iz-actions iz-actions--compact">
						{% if U_EMAIL_PM %}
							<a href="{{ U_EMAIL_PM }}" title="{{ L_EMAIL_PM }}" class="iz-btn iz-btn--ghost iz-btn--sm">
								{{ L_EMAIL_PM }}
							</a>
						{% endif %}
						{% if U_PRINT_PM %}
							<a href="{{ U_PRINT_PM }}" title="{{ L_PRINT_PM }}" accesskey="p" class="iz-btn iz-btn--ghost iz-btn--sm">
								{{ L_PRINT_PM }}
							</a>
						{% endif %}

						{% set SHOW_PM_POST_BUTTONS = (U_EDIT or U_DELETE or U_REPORT or U_QUOTE) %}
						{% EVENT ucp_pm_viewmessage_post_buttons_list_before %}
						{% if $SHOW_PM_POST_BUTTONS %}
							{% EVENT ucp_pm_viewmessage_post_buttons_before %}
							{% if U_EDIT %}
								<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ U_EDIT }}" title="{{ L_POST_EDIT_PM }}">
									{{ L_POST_EDIT_PM }}
								</a>
							{% endif %}
							{% if U_DELETE %}
								<a class="iz-btn iz-btn--danger iz-btn--sm" href="{{ U_DELETE }}" title="{{ L_DELETE_MESSAGE }}">
									{{ L_DELETE_MESSAGE }}
								</a>
							{% endif %}
							{% if U_REPORT %}
								<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ U_REPORT }}" title="{{ L_REPORT_PM }}">
									{{ L_REPORT_PM }}
								</a>
							{% endif %}
							{% if U_QUOTE %}
								<a class="iz-btn iz-btn--primary iz-btn--sm" href="{{ U_QUOTE }}" title="{{ L_POST_QUOTE_PM }}">
									{{ L_POST_QUOTE_PM }}
								</a>
							{% endif %}
							{% EVENT ucp_pm_viewmessage_post_buttons_after %}
						{% endif %}
						{% EVENT ucp_pm_viewmessage_post_buttons_list_after %}
					</div>
				</div>

				<div class="iz-meta iz-meta--small">
					<span class="iz-meta__item">{{ SENT_DATE }}</span>
				</div>
			</header>

			<div class="iz-card__body">

				<section class="iz-pm__meta" aria-label="{{ L_MESSAGE_DETAILS }}">
					<div class="iz-row iz-row--wrap iz-row--gap-md iz-row--between">
						<div class="iz-author">
							<div class="iz-author__avatar" aria-hidden="true">
								{% if AUTHOR_AVATAR %}
									<a href="{{ U_MESSAGE_AUTHOR }}">{{ AUTHOR_AVATAR }}</a>
								{% else %}
									<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
								{% endif %}
							</div>

							<div class="iz-author__body">
								<div class="iz-meta">
									<span class="iz-meta__item">{{ L_PM_FROM }}{{ L_COLON }}&nbsp;{{ MESSAGE_AUTHOR_FULL }}</span>
								</div>

								{% if S_TO_RECIPIENT %}
									<div class="iz-meta iz-meta--small">
										<span class="iz-meta__item">{{ L_TO }}{{ L_COLON }}&nbsp;
											{% for to_recipient in to_recipient %}
												{% if to_recipient.NAME_FULL %}
													{{ to_recipient.NAME_FULL }}&nbsp;&#45;
												{% else %}
													<a class="iz-link" href="{{ to_recipient.U_VIEW }}"{% if to_recipient.COLOUR %} style="color:{{ to_recipient.COLOUR }};"{% endif %}>
														<strong>{{ to_recipient.NAME }}</strong>
													</a>&nbsp;
												{% endif %}
											{% endfor %}
										</span>
									</div>
								{% endif %}

								{% if S_BCC_RECIPIENT %}
									<div class="iz-meta iz-meta--small">
										<span class="iz-meta__item">{{ L_BCC }}{{ L_COLON }}&nbsp;
											{% for bcc_recipient in bcc_recipient %}
												{% if bcc_recipient.NAME_FULL %}
													{{ bcc_recipient.NAME_FULL }}&nbsp;&#45;
												{% else %}
													<a class="iz-link" href="{{ bcc_recipient.U_VIEW }}"{% if bcc_recipient.COLOUR %} style="color:{{ bcc_recipient.COLOUR }};"{% endif %}>
														<strong>{{ bcc_recipient.NAME }}</strong>
													</a>&nbsp;
												{% endif %}
											{% endfor %}
										</span>
									</div>
								{% endif %}
							</div>
						</div>

						<div class="iz-actions iz-actions--compact">
							{% if U_PM %}
								<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ U_PM }}">
									{{ L_PRIVATE_MESSAGE }}
								</a>
							{% endif %}

							<details class="iz-disclosure iz-disclosure--mini-profile">
								<summary class="iz-btn iz-btn--ghost iz-btn--sm">
									{{ L_USER_MINI_PROFILE }}
								</summary>

								<div class="iz-disclosure__body">
									<div class="iz-mini-profile">
										{% EVENT ucp_pm_viewmessage_avatar_before %}
										<div class="iz-mini-profile__avatar">
											{% if AUTHOR_AVATAR %}
												<a href="{{ U_MESSAGE_AUTHOR }}">{{ AUTHOR_AVATAR }}</a>
											{% else %}
												<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
											{% endif %}
										</div>
										{% EVENT ucp_pm_viewmessage_avatar_after %}

										{% EVENT ucp_pm_viewmessage_rank_before %}
										{% if RANK_IMG %}
											<div class="iz-mini-profile__rank">{{ RANK_IMG }}</div>
										{% endif %}
										{% EVENT ucp_pm_viewmessage_rank_after %}

										<div class="iz-mini-profile__name">{{ MESSAGE_AUTHOR_FULL }}</div>

										<ul class="iz-list iz-list--compact">
											{% if RANK_TITLE %}
												<li class="iz-list__item">{{ L_RANK }}{{ L_COLON }}&nbsp;{{ RANK_TITLE }}</li>
											{% endif %}
											<li class="iz-list__item">{{ L_POSTS }}{{ L_COLON }}&nbsp;{{ AUTHOR_POSTS }}</li>
											{% if AUTHOR_JOINED %}
												<li class="iz-list__item">{{ L_JOINED }}{{ L_COLON }}&nbsp;{{ AUTHOR_JOINED }}</li>
											{% endif %}
											<li class="iz-list__item">
												{{ L_USER_STATUS }}{{ L_COLON }}{% if S_ONLINE %}&nbsp;{{ L_ONLINE }}{% else %}&nbsp;{{ L_OFF_LINE }}{% endif %}
											</li>

											{% EVENT ucp_pm_viewmessage_custom_fields_before %}
											{% for custom_fields in custom_fields %}
												{% if not custom_fields.S_PROFILE_CONTACT %}
													<li class="iz-list__item profile-custom-field profile-{{ custom_fields.PROFILE_FIELD_IDENT }}">
														{{ custom_fields.PROFILE_FIELD_NAME }}{{ L_COLON }}&nbsp;{{ custom_fields.PROFILE_FIELD_VALUE }}
													</li>
												{% endif %}
											{% endfor %}
											{% EVENT ucp_pm_viewmessage_custom_fields_after %}
										</ul>

										<div class="iz-actions iz-actions--compact">
											<a class="iz-btn iz-btn--ghost iz-btn--sm" href="{{ U_MESSAGE_AUTHOR }}">
												{{ L_USER_MINI_PROFILE_VIEW_FULL }}
											</a>
										</div>

										{% EVENT ucp_pm_viewmessage_contact_fields_before %}
										{% if contact %}
											<div class="iz-space iz-space--sm"></div>
											<ul class="iz-list iz-list--contact">
												{% for contact in contact %}
													<li class="iz-list__item">
														<a class="iz-link" href="{% if contact.U_CONTACT %}{{ contact.U_CONTACT }}{% else %}{{ contact.U_PROFILE_AUTHOR }}{% endif %}"
														   title="{{ contact.NAME }}"
														   {% if contact.ID == 'jabber' %}onclick="popup(this.href, 750, 320); return false;"{% endif %}>
															{{ contact.NAME }}
														</a>
													</li>
												{% endfor %}
											</ul>
										{% endif %}
										{% EVENT ucp_pm_viewmessage_contact_fields_after %}
									</div>
								</div>
							</details>
						</div>
					</div>
				</section>

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

				<div class="iz-prose iz-pm__content">
					{{ MESSAGE }}
				</div>

				{% if S_HAS_ATTACHMENTS %}
					<div class="iz-space iz-space--sm"></div>
					<section class="iz-attachbox" aria-label="{{ L_ATTACHMENTS }}">
						<h4 class="iz-attachbox__title">{{ L_ATTACHMENTS }}</h4>
						{% EVENT ss_ucp_pm_viewmessage_attachment_row_before %}
							{% for attachment in attachment %}{{ attachment.DISPLAY_ATTACHMENT }}{% endfor %}
						{% EVENT ss_ucp_pm_viewmessage_attachment_row_after %}
					</section>
				{% endif %}

				{% if S_DISPLAY_NOTICE %}
					<div class="iz-space iz-space--sm"></div>
					<div class="iz-alert iz-alert--info" role="note">
						{{ L_DOWNLOAD_NOTICE }}
					</div>
				{% endif %}

				{% if EDITED_MESSAGE or EDIT_REASON %}
					<div class="iz-space iz-space--sm"></div>
					<div class="iz-alert iz-alert--info" role="status">
						{{ EDITED_MESSAGE }}
						{% if EDIT_REASON %}
							<div class="iz-meta iz-meta--small">
								<strong>{{ L_REASON }}{{ L_COLON }}</strong>&nbsp;{{ EDIT_REASON }}
							</div>
						{% endif %}
					</div>
				{% endif %}

				{% if SIGNATURE %}
					<div class="iz-separator"></div>
					<div id="sig{{ MESSAGE_ID }}" class="iz-signature">
						{{ SIGNATURE }}
					</div>
				{% endif %}

			</div>
		</section>

	</article>

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

	<nav class="iz-pager iz-pager--pm" aria-label="{{ L_PAGINATION }}">
		<div class="iz-pager__nav">
			{% if U_PREVIOUS_PM %}
				<a class="iz-link" href="{{ U_PREVIOUS_PM }}">{{ L_VIEW_PREVIOUS_PM }}</a>
			{% endif %}
			{% if U_NEXT_PM %}
				<span class="iz-sep">•</span>
				<a class="iz-link" href="{{ U_NEXT_PM }}">{{ L_VIEW_NEXT_PM }}</a>
			{% endif %}
		</div>
	</nav>

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

		<details class="iz-disclosure">
			<summary class="iz-disclosure__summary">{{ L_OPTIONS }}</summary>
			<div class="iz-disclosure__body">

				<div class="iz-fieldgroup">

					{% if S_MARK_OPTIONS %}
						<div class="iz-field">
							<label class="iz-field__label" for="mark_option">{{ L_MARK }}</label>
							<div class="iz-field__control">
								<select class="iz-select" name="mark_option" id="mark_option">
									{{ S_MARK_OPTIONS }}
								</select>
							</div>
							<div class="iz-field__actions">
								<button class="iz-btn iz-btn--ghost iz-btn--sm" type="submit" name="submit_mark" value="{{ L_GO }}">
									{{ L_GO }}
								</button>
							</div>
						</div>
					{% endif %}

					{% if not S_UNREAD and not S_SPECIAL_FOLDER %}
						<div class="iz-field">
							<label class="iz-field__label" for="dest_folder">
								{% if S_VIEW_MESSAGE %}{{ L_MOVE_TO_FOLDER }}{{ L_COLON }}{% else %}{{ L_MOVE_MARKED_TO_FOLDER }}{% endif %}
							</label>
							<div class="iz-field__control">
								<select class="iz-select" name="dest_folder" id="dest_folder">
									{{ S_TO_FOLDER_OPTIONS }}
								</select>
							</div>
							<div class="iz-field__actions">
								<button class="iz-btn iz-btn--primary iz-btn--sm" type="submit" name="move_pm" value="{{ L_GO }}">
									{{ L_GO }}
								</button>
							</div>
						</div>
					{% endif %}

					<input type="hidden" name="marked_msg_id[]" value="{{ MSG_ID }}" />
					<input type="hidden" name="cur_folder_id" value="{{ CUR_FOLDER_ID }}" />
					<input type="hidden" name="p" value="{{ MSG_ID }}" />

				</div>

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

	{% include 'ucp_pm_message_footer.html' %}

	{% if S_DISPLAY_HISTORY %}
		<div class="iz-space iz-space--md"></div>
		{% include 'ucp_pm_history.html' %}
	{% endif %}

</div>

{% include 'ucp_footer.html' %}