<div class="mb-8 text-center">
    <LinkTo @route="console" class="flex items-center justify-center">
        <LogoIcon @brand={{@brand}} @size="12" class="rounded-md" />
    </LinkTo>
    <h2 class="text-lg font-extrabold text-gray-900 dark:text-white truncate">
        {{if this.isSent "Verification Code"}}
    </h2>
</div>

<div class="flex px-3 py-2 mb-4 rounded-md shadow-sm bg-green-200">
    <div>
        <FaIcon @icon="check-circle" @size="lg" class="text-green-900 mr-4" />
    </div>
    <p class="flex-1 text-sm text-green-900 dark:text-green-900">
        <strong>{{t "auth.two-fa.verify-code.check-title"}}</strong><br />
        {{t "auth.two-fa.verify-code.check-subtitle"}}
    </p>
</div>

<form class="mt-8" {{on "submit" this.verifyCode}}>
    <div class="flex items-center justify-between my-6">
        <OtpInput @onInputCompleted={{this.handleOtpInput}} @size={{6}} class="w-full" />
    </div>

    <div id="otp-countdown-container" class="otp-countdown-container flex {{if this.isCodeExpired 'flex-col' 'flex-row'}} items-center justify-center min-h-12">
        {{#if this.countdownReady}}
            <Countdown @expiry={{this.twoFactorSessionExpiresAfter}} @countdownClass="text-lg" @onCountdownEnd={{this.handleCodeExpired}} />
        {{/if}}
        {{#if this.isCodeExpired}}
            <InfoBlock>
                <div>{{t "auth.two-fa.verify-code.expired-help-text"}}</div>
                <Button @type="primary" @wrapperClass="mt-2" @text={{t "auth.two-fa.verify-code.resend-code"}} @icon="arrow-rotate-right" @onClick={{this.resendCode}} />
            </InfoBlock>
        {{/if}}
    </div>

    <div class="mt-4">
        <Button @buttonType="submit" @type="primary" @text={{t "auth.two-fa.verify-code.verify-code"}} @icon="check-circle" @wrapperClass="btn-block" @isLoading={{this.isLoading}} />
    </div>

    <div class="text-center flex flex-row items-center justify-center space-x-4 mt-3.5">
        <a href="#" class="text-sm text-blue-500 hover:underline inline-block" {{on "click" this.resendCode}}>
            {{t "auth.two-fa.verify-code.resend-code"}}
        </a>
        <a href="#" class="text-sm text-danger hover:underline inline-block" {{on "click" this.cancelTwoFactor}}>
            {{t "auth.two-fa.verify-code.cancel-two-factor"}}
        </a>
    </div>
</form>