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

block vars
	- isWebsiteRedesign = true

include ../../../../../app/views/_mixins/material_symbol

block content
	main#main-content.content.content-alt
		.container
			.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
								+material-symbol('check_circle')
							.notification-content
								p
									| #{translate("nearly_activated")}

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

				form(
					name='activationForm'
					data-ol-async-form
					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(name='passwordResetToken' type='hidden' value=token)

					.form-group
						label(for='emailField') #{translate("email")}
						input#emailField.form-control(
							name='email'
							aria-label='email'
							type='email'
							placeholder='email@example.com'
							autocomplete='username'
							value=email
							required
							disabled
						)
					.form-group
						label(for='passwordField') #{translate("password")}
						input#passwordField.form-control(
							name='password'
							type='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')}…