@props([
    'modalId' => 'recovery-codes-modal',
    'recoveryCodes' => [],
])

@push('modals')
    <x-feedback.modal
        :id="$modalId"
        :title="__('auth.two_factor.settings.recovery_modal_title')"
        size="lg"
    >
        <div
            x-data="{
                codes: @js($recoveryCodes),
                download() {
                    const content = this.codes.join('\n');
                    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
                    const url = URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = 'recovery-codes.txt';
                    link.click();
                    URL.revokeObjectURL(url);
                },
            }"
        >
            <p class="mb-4 text-sm leading-relaxed text-muted-foreground">
                {{ __('auth.two_factor.settings.recovery_modal_intro') }}
            </p>

            <ul
                class="grid grid-cols-1 gap-2 min-[420px]:grid-cols-2"
                role="list"
                aria-label="{{ __('auth.two_factor.settings.recovery_modal_title') }}"
            >
                @foreach ($recoveryCodes as $code)
                    <li>
                        <span class="block rounded-lg border border-border/80 bg-muted/30 px-3 py-2 text-center font-mono text-xs tracking-wide text-foreground sm:text-sm">
                            {{ $code }}
                        </span>
                    </li>
                @endforeach
            </ul>

            <div class="mt-6 flex flex-col-reverse gap-3 border-t border-border pt-5 sm:flex-row sm:justify-end">
                <x-buttons.secondary
                    type="button"
                    @click="$dispatch('close-modal', '{{ $modalId }}')"
                >
                    {{ __('buttons.close') }}
                </x-buttons.secondary>
                <x-buttons.primary type="button" @click="download()">
                    <x-heroicon-o-arrow-down-tray class="h-4 w-4 shrink-0" aria-hidden="true" />
                    {{ __('pages/twofactor-settings.recovery.download') }}
                </x-buttons.primary>
            </div>
        </div>
    </x-feedback.modal>
@endpush