extends ../../../../../app/views/layout-website-redesign-bootstrap-5

block content
	main.content.content-alt#main-content
		.container
			div.col-lg-6.col-xl-4.m-auto
				.notification-list
					.notification.notification-type-success(aria-live="off" role="alert")
						.notification-content-and-cta
							.notification-icon
								span.material-symbols(aria-hidden="true")
									| check_circle
							.notification-content
								p
									| #{translate("nearly_activated")}

				h1.h3 #{translate("please_set_a_password")}

				form(
					data-ol-async-form
					name="activationForm",
					action="/user/password/set",
					method="POST",
				)
					+formMessages()

					+customFormMessage('token-expired', 'danger')
						| #{translate("activation_token_expired")}

					+customFormMessage('invalid-password', 'danger')
						| #{translate('invalid_password')}

					input(name='_csrf', type='hidden', value=csrfToken)
					input(
						type="hidden",
						name="passwordResetToken",
						value=token
					)

					.form-group
						label(for='emailField') #{translate("email")}
						input.form-control#emailField(
							aria-label="email",
							type='email',
							name='email',
							placeholder="email@example.com",
							autocomplete="username"
							value=email
							required,
							disabled
						)
					.form-group
						label(for='passwordField') #{translate("password")}
						input.form-control#passwordField(
							type='password',
							name='password',
							placeholder="********",
							autocomplete="new-password",
							autofocus,
							required,
							minlength=settings.passwordStrengthOptions.length.min
						)
					.actions
						button.btn.btn-primary(
							type='submit',
							data-ol-disabled-inflight
							aria-label=translate('activate')
						)
							span(data-ol-inflight="idle")
								| #{translate('activate')}
							span(hidden data-ol-inflight="pending")
								| #{translate('activating')}…