{% include 'overall_header.html' %}
{% EVENT memberlist_view_content_prepend %}

<div class="iz-page" id="viewprofile">

	<header class="iz-pagehead" aria-labelledby="iz-profile-title">
		<h2 class="iz-pagehead__title" id="iz-profile-title">{{ PAGE_TITLE }}</h2>
	</header>

	<form method="post" action="{{ S_PROFILE_ACTION }}" id="viewprofile" class="iz-form">

		<div class="iz-grid iz-grid--2">

			<!-- Left: identity card -->
			<section class="iz-card iz-card--profile" aria-labelledby="iz-identity-title">
				<header class="iz-card__header">
					<div class="iz-toolbar" role="region" aria-label="{{ L_OPTIONS }}">
						<div class="iz-toolbar__left">
							<h3 class="iz-card__title" id="iz-identity-title">{{ L_USERNAME }}</h3>
						</div>

						<div class="iz-toolbar__right">
							{% if U_EDIT_SELF %}
								<a class="iz-btn iz-btn--secondary" href="{{ U_EDIT_SELF }}" title="{{ L_EDIT_PROFILE }}">
									{{ L_EDIT_PROFILE }}
								</a>
							{% endif %}

							{% if U_ACP or U_USER_BAN or U_SWITCH_PERMISSIONS or U_RESTORE_PERMISSIONS or U_USER_ADMIN %}
								<div class="iz-menu" role="group" aria-label="{{ L_USER_ADMIN }}">
									{% if U_USER_ADMIN %}
										<a class="iz-btn iz-btn--secondary" href="{{ U_USER_ADMIN }}">{{ L_USER_ADMIN }}</a>
									{% endif %}
									{% if U_ACP %}
										<a class="iz-btn iz-btn--secondary" href="{{ U_ACP }}">{{ L_ACP }}</a>
									{% endif %}
									{% if U_USER_BAN %}
										<a class="iz-btn iz-btn--danger" href="{{ U_USER_BAN }}">{{ L_USER_BAN }}</a>
									{% endif %}
									{% if U_SWITCH_PERMISSIONS %}
										<a class="iz-btn iz-btn--secondary" href="{{ U_SWITCH_PERMISSIONS }}">{{ L_USE_PERMISSIONS }}</a>
									{% endif %}
									{% if U_RESTORE_PERMISSIONS %}
										<a class="iz-btn iz-btn--secondary" href="{{ U_RESTORE_PERMISSIONS }}">{{ L_RESTORE_PERMISSIONS }}</a>
									{% endif %}
								</div>
							{% endif %}
						</div>
					</div>
				</header>

				<div class="iz-card__body">
					<div class="iz-profile">
						<div class="iz-profile__avatar">
							{% if AVATAR_IMG %}
								{{ AVATAR_IMG }}
							{% else %}
								<img src="{{ T_THEME_PATH }}/images/no_avatar.gif" alt="" />
							{% endif %}
						</div>

						<div class="iz-profile__main">
							<p class="iz-profile__name">
								{% if USER_COLOR %}
									<span style="color:{{ USER_COLOR }}; font-weight: 700;">{{ USERNAME }}</span>
								{% else %}
									{{ USERNAME }}
								{% endif %}
							</p>

							{% EVENT memberlist_view_rank_no_avatar_before %}
							{% if RANK_TITLE %}
								<p class="iz-meta">{{ RANK_TITLE }}</p>
							{% endif %}
							{% EVENT memberlist_view_rank_no_avatar_after %}

							{% EVENT memberlist_view_rank_avatar_before %}
							{% if RANK_IMG %}
								<div class="iz-meta">{{ RANK_IMG }}</div>
							{% endif %}
							{% EVENT memberlist_view_rank_avatar_after %}
						</div>
					</div>

					{% if INTERESTS %}
						<hr class="iz-hr" />
						<div class="iz-prose" aria-label="{{ L_INTERESTS }}">
							<h4 class="iz-h4">{{ L_INTERESTS }}</h4>
							<p>{{ INTERESTS }}</p>
						</div>
					{% endif %}
				</div>

				{% if S_USER_LOGGED_IN and S_ZEBRA %}
					<div class="iz-card__footer">
						{% EVENT memberlist_view_zebra_before %}
						<fieldset class="iz-actions iz-actions--inline" aria-label="{{ L_OPTIONS }}">
							{% if U_REMOVE_FRIEND %}
								<a class="iz-btn iz-btn--secondary zebra" href="{{ U_REMOVE_FRIEND }}" data-ajax="zebra">
									{{ L_REMOVE_FRIEND }}
								</a>
							{% elseif U_REMOVE_FOE %}
								<a class="iz-btn iz-btn--secondary zebra" href="{{ U_REMOVE_FOE }}" data-ajax="zebra">
									{{ L_REMOVE_FOE }}
								</a>
							{% else %}
								{% if U_ADD_FRIEND %}
									<a class="iz-btn iz-btn--secondary zebra" href="{{ U_ADD_FRIEND }}" data-ajax="zebra">
										{{ L_ADD_FRIEND }}
									</a>
								{% endif %}
								{% if U_ADD_FOE %}
									<a class="iz-btn iz-btn--secondary zebra" href="{{ U_ADD_FOE }}" data-ajax="zebra">
										{{ L_ADD_FOE }}
									</a>
								{% endif %}
							{% endif %}
						</fieldset>
						{% EVENT memberlist_view_zebra_after %}
					</div>
				{% endif %}
			</section>


			<!-- Right: bio / stats / contact -->
			<section class="iz-card" aria-labelledby="iz-bio-title">
				<header class="iz-card__header">
					<h3 class="iz-card__title" id="iz-bio-title">
						{{ L_BIO }}
						{% if S_USER_INACTIVE %}
							<span class="iz-badge iz-badge--muted">{{ L_USER_IS_INACTIVE }}{{ L_COLON }}&nbsp;{{ USER_INACTIVE_REASON }}</span>
						{% endif %}
					</h3>
				</header>

				<div class="iz-card__body">
					<ul class="iz-list iz-list--meta">
						{% EVENT memberlist_view_user_statistics_before %}
						<li class="iz-list__item">
							<span class="iz-list__label">{{ L_USERNAME }}</span>
							<span class="iz-list__value">
								{% if USER_COLOR %}
									<span style="color:{{ USER_COLOR }}; font-weight: 700;">{{ USERNAME }}</span>
								{% else %}
									{{ USERNAME }}
								{% endif %}
							</span>
						</li>

						<li class="iz-list__item">
							<span class="iz-list__label">{{ L_USER_STATUS }}</span>
							<span class="iz-list__value">{% if S_ONLINE %}{{ L_ONLINE }}{% else %}{{ L_OFF_LINE }}{% endif %}</span>
						</li>

						{% if AGE != '' %}
							<li class="iz-list__item">
								<span class="iz-list__label">{{ L_AGE }}</span>
								<span class="iz-list__value">{{ AGE }}</span>
							</li>
						{% endif %}

						{% EVENT memberlist_view_non_contact_custom_fields_before %}
						{% for custom_fields in custom_fields %}
							{% if not custom_fields.S_PROFILE_CONTACT %}
								<li class="iz-list__item">
									<span class="iz-list__label">{{ custom_fields.PROFILE_FIELD_NAME }}</span>
									<span class="iz-list__value">{{ custom_fields.PROFILE_FIELD_VALUE }}</span>
								</li>
							{% endif %}
						{% endfor %}
						{% EVENT memberlist_view_non_contact_custom_fields_after %}
						{% EVENT memberlist_view_user_statistics_after %}
					</ul>
				</div>

				<div class="iz-card__footer">
					<nav class="iz-actions iz-actions--inline" aria-label="{{ L_CONTACT }}">
						{% if U_PM %}
							<a class="iz-btn iz-btn--secondary" href="{{ U_PM }}" title="{{ L_SEND_PRIVATE_MESSAGE }}">{{ L_SEND_PRIVATE_MESSAGE }}</a>
						{% endif %}
						{% if U_EMAIL %}
							<a class="iz-btn iz-btn--secondary" href="{{ U_EMAIL }}" title="{{ L_SEND_EMAIL_USER }}">{{ L_SEND_EMAIL_USER }}</a>
						{% endif %}
						{% if U_JABBER and S_JABBER_ENABLED %}
							<a class="iz-btn iz-btn--secondary" href="{{ U_JABBER }}" onclick="popup(this.href, 550, 320); return false;" title="{{ L_SEND_JABBER_MESSAGE }}">
								{{ L_SEND_JABBER_MESSAGE }}
							</a>
						{% endif %}

						{% for custom_fields in custom_fields %}
							{% if custom_fields.S_PROFILE_CONTACT %}
								{% if custom_fields.PROFILE_FIELD_CONTACT %}
									<a class="iz-btn iz-btn--secondary" href="{{ custom_fields.PROFILE_FIELD_CONTACT }}" title="{{ custom_fields.PROFILE_FIELD_DESC }}">
										{{ custom_fields.PROFILE_FIELD_DESC }}
									</a>
								{% endif %}
							{% endif %}
						{% endfor %}

						{% EVENT memberlist_view_contact_custom_fields_after %}
					</nav>
				</div>
			</section>

		</div>

	</form>


	<!-- Timeline / activity -->
	<div class="iz-stack">
		{% EVENT ss_memberlist_view_timeline_before %}

		<section class="iz-card" aria-labelledby="iz-user-forum-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-user-forum-title">{{ L_USER_FORUM }}</h3>
			</header>

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

				<div class="iz-timeline" role="list">

					<div class="iz-timeline__item" role="listitem">
						<div class="iz-timeline__meta">{{ L_JOINED }}</div>
						<div class="iz-timeline__content">
							<p class="iz-meta"><strong>{{ JOINED }}</strong></p>
							<p class="iz-help">{{ L_MEMBERLIST_P_EXPL }}</p>
						</div>
					</div>

					<div class="iz-timeline__item" role="listitem">
						<div class="iz-timeline__meta">{{ L_LAST_ACTIVE }}</div>
						<div class="iz-timeline__content">
							<p class="iz-meta"><strong>{{ LAST_ACTIVE }}</strong></p>
							<p class="iz-help">{{ L_MEMBERLIST_P_DATE_EXPL }}</p>
						</div>
					</div>

					<div class="iz-timeline__item" role="listitem">
						<div class="iz-timeline__meta">{{ L_TOTAL_POSTS }}</div>
						<div class="iz-timeline__content">
							<p class="iz-meta">
								{{ POSTS }}
								{% if S_DISPLAY_SEARCH %}
									&nbsp;&#45;&nbsp;<a class="iz-link iz-link--strong" href="{{ U_SEARCH_USER }}">{{ L_SEARCH_USER_POSTS }}</a>
								{% endif %}
								{% if POSTS_PCT %}
									&nbsp;&#40;{{ POSTS_PCT }}&nbsp;&#47;&nbsp;{{ POSTS_DAY }}&#41;
								{% endif %}
								{% if POSTS_IN_QUEUE and U_MCP_QUEUE %}
									&nbsp;&#40;<a class="iz-link" href="{{ U_MCP_QUEUE }}">{{ L_POSTS_IN_QUEUE }}</a>&#41;
								{% elseif POSTS_IN_QUEUE %}
									&nbsp;&#40;{{ L_POSTS_IN_QUEUE }}&#41;
								{% endif %}
							</p>
						</div>
					</div>

					{% if S_SHOW_ACTIVITY and POSTS %}
						<div class="iz-timeline__item" role="listitem">
							<div class="iz-timeline__meta">{{ L_ACTIVE_IN_FORUM }}</div>
							<div class="iz-timeline__content">
								<p class="iz-meta">
									{% if ACTIVE_FORUM != '' %}
										<a class="iz-link" href="{{ U_ACTIVE_FORUM }}">{{ ACTIVE_FORUM }}</a>
										&nbsp;&#40;{{ ACTIVE_FORUM_POSTS }}&nbsp;&#47;&nbsp;{{ ACTIVE_FORUM_PCT }}&#41;
									{% else %}
										&#45;
									{% endif %}
								</p>
							</div>
						</div>

						<div class="iz-timeline__item" role="listitem">
							<div class="iz-timeline__meta">{{ L_ACTIVE_IN_TOPIC }}</div>
							<div class="iz-timeline__content">
								<p class="iz-meta">
									{% if ACTIVE_TOPIC != '' %}
										<a class="iz-link" href="{{ U_ACTIVE_TOPIC }}">{{ ACTIVE_TOPIC }}</a>
										&nbsp;&#40;{{ ACTIVE_TOPIC_POSTS }}&nbsp;&#47;&nbsp;{{ ACTIVE_TOPIC_PCT }}&#41;
									{% else %}
										&#45;
									{% endif %}
								</p>
							</div>
						</div>
					{% endif %}

					{% if S_WARNINGS %}
						<div class="iz-timeline__item" role="listitem">
							<div class="iz-timeline__meta">{{ L_WARNINGS }}</div>
							<div class="iz-timeline__content">
								<p class="iz-meta">
									{{ WARNINGS }}
									{% if U_NOTES or U_WARN %}
										&nbsp;&#91;
											{% if U_NOTES %}
												<a class="iz-link" href="{{ U_NOTES }}">{{ L_VIEW_NOTES }}</a>
											{% endif %}
											{% if U_WARN %}
												{% if U_NOTES %}&nbsp;&#124;&nbsp;{% endif %}
												<a class="iz-link" href="{{ U_WARN }}">{{ L_WARN_USER }}</a>
											{% endif %}
										&#93;
									{% endif %}
								</p>
							</div>
						</div>
					{% endif %}

				</div>

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

		{% EVENT ss_memberlist_view_timeline_after %}
	</div>


	<!-- Signature -->
	{% EVENT memberlist_view_signature_before %}
	{% if SIGNATURE %}
		<section class="iz-card" aria-labelledby="iz-signature-title">
			<header class="iz-card__header">
				<h3 class="iz-card__title" id="iz-signature-title">{{ L_SIGNATURE }}</h3>
			</header>
			<div class="iz-card__body">
				<div class="signature" style="border-top:none; margin-top: 0;">{{ SIGNATURE }}</div>
			</div>
		</section>
	{% endif %}


	{% EVENT memberlist_view_content_append %}

	<div class="iz-toolbar" role="region" aria-label="{{ L_JUMPBOX }}">
		<div class="iz-toolbar__left">
			{% include 'jumpbox_options.html' %}
		</div>
		<div class="iz-toolbar__right"></div>
	</div>

	{% include 'jump_links.html' %}

</div>

{% include 'overall_footer.html' %}