@section('page-title', 'Membaca: ' . $book['judul'])
<x-app-layout>
    <div class="container-fluid vh-100 d-flex flex-column p-3">

        <div class="d-flex justify-content-between align-items-center pb-2 mb-3 border-bottom">
            <h1 class="h2 text-truncate">{{ $book['judul'] }}</h1>
            <a href="{{ route('baca.index') }}" class="btn btn-outline-secondary flex-shrink-0">
                <i class="bi bi-x-lg me-1"></i>
                Tutup
            </a>
        </div>

        <div class="flex-grow-1">
            {{-- src memanggil route streamPdf yang aman, bukan direct link ke file PDF --}}
            <iframe src="{{ route('baca.stream_pdf', ['id' => $book['id']]) }}" width="100%" height="100%"
                class="rounded border" style="border: none;">
                Browser Anda tidak mendukung iframe untuk menampilkan PDF.
            </iframe>
        </div>

    </div>
</x-app-layout>

{{-- Override CSS agar layout <main> bisa memenuhi lebar container-fluid --}}
@push('styles')
    <style>
        main.container-fluid {
            max-width: none !important;
        }
    </style>
@endpush