extends ../layout-marketing
include ../_mixins/notification

block content
	main#main-content.content.content-alt
		.container
			.row
				.col-lg-8.offset-lg-2.col-xl-6.offset-xl-3
					.card
						.card-body
							.page-header(data-ol-hide-on-error-message='confirm-email-wrong-user')
								h1 #{translate("confirm_email")}
							form(method='POST' action='/logout' id='logoutForm')
								input(name='_csrf' type='hidden' value=csrfToken)
								input(name='redirect' type='hidden' value=currentUrlWithQueryParams)
							form(
								name='confirmEmailForm'
								data-ol-async-form
								data-ol-auto-submit
								action='/user/emails/confirm'
								method='POST'
								id='confirmEmailForm'
							)
								input(name='_csrf' type='hidden' value=csrfToken)
								input(name='token' type='hidden' value=token)

								div(data-ol-not-sent)
									+formMessages
									div(data-ol-custom-form-message='confirm-email-wrong-user' hidden)
										h1.h3 #{translate("we_cant_confirm_this_email")}
										p !{translate("to_confirm_email_address_you_must_be_logged_in_with_the_requesting_account")}
										p !{translate("you_are_currently_logged_in_as", {email: getUserEmail()})}
										.actions
											button.btn-primary.btn.w-100(form='logoutForm') #{translate('log_in_with_a_different_account')}

									.actions
										button.btn-primary.btn.w-100(
											type='submit'
											data-ol-disabled-inflight
											data-ol-hide-on-error-message='confirm-email-wrong-user'
										)
											span(data-ol-inflight='idle')
												| #{translate('confirm')}
											span(hidden data-ol-inflight='pending')
												span.spinner-border.spinner-border-sm.mx-2(role='status')

								div(hidden data-ol-sent)
									+notification({ariaLive: 'polite', type: 'success', className: 'mb-3', content: translate('thank_you_email_confirmed')})
									.text-center
										a.btn.btn-primary(href='/user/settings')
											| #{translate('go_to_account_settings')}