extends ../layout-website-redesign
include ../_mixins/ciam_mixins

block vars
	- var suppressNavbar = true
	- var suppressFooter = true
	- var suppressSkipToContent = true
	- isWebsiteRedesign = true

block content
	.ciam-enabled.ciam-layout.ciam-password-set
		+ciamLogo
		.ciam-container
			main#main-content.ciam-card
				form(
					name='passwordResetForm'
					data-ciam-form
					data-ol-async-form
					action='/user/password/set'
					method='POST'
					data-ol-hide-on-error='token-expired'
				)
					div(hidden data-ol-sent)
						h1 #{translate("your_password_has_been_reset")}
						p.intro-p #{translate("you_can_now_sign_in_with_new_password")}
						a.btn.btn-ds.btn-lg.btn-primary.w-100(href='/login') #{translate("go_to_sign_in")}

					div(data-ol-not-sent)
						h1 #{translate("choose_a_new_password")}
						+formMessagesNewStyle

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

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

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

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

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

						+ciamCustomFormDangerMessage('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='_csrf' type='hidden' value=csrfToken)
						input(
							name='email'
							type='text'
							hidden
							autocomplete='username'
							value=email
						)

						.form-group.form-group-ds
							label.form-label(
								for='passwordField'
								data-ol-hide-on-error-message='token-expired'
							) #{translate("password")}
							.form-group-password
								.form-group-password-input
									.form-complex-input-container
										input#passwordField.form-control.form-control-ds.form-control-lg(
											name='password'
											type='password'
											autocomplete='new-password'
											autofocus
											required
											minlength=settings.passwordStrengthOptions.length.min
											data-ol-password-visibility-target
										)
										button.visibility-toggle(
											type='button'
											data-ol-password-visibility-toggle='visibilityOn'
											aria-controls='password'
											aria-label=translate('turn_on_password_visibility')
										)
											ph-eye.form-input-icon-ds
										button.visibility-toggle(
											type='button'
											data-ol-password-visibility-toggle='visibilityOff'
											aria-controls='password'
											aria-label=translate('turn_off_password_visibility')
											hidden
										)
											ph-eye-slash.form-input-icon-ds

							input(name='passwordResetToken' type='hidden' value=passwordResetToken)
						div(data-ol-hide-on-error-message='token-expired')
							p.password-policy #{translate('must_be_at_least_n_characters', {n: settings.passwordStrengthOptions.length.min})}
						.actions
							button.btn.btn-ds.btn-lg.btn-primary.w-100(
								type='submit'
								data-ol-disabled-inflight
								data-ol-spinner-inflight
								aria-label=translate('save_new_password')
							)
								+ciamButtonContentLoading(`${translate('processing')}…`)= translate('save_new_password')

				+ciamCardFooter(true)