{{-- Card Buku yang Dipinjam --}}
<div class="card border-0 mb-4">
    <div class="card-body p-4">
        <h5 class="fw-bold mb-0">Buku yang Dipinjam</h5>
        <ul class="list-group list-group-flush mt-3">
            @forelse ($bukuOffline as $buku)
                <li class="list-group-item px-0">
                    <h6 class="fw-semibold mb-1">{{ $buku['judul'] }}</h6>
                    <small class="text-muted">{{ $buku['penulis'] }}</small>
                    <span class="badge bg-danger-subtle text-danger-emphasis float-end">Sisa {{ $buku['sisa_hari'] }} hari</span>
                </li>
            @empty
                <li class="list-group-item px-0 text-center text-muted small py-3">Tidak ada buku yang sedang dipinjam.</li>
            @endforelse
        </ul>
    </div>
</div>

{{-- Card Riwayat Online --}}
<div class="card border-0 mb-4">
    <div class="card-body p-4">
        <h5 class="fw-bold mb-0">Baca Buku Online</h5>
        <ul class="list-group list-group-flush mt-3">
            @forelse ($bukuOnline as $buku)
                <li class="list-group-item px-0">
                    <h6 class="fw-semibold mb-1">{{ $buku['judul'] }}</h6>
                    <small class="text-muted">{{ $buku['penulis'] }}</small>
                    <span class="badge bg-primary-subtle text-primary-emphasis float-end">{{ $buku['progress'] }}%</span>
                </li>
            @empty
                <li class="list-group-item px-0 text-center text-muted small py-3">Tidak ada riwayat buku yang dibaca.</li>
            @endforelse
        </ul>
    </div>
</div>

{{-- Card Keamanan Akun --}}
<div class="card border-0">
    <div class="card-body p-4">
        <h5 class="fw-bold mb-3">Keamanan Akun</h5>
        <p class="small text-muted">Ubah password Anda secara berkala.</p>
        <a href="{{ route('profile.edit') }}" class="btn btn-outline-secondary rounded-pill">Ubah Password</a>
    </div>
</div>