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

block vars
	- var suppressNavbar = true
	- var suppressFooter = true
	- isWebsiteRedesign = 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(
				name='passwordResetForm'
				captcha-action-name=showCaptcha ? 'passwordReset' : false
				data-ol-async-form
				action='/user/password/reset'
				method='POST'
				captcha=showCaptcha ? '' : 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")}
					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_ldap_or_sso')})
					input(name='_csrf' type='hidden' value=csrfToken)
					.form-group.mb-3
						label.form-label(for='email') #{translate("email")}
						input#email.form-control(
							name='email'
							aria-label='email'
							type='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