{% include 'overall_header.html' %}

<header class="iz-sectionhead">
	<h1 class="iz-sectionhead__title">{{ L_UCP }}</h1>
</header>

<section class="iz-layout iz-layout--two iz-layout--ucp">
	<div class="iz-layout__main">

		<nav class="iz-tabs" aria-label="{{ L_UCP }}">
			<ul class="iz-tabs__list">
				{% for t_block1 in t_block1 %}
					<li class="iz-tabs__item{% if t_block1.S_SELECTED %} is-active{% endif %}">
						<a class="iz-tabs__link" href="{{ t_block1.U_TITLE }}">
							{{ t_block1.L_TITLE }}
						</a>
					</li>
				{% endfor %}
			</ul>
		</nav>

		{% if S_COMPOSE_PM %}
			<form id="postform" method="post" action="{{ S_POST_ACTION }}"{{ S_FORM_ENCTYPE }} class="iz-form">
		{% endif %}

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

		<div class="iz-layout iz-layout--two iz-layout--ucp-body">
			<aside class="iz-layout__aside">

				<nav class="iz-sidenav" aria-label="{{ L_OPTIONS }}">
					<ul class="iz-sidenav__list">

						{% if S_PRIVMSGS %}
							{% for t_block2 in t_block2 %}
								{% if S_PRIVMSGS and not t_block2.S_LAST_ROW %}
									<li class="iz-sidenav__item{% if t_block2.S_SELECTED %} is-active{% endif %}">
										<a class="iz-sidenav__link" href="{{ t_block2.U_TITLE }}">{{ t_block2.L_TITLE }}</a>
									</li>
								{% endif %}
							{% endfor %}

							{% for folder in folder %}
								<li class="iz-sidenav__item{% if folder.S_CUR_FOLDER %} is-active{% endif %}">
									<a class="iz-sidenav__link" href="{{ folder.U_FOLDER }}">
										{% if folder.UNREAD_MESSAGES > 0 %}
											<strong>{{ folder.FOLDER_NAME }}</strong>
											<span class="iz-badge">{{ folder.UNREAD_MESSAGES }}</span>
										{% else %}
											{{ folder.FOLDER_NAME }}
										{% endif %}
									</a>
								</li>
							{% endfor %}
						{% endif %}

						{% for t_block2 in t_block2 %}
							{% if (S_PRIVMSGS and t_block2.S_LAST_ROW) or not S_PRIVMSGS %}
								<li class="iz-sidenav__item{% if t_block2.S_SELECTED %} is-active{% endif %}">
									<a class="iz-sidenav__link" href="{{ t_block2.U_TITLE }}">{{ t_block2.L_TITLE }}</a>
								</li>
							{% endif %}
						{% endfor %}

					</ul>
				</nav>

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

				{% if friends_online or .friends_offline %}
					<section class="iz-card iz-card--friends">
						<header class="iz-card__header">
							<h2 class="iz-card__title">{{ L_FRIENDS }}</h2>
						</header>

						<div class="iz-card__body">
							<ul class="iz-list iz-list--friends">

								{% for friends_online in friends_online %}
									<li class="iz-list__item iz-friend">
										<div class="iz-friend__avatar">
											{% if not friends_online.AVATAR %}
												<img src="{{ T_THEME_PATH }}/images/user1.png" alt="">
											{% else %}
												{{ friends_online.AVATAR }}
											{% endif %}
										</div>

										<div class="iz-friend__body">
											<div class="iz-friend__name">
												{% EVENT ucp_header_friends_online_username_full_prepend %}
												{{ friends_online.USERNAME_FULL }}
												{% EVENT ucp_header_friends_online_username_full_append %}
											</div>

											<div class="iz-friend__meta">
												<span class="iz-badge iz-badge--success">{{ L_FRIENDS_ONLINE }}</span>

												{% if S_SHOW_PM_BOX %}
													<span class="iz-sep">•</span>
													<button type="submit" name="add_to[{{ friends_online.USER_ID }}]" value="{{ L_ADD }}" class="iz-btn iz-btn--primary iz-btn--sm">
														{{ L_ADD }}
													</button>
												{% endif %}
											</div>
										</div>
									</li>
								{% endfor %}

								{% for friends_offline in friends_offline %}
									<li class="iz-list__item iz-friend">
										<div class="iz-friend__avatar">
											{% if not friends_offline.AVATAR %}
												<img src="{{ T_THEME_PATH }}/images/user4.png" alt="">
											{% else %}
												{{ friends_offline.AVATAR }}
											{% endif %}
										</div>

										<div class="iz-friend__body">
											<div class="iz-friend__name">
												{% EVENT ucp_header_friends_offline_username_full_prepend %}
												{{ friends_offline.USERNAME_FULL }}
												{% EVENT ucp_header_friends_offline_username_full_append %}
											</div>

											<div class="iz-friend__meta">
												<span class="iz-badge iz-badge--muted">{{ L_FRIENDS_OFFLINE }}</span>

												{% if S_SHOW_PM_BOX %}
													<span class="iz-sep">•</span>
													<button type="submit" name="add_to[{{ friends_offline.USER_ID }}]" value="{{ L_ADD }}" class="iz-btn iz-btn--ghost iz-btn--sm">
														{{ L_ADD }}
													</button>
												{% endif %}
											</div>
										</div>
									</li>
								{% endfor %}

							</ul>
						</div>
					</section>
				{% endif %}

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

					<section class="iz-card iz-card--legend">
						<header class="iz-card__header">
							<h2 class="iz-card__title">{{ L_LEGEND }}</h2>
						</header>

						<div class="iz-card__body">
							<ul class="iz-list iz-list--legend">
								{% for pm_colour_info in pm_colour_info %}
									<li class="iz-list__item">
										{% if pm_colour_info.IMG %}{{ pm_colour_info.IMG }} {% endif %}{{ pm_colour_info.LANG }}
									</li>
								{% endfor %}
							</ul>
						</div>
					</section>
				{% endif %}

			</aside>

			<div class="iz-layout__main">
				<div class="iz-tabs__panel tab-content">