{% include 'overall_header.html' %}

<script>
	/* Change language */
	function change_language(lang_iso)
	{
		document.cookie = '{{ COOKIE_NAME }}_lang=' + lang_iso + '; path={{ COOKIE_PATH }}';

		var form = document.getElementById('register');
		if (!form) return;

		if (form.change_lang)
		{
			form.change_lang.value = lang_iso;
		}

		// Prefer native submission; fall back to clicking the submit button if present.
		if (typeof form.requestSubmit == 'function')
		{
			form.requestSubmit();
		}
		else if (form.submit)
		{
			var btn = document.getElementById('submit');
			if (btn && typeof btn.click == 'function') btn.click();
			else form.submit();
		}
	}
</script>

{% if PROVIDER_TEMPLATE_FILE %}
	<section class="iz-card iz-card--auth">
		<header class="iz-card__header">
			<h2 class="iz-card__title">{{ SITENAME }}&nbsp;&#45;&nbsp;{{ lang('OAUTH_REGISTRATION') }}</h2>
		</header>
		<div class="iz-card__body">
			{% include PROVIDER_TEMPLATE_FILE %}
		</div>
	</section>

	<div class="iz-space iz-space--lg"></div>
{% endif %}

{% EVENT ucp_register_options_before %}

<section class="iz-card iz-card--auth">
	<header class="iz-card__header">
		<h2 class="iz-card__title">{{ SITENAME }}&nbsp;&#45;&nbsp;{{ L_REGISTRATION }}</h2>
	</header>

	<div class="iz-card__body">
		<form id="register" method="post" action="{{ S_UCP_ACTION }}"{{ S_FORM_ENCTYPE }} class="iz-form">

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

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

			{% EVENT ucp_register_credentials_before %}

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

					<div class="iz-field">
						<label for="username" class="iz-field__label">{{ L_USERNAME }}{{ L_COLON }}</label>
						<div class="iz-field__help">{{ L_USERNAME_EXPLAIN }}</div>
						<div class="iz-field__control">
							<input class="iz-input" type="text" name="username" id="username" size="25"
								value="{{ USERNAME }}" title="{{ L_USERNAME }}" placeholder="{{ L_UCP_REG_USR_PLACEHOLDER }}" />
						</div>
					</div>

					<div class="iz-field">
						<label for="email" class="iz-field__label">{{ L_EMAIL_ADDRESS }}{{ L_COLON }}</label>
						<div class="iz-field__help">{{ L_UCP_REGISTER_EMAIL_EXPLAIN }}</div>
						<div class="iz-field__control">
							<input class="iz-input" type="text" name="email" id="email" size="25" maxlength="100"
								value="{{ EMAIL }}" placeholder="{{ L_UCP_REG_EMAIL_PLACEHOLDER }}" autocomplete="off" />
						</div>
					</div>

					<div class="iz-field">
						<label for="new_password" class="iz-field__label">{{ L_PASSWORD }}{{ L_COLON }}</label>
						<div class="iz-field__help">{{ L_PASSWORD_EXPLAIN }}</div>
						<div class="iz-field__control">
							<input class="iz-input" type="password" name="new_password" id="new_password" size="25"
								value="{{ PASSWORD }}" placeholder="{{ L_UCP_REG_PSWD_PLACEHOLDER }}" autocomplete="off" />
						</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_PASSWORD_EXPLAIN_CONFIRM }}</div>
						<div class="iz-field__control">
							<input class="iz-input" type="password" name="password_confirm" id="password_confirm" size="25"
								value="{{ PASSWORD_CONFIRM }}" placeholder="{{ L_UCP_REG_PSWD_PLACEHOLDER }}" autocomplete="off" />
						</div>
					</div>

					{% if S_LANG_OPTIONS %}
						<div class="iz-field">
							<label for="lang" class="iz-field__label">{{ L_LANGUAGE }}{{ L_COLON }}</label>
							<div class="iz-field__control">
								<select name="lang" id="lang" class="iz-select"
									onchange="change_language(this.value); return false;" tabindex="6" title="{{ L_LANGUAGE }}">
									{{ S_LANG_OPTIONS }}
								</select>
							</div>
						</div>
					{% endif %}

					<div class="iz-field">
						<label for="timezone" class="iz-field__label">{{ L_BOARD_TIMEZONE }}{{ L_COLON }}</label>
						<div class="iz-field__control">
							<select name="tz" id="timezone" class="iz-select">
								<option value="">{{ L_SELECT_TIMEZONE }}</option>
								{% for timezone_select in timezone_select %}
									<optgroup label="{{ timezone_select.LABEL }}" data-tz-value="{{ timezone_select.VALUE }}">
										{% for timezone_options in timezone_options %}
											<option title="{{ timezone_select.timezone_options.TITLE }}"
												value="{{ timezone_select.timezone_options.VALUE }}"{% if timezone_select.timezone_options.SELECTED %} selected="selected"{% endif %}>
												{{ timezone_select.timezone_options.LABEL }}
											</option>
										{% endfor %}
									</optgroup>
								{% endfor %}
							</select>
						</div>
					</div>

				</div>
			</div>

			{% EVENT ucp_register_credentials_after %}

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

			{% EVENT ucp_register_profile_fields_before %}
			{% if profile_fields %}
				<p class="iz-prose"><strong>{{ L_ITEMS_REQUIRED }}</strong></p>

				<div class="iz-fieldgroup">
					{% for profile_fields in profile_fields %}
						<div class="iz-field">
							<label class="iz-field__label"{% if profile_fields.FIELD_ID %} for="{{ profile_fields.FIELD_ID }}"{% endif %}>
								{{ profile_fields.LANG_NAME }}{{ L_COLON }}{% if profile_fields.S_REQUIRED %} <span class="iz-required">*</span>{% endif %}
							</label>

							{% if profile_fields.LANG_EXPLAIN %}
								<div class="iz-field__help">{{ profile_fields.LANG_EXPLAIN }}</div>
							{% endif %}

							<div class="iz-field__control">
								{{ profile_fields.FIELD }}
							</div>

							{% if profile_fields.ERROR %}
								<div class="iz-field__error" role="alert">{{ profile_fields.ERROR }}</div>
							{% endif %}
						</div>
					{% endfor %}
				</div>

				<div class="iz-space iz-space--md"></div>
			{% endif %}
			{% EVENT ucp_register_profile_fields_after %}

			{% if CAPTCHA_TEMPLATE %}
				{% set CAPTCHA_TAB_INDEX = 8 %}
				{% include '{{ CAPTCHA_TEMPLATE }}' %}
				<div class="iz-space iz-space--md"></div>
			{% endif %}

			{% if S_COPPA %}
				<div class="iz-alert iz-alert--info" role="status">
					<strong>{{ L_COPPA_COMPLIANCE }}</strong><br />
					{{ L_COPPA_EXPLAIN }}
				</div>
				<div class="iz-space iz-space--md"></div>
			{% endif %}

			{% EVENT ucp_register_buttons_before %}

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

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

{% include 'overall_footer.html' %}