@props([
    'methodKey' => 'method',
    'initialHidden' => false,
])

<div
    x-show="{{ $methodKey }} === 'email'"
    @if($initialHidden) style="display: none" @endif
    class="mt-4 text-right"
>
    <button
        type="button"
        class="inline-flex items-center gap-1.5 text-xs font-medium text-brand transition-colors hover:text-brand/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:opacity-60"
        :disabled="emailResending || emailResendCooldown > 0 || isBackgroundLoading"
        @click="resendEmail()"
    >
        <span :class="emailResending ? 'animate-spin' : ''" class="inline-flex">
            <x-heroicon-o-arrow-path class="h-3.5 w-3.5" aria-hidden="true" />
        </span>
        <span class="inline-flex items-baseline gap-0.5">
            <span x-show="emailResending" x-text="i18n.sending">{{ __('twofactor.setup.email.sending') }}</span>
            <span x-show="!emailResending && emailResendCooldown <= 0" x-text="i18n.resend">{{ __('twofactor.setup.email.resend') }}</span>
            <span x-show="!emailResending && emailResendCooldown > 0" class="inline-flex items-baseline gap-0.5">
                <span x-text="i18n.resend_in">{{ __('twofactor.setup.email.resend_in') }}</span>
                <span
                    class="inline-block min-w-[4ch] font-mono tabular-nums text-left"
                    x-text="emailResendTime"
                ></span>
            </span>
        </span>
    </button>
</div>