@{
    ViewData["Title"] = "Detail Laporan RW";
}

<div class="breadcrumbs text-sm mb-4">
    <ul>
        <li class="text-gray-500"><a>Laporan RW</a></li>
        <li>Detail</li>
    </ul>
</div>

<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 mb-6">
    <div class="prose">
        <h3 class="mb-2">Detail Laporan RW</h3>
    </div>
    <div class="justify-self-end lg:self-center flex flex-wrap gap-3">
        <a href="@Url.Action("Index")" class="btn rounded-full shadow-none">
            <span class="icon icon-fill me-2">arrow_back</span>
            Kembali
        </a>
    </div>
</div>

<!-- CARD 1 -->
<div class="card bg-white shadow-sm mb-6">
    <div class="card-body grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 p-6 items-start">

        <img 
            src="/images/buangsampah1.jpg" 
            alt="Dokumentasi 1"
            class="rounded-lg w-full h-80 object-cover">

        <div class="flex flex-col gap-4">
            <h4 class="font-semibold text-xl">Dokumentasi Kegiatan #1</h4>

            <div>
                <p class="text-xs text-gray-500 mb-1">Keterangan Kegiatan</p>
                <p class="text-sm text-gray-800 leading-relaxed">
                    Massa commodo urna pretium sed integer facilisis vel massa. Quam ligula at nec purus cursus ipsum enim rhoncus nec. Magna viverra viverra ante nec nibh. Faucibus eu pellentesque tellus feugiat sed pretium. Dolor vulputate et et sed ipsum eros nec quis nulla. Mattis gravida faucibus nec amet. Viverra facilisi quam in faucibus consectetur. At vel proin odio semper eget enim nulla ornare venenatis. Sed amet odio sagittis cursus phasellus.
                </p>
            </div>

            <div>
                <p class="text-xs text-gray-500 mb-1">Tanggal Pelaksanaan Kegiatan</p>
                <p class="text-sm text-gray-800 mb-3">21 Oktober 2025</p>
                
                <p class="text-xs text-gray-500 mb-1">Pelaksana Kegiatan</p>
                <p class="text-sm text-gray-800">Ahmad Khadafi</p>
            </div>
        </div>
    </div>
</div>

<!-- CARD 2 -->
<div class="card bg-white shadow-sm mb-6">
    <div class="card-body grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-6 p-6 items-start">

        <img 
            src="/images/buangsampah2.jpg" 
            alt="Dokumentasi 2"
            class="rounded-lg w-full h-80 object-cover">

        <div class="flex flex-col gap-4">
            <h4 class="font-semibold text-xl">Dokumentasi Kegiatan #2</h4>

            <div>
                <p class="text-xs text-gray-500 mb-1">Keterangan Kegiatan</p>
                <p class="text-sm text-gray-800 leading-relaxed">
                    Massa commodo urna pretium sed integer facilisis vel massa. Quam ligula at nec purus cursus ipsum enim rhoncus nec. Magna viverra viverra ante nec nibh. Faucibus eu pellentesque tellus feugiat sed pretium. Dolor vulputate et et sed ipsum eros nec quis nulla. Mattis gravida faucibus nec amet. Viverra facilisi quam in faucibus consectetur. At vel proin odio semper eget enim nulla ornare venenatis. Sed amet odio sagittis cursus phasellus. 
                </p>
            </div>

            <div>
                <p class="text-xs text-gray-500 mb-1">Tanggal Pelaksanaan Kegiatan</p>
                <p class="text-sm text-gray-800 mb-3">21 Oktober 2025</p>
                
                <p class="text-xs text-gray-500 mb-1">Pelaksana Kegiatan</p>
                <p class="text-sm text-gray-800">Ahmad Khadafi</p>
            </div>
        </div>
    </div>
</div>