@props(['backups'])

@if (empty($backups))
    <div style="text-align:center;padding:32px;color:#64748b;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2" style="margin:0 auto 16px;display:block;">
            <path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4"/>
        </svg>
        <div style="font-size:14px;">Nog geen backups beschikbaar</div>
        <div style="font-size:12px;margin-top:8px;">Backups worden automatisch aangemaakt bij elke emulator update</div>
    </div>
@else
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;">
        @foreach ($backups as $backup)
            @php
                $dateFormatted = str_replace('_', ' ', $backup['date']);
            @endphp
            <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
                            <path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4"/>
                        </svg>
                        <span style="font-weight:600;color:#1e293b;font-size:14px;">{{ $backup['jar'] }}</span>
                    </div>
                </div>
                <div style="font-size:12px;color:#64748b;margin-bottom:12px;">{{ $dateFormatted }}</div>
                <button
                    wire:click="restoreBackup('{{ $backup['name'] }}')"
                    style="width:100%;background:linear-gradient(135deg,#3b82f6,#2563eb);padding:10px;border-radius:8px;color:white;border:none;cursor:pointer;font-weight:600;font-size:13px;box-shadow:0 2px 8px rgba(37,99,235,0.3);transition:transform 0.2s;"
                    onmouseover="this.style.transform='translateY(-1px)'"
                    onmouseout="this.style.transform='translateY(0)'"
                >
                    🔄 Herstellen
                </button>
            </div>
        @endforeach
    </div>
@endif