extends ../layout-website-redesign-bootstrap-5
include ../_mixins/recaptcha

block content
    - var email = reconfirm_email ? reconfirm_email : ""
    - 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="")
        .container.auth-aux-container(style="max-width: 420px;")
            form(
                data-ol-async-form
                name="reconfirmAccountForm"
                action="/user/reconfirm"
                method="POST"
                aria-label=translate('request_reconfirmation_email')
                captcha=(showCaptcha ? '' : false)
                captcha-action-name=(showCaptcha ? "passwordReset" : false)
            )
                h1.h5.mb-3 #{translate("reconfirm_account")}
                p #{translate('reconfirm_explained')}
                    | 
                    a(href=`mailto:${settings.adminEmail}`) #{settings.adminEmail}
                    | .
                
                div(data-ol-not-sent)
                    +formMessagesNewStyle()

                    input(type="hidden" name="_csrf" value=csrfToken)
                    .form-group.mb-3
                        label.form-label(for='email') #{translate("please_enter_email")}
                        input.form-control(
                            aria-label="email"
                            type='email'
                            name='email'
                            placeholder='email@example.com'
                            required
                            autofocus
                            value=email
                        )
                    .actions
                        button.btn.btn-primary.w-100(
                            style="white-space: normal;"
                            type='submit'
                            data-ol-disabled-inflight
                            aria-label=translate('request_password_reset_to_reconfirm')
                        )
                            span(data-ol-inflight="idle")
                                | #{translate('request_password_reset_to_reconfirm')}
                            span(hidden data-ol-inflight="pending")
                                | #{translate('request_password_reset_to_reconfirm')}… 
                div(hidden data-ol-sent)
                    div.alert.alert-success(
                        role="alert"
                        aria-live="polite"
                    )
                        span #{translate('password_reset_email_sent')}

            if showCaptcha
                +recaptchaConditions