{if ($isBackend || $isAdminUser) && !$activationMode}

    {if $mailIsVerified === false}
    <div class="quiqqer-message quiqqer-message-attention" style="width: 100%; max-width: 100%">
        {locale group="quiqqer/core" var="quiqqer.verified.mail2fa.control.backend.noVerifiedMail"}
    </div>
    {/if}

    {if $mailIsVerified && $hasAlreadyAuthenticated}
    <div style="width: 100%; text-align: center">
        <span class="fa fa-thumbs-up" style="font-size: 4rem; margin: 2rem"></span>
        <p style="font-size: 2.5rem;">
            {locale group="quiqqer/core" var="quiqqer.verified.mail2fa.control.backend.verifiedMail"}
        </p>
    </div>
    {/if}

{else}

    <section data-name="mail-verification"{if $mailIsVerified} hidden{/if}>
        <h2>{locale group="quiqqer/core" var="quiqqer.mail2fa.settings.verify.title"}</h2>
        <p>{locale group="quiqqer/core" var="quiqqer.mail2fa.settings.verify.description"}</p>

        <button type="button" name="send-code" data-name="send-code" class="btn btn-primary">
            <span class="fa fa-envelope-o" data-name="send-code-icon" aria-hidden="true"></span>
            <span>{locale group="quiqqer/core" var="quiqqer.verified.mail2fa.control.frontend.sendCodeButton"}</span>
        </button>

        <form method="POST" action="" data-name="quiqqer-mail2fa-auth-settings-code"
              class="quiqqer-mail2fa-auth-settings-code">
            <fieldset>
                <legend>{locale group="quiqqer/core" var="quiqqer.verified.mail2fa.control.codeLabel"}</legend>
                <div class="code">
                    {for $digit=1 to 6}
                    <input type="text" name="char-{$digit}" inputmode="numeric" maxlength="6"
                           aria-label="{locale group='quiqqer/core' var='quiqqer.verified.mail2fa.control.codeLabel'} {$digit}"
                    />
                    {/for}
                </div>
            </fieldset>
            <button data-name="verify-mail" type="submit" class="btn btn-secondary">
                {locale group="quiqqer/core" var="quiqqer.mail2fa.settings.verify.button"}
            </button>
        </form>
    </section>

    <section data-name="mail-activation"{if !$mailIsVerified} hidden{/if}>
        <h2>{locale group="quiqqer/core" var="quiqqer.mail2fa.settings.activate.title"}</h2>
        <p>{locale group="quiqqer/core" var="quiqqer.mail2fa.settings.activate.description"}</p>
        <button data-name="enable" type="button" class="btn btn-primary">
            {locale group="quiqqer/core" var="activate"}
        </button>
    </section>

{/if}

<p data-name="message" role="status" aria-live="polite"></p>