{% include 'overall_header.html' %}

{% if S_SHOW_COPPA or S_REGISTRATION %}

	<header class="iz-sectionhead">
		<h1 class="iz-sectionhead__title">{{ SITENAME }}&nbsp;&#45;&nbsp;{{ L_REGISTRATION }}</h1>
	</header>

	{% if S_LANG_OPTIONS %}
		<div class="iz-toolbar iz-toolbar--lang" aria-label="{{ L_LANGUAGE }}">
			<form method="post" action="{{ S_UCP_ACTION }}" id="register" class="iz-form iz-form--inline">
				<fieldset class="iz-fieldset">
					<label class="iz-label iz-visually-hidden" for="lang">{{ L_LANGUAGE }}{{ L_COLON }}</label>
					<select class="iz-select" name="lang" id="lang" title="{{ L_LANGUAGE }}">
						{{ S_LANG_OPTIONS }}
					</select>
					{{ S_HIDDEN_FIELDS }}
				</fieldset>
			</form>
		</div>

		<script>
			(function () {
				var sel = document.getElementById('lang');
				if (!sel) return;

				sel.addEventListener('change', function () {
					var form = document.getElementById('register');
					if (form) form.submit();
				});
			})();
		</script>
	{% endif %}

	<form method="post" action="{{ S_UCP_ACTION }}" id="agreement" class="iz-form">
		<section class="iz-card iz-card--agreement">
			<header class="iz-card__header">
				<h2 class="iz-card__title">
					{% if S_SHOW_COPPA %}{{ L_COPPA_BIRTHDAY }}{% else %}{{ L_TERMS_OF_USE }}{% endif %}
				</h2>
			</header>

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

				{% if S_SHOW_COPPA %}
					<div class="iz-actions">
						<button type="submit" class="iz-btn iz-btn--ghost" name="coppa_no" id="coppa_no" value="{{ L_COPPA_NO }}">
							{{ L_COPPA_NO }}
						</button>
						<button type="submit" class="iz-btn iz-btn--primary" name="coppa_yes" id="coppa_yes" value="{{ L_COPPA_YES }}">
							{{ L_COPPA_YES }}
						</button>
					</div>
				{% else %}
					<div class="iz-prose">
						<p>{{ L_TERMS_OF_USE }}</p>
					</div>

					<div class="iz-actions iz-actions--stack">
						<button type="submit" class="iz-btn iz-btn--primary iz-btn--lg" name="agreed" id="agreed" value="{{ L_AGREE }}">
							{{ L_AGREE }}
						</button>
						<button type="submit" class="iz-btn iz-btn--danger iz-btn--lg" name="not_agreed" value="{{ L_NOT_AGREE }}">
							{{ L_NOT_AGREE }}
						</button>
					</div>
				{% endif %}

				{% EVENT ucp_agreement_terms_after %}

				{{ S_HIDDEN_FIELDS }}
				{{ S_FORM_TOKEN }}
			</div>
		</section>
	</form>

{% elseif S_AGREEMENT %}

	<header class="iz-sectionhead">
		<h1 class="iz-sectionhead__title">{{ SITENAME }}&nbsp;&#45;&nbsp;{{ AGREEMENT_TITLE }}</h1>
	</header>

	<section class="iz-card iz-card--agreementtext">
		<div class="iz-card__body">
			<div class="iz-prose">
				<p>{{ AGREEMENT_TEXT }}</p>
			</div>
		</div>
	</section>

{% endif %}

{% include 'overall_footer.html' %}