{% 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">

				{% if S_FORCE_PASSWORD %}
					<p class="iz-prose">{{ L_FORCE_PASSWORD_EXPLAIN }}</p>
					<div class="iz-space iz-space--sm"></div>
				{% endif %}

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

				{% EVENT ucp_profile_register_details_before %}

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

					<div class="iz-card__body">
						<div class="iz-fieldgroup">

							<div class="iz-field">
								<label class="iz-field__label"{% if S_CHANGE_USERNAME %} for="username"{% endif %}>{{ L_USERNAME }}{{ L_COLON }}</label>
								<div class="iz-field__help">{{ L_USERNAME_EXPLAIN }}</div>
								<div class="iz-field__control">
									{% if S_CHANGE_USERNAME %}
										<input type="text" name="username" id="username" value="{{ USERNAME }}" title="{{ L_USERNAME }}" placeholder="{{ L_USERNAME }}" class="iz-input" />
									{% else %}
										<input type="text" class="iz-input" value="{{ USERNAME }} {{ L_UCP_NO_USER_CHANGE_ALLOWED }}" disabled="disabled" aria-disabled="true" />
									{% endif %}
								</div>
							</div>

							<div class="iz-field">
								<label class="iz-field__label" for="email">{{ L_EMAIL_ADDRESS }}{{ L_COLON }}</label>
								<div class="iz-field__control">
									{% if S_CHANGE_EMAIL %}
										<input type="text" name="email" id="email" maxlength="100" value="{{ EMAIL }}" title="{{ L_EMAIL_ADDRESS }}" placeholder="{{ L_EMAIL_ADDRESS }}" class="iz-input" />
									{% else %}
										<input type="text" class="iz-input" value="{{ EMAIL }}" disabled="disabled" aria-disabled="true" />
									{% endif %}
								</div>
							</div>

							{% if S_CHANGE_PASSWORD %}
								<div class="iz-field">
									<label for="new_password" class="iz-field__label">{{ L_NEW_PASSWORD }}{{ L_COLON }}</label>
									<div class="iz-field__help">{{ L_CHANGE_PASSWORD_EXPLAIN }}</div>
									<div class="iz-field__control">
										<input type="password" name="new_password" id="new_password" maxlength="255" value="{{ NEW_PASSWORD }}" placeholder="{{ L_CHANGE_PASSWORD }}" class="iz-input" />
									</div>
								</div>

								<div class="iz-field">
									<label for="password_confirm" class="iz-field__label">{{ L_CONFIRM_PASSWORD }}{{ L_COLON }}</label>
									<div class="iz-field__help">{{ L_CONFIRM_PASSWORD_EXPLAIN }}</div>
									<div class="iz-field__control">
										<input type="password" name="password_confirm" id="password_confirm" maxlength="255" value="{{ PASSWORD_CONFIRM }}" placeholder="{{ L_CONFIRM_PASSWORD }}" class="iz-input" />
									</div>
								</div>
							{% endif %}

						</div>
					</div>
				</section>

				{% EVENT ucp_profile_register_details_after %}

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

				<section class="iz-card iz-card--nested">
					<header class="iz-card__header">
						<h3 class="iz-card__title">{{ L_CURRENT_PASSWORD }}{{ L_COLON }}</h3>
					</header>

					<div class="iz-card__body">
						<div class="iz-fieldgroup">
							<div class="iz-field">
								<label for="cur_password" class="iz-field__label">{{ L_CURRENT_PASSWORD }}{{ L_COLON }}</label>
								<div class="iz-field__help">
									{% if S_CHANGE_PASSWORD %}{{ L_CURRENT_CHANGE_PASSWORD_EXPLAIN }}{% else %}{{ L_CURRENT_PASSWORD_EXPLAIN }}{% endif %}
								</div>
								<div class="iz-field__control">
									<input type="password" name="cur_password" id="cur_password" maxlength="255" value="{{ CUR_PASSWORD }}" title="{{ L_CURRENT_PASSWORD }}" placeholder="{{ L_CURRENT_PASSWORD }}" class="iz-input" />
								</div>
							</div>
						</div>
					</div>
				</section>

				<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" autocomplete="off">
						{{ L_SUBMIT }}
					</button>
					{{ S_FORM_TOKEN }}
				</div>

			</div>
		</section>

	</form>
</div>

{% EVENT ucp_profile_custom_options %}

{% include 'ucp_footer.html' %}