{% include 'ucp_header.html' %}

<div class="tab-pane active">
	<form id="ucp" method="post" action="{{ S_UCP_ACTION }}"{{ S_FORM_ENCTYPE }} class="iz-form">

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

			<div class="iz-card__body">
				<p class="iz-prose">{{ L_FOES_EXPLAIN }}</p>

				{% if ERROR %}
					<div class="iz-space iz-space--sm"></div>
					<div class="iz-alert iz-alert--info" role="status">
						<strong>{{ L_INFO_BOX }}</strong>&nbsp;{{ ERROR }}
					</div>
				{% endif %}

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

				<div class="iz-fieldgroup">

					<div class="iz-field">
						<label class="iz-field__label"{% if S_USERNAME_OPTIONS %} for="usernames"{% endif %}>
							{{ L_YOUR_FOES }}{{ L_COLON }}
						</label>
						<div class="iz-field__help">{{ L_YOUR_FOES_EXPLAIN }}</div>

						<div class="iz-field__control">
							{% if S_USERNAME_OPTIONS %}
								<select name="usernames[]" id="usernames" multiple="multiple" size="5" class="iz-select iz-select--multiline">
									{{ S_USERNAME_OPTIONS }}
								</select>
							{% else %}
								<div class="iz-alert iz-alert--info" role="status">
									{{ L_NO_FOES }}
								</div>
							{% endif %}
						</div>
					</div>

					<div class="iz-field">
						<label class="iz-field__label" for="add">{{ L_ADD_FOES }}{{ L_COLON }}</label>
						<div class="iz-field__help">{{ L_ADD_FOES_EXPLAIN }}</div>

						<div class="iz-field__control">
							<textarea class="iz-textarea" name="add" id="add" rows="2" placeholder="{{ L_UCP_REG_USR_PLACEHOLDER }}">{{ USERNAMES }}</textarea>

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

							<a class="iz-link" href="{{ U_FIND_USERNAME }}" onclick="find_username(this.href); return false;">
								{{ L_FIND_USERNAME }}
							</a>
						</div>
					</div>

				</div>

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

				<div class="iz-actions">
					{{ S_HIDDEN_FIELDS }}
					<button type="submit" name="submit" value="{{ L_SUBMIT }}" class="iz-btn iz-btn--primary">
						{{ L_SUBMIT }}
					</button>
					{{ S_FORM_TOKEN }}
				</div>

			</div>
		</section>

	</form>
</div>

{% include 'ucp_footer.html' %}