@php
    $recoveryCodes = $recoveryCodes ?? [];
    $canRegenerate = $canRegenerate ?? false;
@endphp

<div class="rounded-xl border border-border/60 bg-muted/25 px-4 py-4 dark:bg-muted/15">
    @if (empty($recoveryCodes))
        <p class="text-sm leading-relaxed text-muted-foreground">
            {{ __('pages/twofactor-settings.recovery.none_remaining') }}
        </p>
    @else
        <p class="text-2xs font-medium uppercase tracking-wide text-muted-foreground">
            {{ __('pages/twofactor-settings.recovery.remaining_label') }}
        </p>
        <p class="mt-1 text-3xl font-bold tabular-nums tracking-tight text-foreground">
            {{ count($recoveryCodes) }}
        </p>
        <p class="mt-1 text-sm leading-relaxed text-muted-foreground">
            {{ trans_choice('auth.two_factor.settings.recovery_remaining', count($recoveryCodes), ['count' => count($recoveryCodes)]) }}
        </p>
    @endif
</div>

@if (! empty($recoveryCodes))
    <div @class(['grid gap-2', 'grid-cols-2' => $canRegenerate, 'grid-cols-1' => ! $canRegenerate])>
        <button
            type="button"
            data-action="view-recovery-codes"
            @class([
                'inline-flex w-full min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background sm:py-2.5',
                'col-span-2' => ! $canRegenerate,
            ])
        >
            <x-heroicon-o-eye class="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
            {{ __('pages/twofactor-settings.recovery.view') }}
        </button>

        @if ($canRegenerate)
            <button
                type="button"
                data-action="regenerate-recovery-codes"
                class="inline-flex w-full min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500/30 focus:ring-offset-2 focus:ring-offset-background dark:bg-amber-950/40 dark:text-amber-300 dark:hover:bg-amber-950/60 sm:py-2.5"
            >
                <x-heroicon-o-arrow-path class="regenerate-icon h-4 w-4 shrink-0" aria-hidden="true" />
                {{ __('pages/twofactor-settings.recovery.regenerate') }}
            </button>
        @endif
    </div>
@elseif ($canRegenerate)
    <button
        type="button"
        data-action="regenerate-recovery-codes"
        class="inline-flex w-full min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500/30 focus:ring-offset-2 focus:ring-offset-background dark:bg-amber-950/40 dark:text-amber-300 dark:hover:bg-amber-950/60 sm:py-2.5"
    >
        <x-heroicon-o-arrow-path class="regenerate-icon h-4 w-4 shrink-0" aria-hidden="true" />
        {{ __('pages/twofactor-settings.recovery.regenerate') }}
    </button>
@endif