extends ../layout-marketing

block vars
	- bootstrap5PageStatus = 'disabled'

block content
	main#main-content.content.content-alt
		.container-custom-sm.mx-auto
			.card
				form(
					name='passwordResetForm'
					data-ol-async-form
					action='/user/password/set'
					method='POST'
					data-ol-hide-on-error='token-expired'
				)
					div(hidden data-ol-sent)
						h3.mt-0.mb-2 #{translate("password_updated")}
						p.mb-4 #{translate("your_password_has_been_successfully_changed")}.
						a(href='/login') #{translate("log_in_now")}

					div(data-ol-not-sent)
						h3.mt-0.mb-2 #{translate("reset_your_password")}
						p(data-ol-hide-on-error-message='token-expired') #{translate("create_a_new_password_for_your_account")}.
						+formMessages

						+customFormMessage('password-contains-email', 'danger')
							| #{translate('invalid_password_contains_email')}.
							| #{translate('use_a_different_password')}.

						+customFormMessage('password-too-similar', 'danger')
							| #{translate('invalid_password_too_similar')}.
							| #{translate('use_a_different_password')}.

						+customFormMessage('token-expired', 'danger')
							| #{translate('password_reset_token_expired')}
							br
							a(href='/user/password/reset')
								| #{translate('request_new_password_reset_email')}

						input(name='_csrf' type='hidden' value=csrfToken)
						input(
							name='email'
							type='text'
							hidden
							autocomplete='username'
							value=email
						)

						.form-group
							label(
								for='passwordField'
								data-ol-hide-on-error-message='token-expired'
							) #{translate("new_password")}
							input#passwordField.form-control(
								name='password'
								type='password'
								placeholder=translate('enter_your_new_password')
								autocomplete='new-password'
								autofocus
								required
								minlength=settings.passwordStrengthOptions.length.min
							)

							+customValidationMessage('invalid-password')
								| #{translate('invalid_password')}.

							+customValidationMessage('password-must-be-different')
								| #{translate('password_cant_be_the_same_as_current_one')}.

							+customValidationMessage('password-must-be-strong')
								| !{translate('password_was_detected_on_a_public_list_of_known_compromised_passwords', {}, [{name: 'a', attrs: {href: 'https://haveibeenpwned.com/passwords', rel: 'noopener noreferrer', target: '_blank'}}])}.
								| #{translate('use_a_different_password')}.

							input(name='passwordResetToken' type='hidden' value=passwordResetToken)
						div(data-ol-hide-on-error-message='token-expired')
							div #{translate('in_order_to_have_a_secure_account_make_sure_your_password')}
							ul.mb-4.ps-4
								li #{translate('is_longer_than_n_characters', {n: settings.passwordStrengthOptions.length.min})}
								li #{translate('does_not_contain_or_significantly_match_your_email')}
								li #{translate('is_not_used_on_any_other_website')}
						.actions
							button.btn.btn-primary.w-100(
								type='submit'
								data-ol-disabled-inflight
								aria-label=translate('set_new_password')
							) 
								span(data-ol-inflight='idle')
									| #{translate('set_new_password')}
								span(hidden data-ol-inflight='pending')
									| #{translate('set_new_password')}…