@section('page-title', $pageTitle)
<x-app-layout>
    <div class="d-flex flex-column" style="min-height: calc(100vh - 110px);">

        <div class="d-flex align-items-center mb-4">
            <a href="{{ route($previousRoute) }}" class="btn btn-outline-secondary me-3">
                <i class="bi bi-arrow-left"></i>
            </a>
            <h1 class="h2 mb-0">Ringkasan Buku</h1>
        </div>

        <main class="flex-grow-1 d-flex align-items-center justify-content-center">
            <div class="container-fluid">
                <div class="row g-5 align-items-center">

                    <div class="col-lg-4 text-center">
                        <img src="{{ asset($buku['cover']) }}" class="img-fluid rounded-3 shadow-lg"
                            style="max-height: 450px; max-width: 300px; object-fit: cover;" alt="Cover {{ $buku['judul'] }}">
                    </div>

                    <div class="col-lg-8">
                        <h1 class="display-5 fw-bold mb-2">{{ $buku['judul'] }}</h1>
                        <p class="h5 text-muted mb-4">oleh {{ $buku['penulis'] }}</p>
                        
                        <p class="lead" style="text-align: justify;">
                            Ini adalah ringkasan atau sinopsis dari buku "{{ $buku['judul'] }}". Lorem ipsum dolor sit
                            amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
                            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                            aliquip ex ea commodo consequat.
                        </p>

                        <div class="mt-5">
                            <a href="{{ route($actionRoute, $buku['id']) }}" class="btn btn-primary  rounded-pill py-3 px-4">
                                <i class="{{ $actionButtonIcon }} me-2"></i>
                                {{ $actionButtonText }}
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </main>

        <footer class="mt-auto text-center text-muted py-3">
            <small>Copyright &copy; {{ date('Y') }} Perpus.</small>
        </footer>

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