@extends('clientarea.profile.layout')

@section('profile-content')
<div class="card shadow-sm border-0">
    <div class="card-header">
        <h5 class="mb-0"><i class="fas fa-key me-2"></i>{{ __('store/two-factor.backup_codes_title') }}</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-success">
            <i class="fas fa-check-circle me-1"></i>{{ __('store/two-factor.enabled_success') }}
        </div>

        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-1"></i>{{ __('store/two-factor.backup_codes_warning') }}
        </div>

        <div class="row g-2 mb-4">
            @foreach($backupCodes as $code)
                <div class="col-6 col-md-3">
                    <div class="p-2 text-center font-monospace rounded border">
                        <span class="backup-code">{{ $code }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-secondary" id="copy-codes-btn">
                <i class="fas fa-copy me-1"></i>{{ __('store/two-factor.copy_codes') }}
            </button>
            <a href="{{ route('store.auth.profile.security') }}" class="btn btn-primary">
                <i class="fas fa-check me-1"></i>{{ __('store/two-factor.done') }}
            </a>
        </div>
    </div>
</div>
@endsection

@push('profile-scripts')
<script>
window.twoFactorConfig = {
    translations: {
        copied: '{{ __("store/two-factor.copied") }}'
    }
};
</script>
@vite('resources/js/store/two-factor.js')
@endpush
