extends ../layout-website-redesign-bootstrap-5
include ../_mixins/recaptcha
include ../_mixins/notification

block vars
	- var suppressNavbar = true
	- var suppressFooter = 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#main-content(data-ol-captcha-retry-trigger-area="")
		a.auth-aux-logo(href="/")
			img(src=buildImgPath("ol-brand/overleaf-o-dark.svg") alt=settings.appName)
		.auth-aux-container
			form(
				data-ol-async-form
				name="passwordResetForm"
				action="/user/password/reset"
				method="POST"
				captcha=(showCaptcha ? '' : false)
				captcha-action-name=(showCaptcha ? "passwordReset" : false)
			)
				if error === 'password_reset_token_expired'
					h1.h3.mb-3.mt-0 #{translate("sorry_your_token_expired")}
					p #{translate('please_request_a_new_password_reset_email_and_follow_the_link')}.
				else
					h1.h3.mb-3.mt-0(data-ol-not-sent) #{translate("password_reset_sentence_case")}
					h1.h3.mb-3.mt-0(hidden data-ol-sent) #{translate("check_your_email")}   
					p.mb-3.pb-3(data-ol-not-sent) #{translate("enter_your_email_address_below_and_we_will_send_you_a_link_to_reset_your_password")}.

				div(data-ol-not-sent)
					+formMessagesNewStyle()
					if error && error !== 'password_reset_token_expired'
						+notification({ariaLive: 'assertive', type: 'error', className: 'mb-3', content: translate(error)})

					div(data-ol-custom-form-message="no-password-allowed-due-to-sso" hidden)
						+notification({ariaLive: 'polite', type: 'error', className: 'mb-3', content: translate("you_cant_reset_password_due_to_sso", {}, [{name: 'a', attrs: {href: '/sso-login'}}])})
					input(type="hidden" name="_csrf" value=csrfToken)
					.form-group.mb-3
						label.form-label(for='email') #{translate("email")}
						input.form-control#email(
							aria-label="email"
							type='email'
							name='email'
							required
							autocomplete="username"
							autofocus
						)
					.actions
						button.btn.btn-primary.w-100.mb-3(
							type='submit'
							data-ol-disabled-inflight
							aria-label=translate('reset_password_sentence_case')
						)
							span(data-ol-inflight="idle")
								| #{translate("reset_password_sentence_case")}
							span(hidden data-ol-inflight="pending")
								| #{translate("requesting_password_reset")}…
						a.btn.btn-ghost.w-100.mb-3(href="/login") #{translate("back_to_log_in")}
				div(hidden data-ol-sent)
					p.mb-4 #{translate('password_reset_email_sent')}
					a.btn.btn-primary.w-100.mb-3(href="/login") #{translate('back_to_log_in')}

			if showCaptcha
				+recaptchaConditions