<!-- INCLUDE overall_header.html -->

<!-- IF S_SHOW_COPPA or S_REGISTRATION -->

{% if LANG_OPTIONS %}
	<form method="post" action="{S_UCP_ACTION}" id="register">
		<p class="rightside">
			<label for="{{ LANG_OPTIONS.id }}">{{ lang('LANGUAGE') ~ lang('COLON') }}</label>
			{{ FormsSelect(LANG_OPTIONS) }}
			{S_HIDDEN_FIELDS}
		</p>
	</form>

	<div class="clear"></div>

	<script>
		/**
		 * Change language on change
		 */
		document.querySelector("{{ '#' ~ LANG_OPTIONS.id }}").addEventListener('change', (event) => {
			const langIso = event.target.value;
			document.cookie = '{{ COOKIE_NAME }}_lang=' + langIso + '; path={{ COOKIE_PATH }}';
			document.forms['register'].change_lang.value = langIso;
			document.forms['register'].submit();
		});
	</script>
{% endif %}

	<form method="post" action="{S_UCP_ACTION}" id="agreement">

	<div class="panel">
		<div class="inner">
		<div class="content">
			<h2 class="sitename-title">{{ SITENAME }} - {{ lang('REGISTRATION') }}</h2>
			<!-- EVENT ucp_agreement_terms_before -->
			<div class="agreement">{% if S_SHOW_COPPA %}<p class="agreement-text">{{ lang('COPPA_BIRTHDAY') }}</p>{% else %}{{ lang('TERMS_OF_USE') }}{% endif %}</div>
			<!-- EVENT ucp_agreement_terms_after -->
		</div>
		</div>
	</div>

	<div class="panel">
		<div class="inner">
		<fieldset class="submit-buttons">
			<!-- IF S_SHOW_COPPA -->
			<input type="submit" name="coppa_no" id="coppa_no" value="{{ L_COPPA_NO }}" class="button1 button button-form" />
			<input type="submit" name="coppa_yes" id="coppa_yes" value="{{ L_COPPA_YES }}" class="button1 button button-form-bold" />
			<!-- ELSE -->
			<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1 button button-form" />&nbsp;
			<input type="submit" name="not_agreed" value="{L_NOT_AGREE}" class="button1 button button-form-bold" />
			<!-- ENDIF -->
			{S_HIDDEN_FIELDS}
			{S_FORM_TOKEN}
		</fieldset>
		</div>
	</div>
	</form>

<!-- ELSEIF S_AGREEMENT -->

	<div class="panel">
		<div class="inner">
		<div class="content">
			<h2 class="sitename-title">{{ SITENAME }} - {{ AGREEMENT_TITLE }}</h2>
			<div class="agreement">{{ AGREEMENT_TEXT }}</div>
		</div>
		</div>
	</div>

<!-- ENDIF -->

<!-- INCLUDE overall_footer.html -->
