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

block vars
	- metadata = { viewport: true }

block content
	- var showCaptcha = settings.recaptcha && settings.recaptcha.siteKey && !(settings.recaptcha.disabled && settings.recaptcha.disabled.passwordReset)

	if showCaptcha
		script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render=explicit")
		div(
			id="recaptcha"
			class="g-recaptcha"
			data-sitekey=settings.recaptcha.siteKey
			data-size="invisible"
			data-badge="inline"
		)

	main.content.content-alt#main-content
		.container
			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					.card
						.page-header
							h1 #{translate("password_reset")}
						.messageArea
						form(
							data-ol-async-form
							name="passwordResetForm"
							action="/user/password/reset",
							method="POST",
							captcha=(showCaptcha ? '' : false),
							captcha-action-name=(showCaptcha ? "passwordReset" : false),
						)
							div(data-ol-form-messages)

							input(type="hidden", name="_csrf", value=csrfToken)
							.form-group
								label(for='email') #{translate("please_enter_email")}
								input.form-control#email(
									aria-label="email"
									type='email',
									name='email',
									placeholder='email@example.com',
									required,
									autocomplete="username",
									autofocus
								)
							.actions
								button.btn.btn-primary(
									type='submit',
									data-ol-disabled-inflight,
									aria-label=translate('request_password_reset_to_reconfirm')
								)
									span(data-ol-inflight="idle")
										| #{translate("request_password_reset")}
									span(hidden data-ol-inflight="pending")
										| #{translate("requesting_password_reset")}…

			.row
				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
					if showCaptcha
						+recaptchaConditions