@extends('layouts.app')

@section('content')

<!-- Hero -->
<section
    style="
        background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url('{{ asset('images/gambar1.jpg') }}');
        background-size: cover;
        background-position: center;
        min-height: 350px;
        display:flex;
        align-items:center;
    ">

    <div class="container text-center text-white">

        <h1 class="display-4 fw-bold">
            Detail Galeri
        </h1>

        <p class="lead">
            Dokumentasi Budaya Kabupaten Mandailing Natal
        </p>

    </div>

</section>

<!-- Detail -->
<section class="py-5">

    <div class="container">

        <div class="row">

            <div class="col-lg-8">

                <div class="card shadow border-0">

                    <img src="{{ asset('storage/'.$galeri->gambar) }}"
                        class="img-fluid rounded-top"
                        style="width:100%; max-height:650px; object-fit:cover;">

                    <div class="card-body">

                        <h2 class="fw-bold mb-3">

                            {{ $galeri->judul }}

                        </h2>

                        <hr>

                        <p class="text-muted">

                            <i class="bi bi-calendar-event"></i>

                            Diunggah :
                            {{ $galeri->created_at->format('d F Y') }}

                        </p>

                    </div>

                </div>

            </div>

            <div class="col-lg-4">

                <div class="card shadow border-0">


                    <div class="card-body">

                        
                        <a href="{{ route('frontend.galeri') }}"
                            class="btn btn-warning w-100">

                            <i class="bi bi-arrow-left"></i>

                            Kembali ke Galeri

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

@endsection