{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user activate">
	<div class="ui middle very relaxed page grid">
		<div class="column">
			<h2 class="ui top attached header">
				{{ctx.Locale.Tr "auth.active_your_account"}}
			</h2>
			<div class="ui attached segment">
				{{template "base/alert" .}}
				<p>{{.ActivationPromptMessage}}</p>
				{{if .AccountRequestValidationMailAttemptStatus}}
					<p>
						<span {{if eq .AccountRequestValidationMailAttemptStatus "succeeded"}}class="tw-text-green-600"{{else}}class="tw-text-red-600"{{end}}>{{if eq .AccountRequestValidationMailAttemptStatus "succeeded"}}✔{{else}}❌{{end}}</span>
						{{DateUtils.FullTime .AccountRequestValidationMailAttemptUnix}}
					</p>
				{{end}}
				{{if .PendingAccountRequestEmail}}
					{{if .ShowResendAccountRequestButton}}
						<div class="tw-mt-4 tw-mb-4 tw-flex tw-items-center tw-gap-3 tw-flex-wrap">
							<span>{{ctx.Locale.Tr "auth.account_request_resend_prompt"}}</span>
							<form class="ui form" action="{{AppSubUrl}}/user/sign_up/resend" method="post">
								{{.CsrfTokenHtml}}
								<input type="hidden" name="email" value="{{.PendingAccountRequestEmail}}">
								<input type="hidden" name="source" value="activate_prompt">
								<button class="ui tiny js-account-request-resend-button {{if eq .AccountRequestResendButtonState "success"}}is-success{{end}} button" data-mail-action-ui="inline-v2" style="{{if eq .AccountRequestResendButtonState "success"}}background: var(--color-green); color: var(--color-white); border-color: var(--color-green);{{else if eq .AccountRequestResendButtonState "failed"}}background: var(--color-red); color: var(--color-white); border-color: var(--color-red);{{else}}background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary);{{end}}" type="submit">{{ctx.Locale.Tr "auth.account_request_resend_button"}}</button>
							</form>
						</div>
					{{end}}
					<p class="tw-mt-0 tw-text-muted">{{ctx.Locale.Tr "auth.account_request_spam_hint"}}</p>
				{{end}}
			</div>
		</div>
	</div>
</div>
{{if eq .AccountRequestResendButtonState "success"}}
	<script>
		window.setTimeout(() => {
			for (const button of document.querySelectorAll('.js-account-request-resend-button.is-success')) {
				button.classList.remove('is-success');
				button.style.background = 'var(--color-primary)';
				button.style.color = 'var(--color-primary-contrast)';
				button.style.borderColor = 'var(--color-primary)';
			}
		}, 5000);
	</script>
{{end}}
{{template "base/footer" .}}
