@extends('layouts.main')

@section('content')

<main class="flex-1 overflow-y-auto p-4 md:p-8 bg-gray-50">


<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">


@foreach($desas as $desa)


<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 flex flex-col relative overflow-hidden hover:shadow-md transition-shadow">


    <!-- Header -->

    <div class="flex items-center mb-6">


        <div class="bg-blue-50 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">

            <i class="fas fa-home"></i>

        </div>


        <h3 class="text-lg font-bold text-gray-800 uppercase">

            {{ $desa->nama_desa }}

        </h3>


    </div>





    <!-- Jumlah Penduduk -->

    <div class="flex-1">


        <p class="text-sm text-gray-500 mb-1">

            Jumlah Penduduk

        </p>


        <div class="flex items-baseline">


            <span class="text-3xl font-bold text-blue-600 mr-2">

                {{ number_format($desa->jumlah_penduduk) }}

            </span>


            <span class="text-sm text-gray-500">

                Jiwa

            </span>


        </div>


    </div>





    <!-- Tombol -->

    <div class="mt-6">


        <a href="{{ route('admin.desa.show',$desa->id) }}"
        
        class="bg-blue-600 text-white px-6 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition duration-150 inline-block w-full text-center">


            <i class="fas fa-eye mr-2"></i>

            Lihat Detail


        </a>


    </div>



</div>


@endforeach



</div>


</main>


@endsection