@extends('frontend.source.layouts.app')

@section('content')
<style>



.image-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:20px;
}

.image-card{
background:#fff;
padding:10px;
border-radius:8px;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
text-align:center;
}

.image-card img{
width:100%;
height:200px;
object-fit:cover;
border-radius:6px;
}

</style>
	<div class="stricky-header stricked-menu main-menu">
		<div class="sticky-header__content"></div>
	</div>
    <section class="blog-left-sidebar">
        <div class="container">
            <div class="row">
                <div class="col-xl-3">
                    @include('frontend.source.common.sidebar')
                </div>
                <div class="col-xl-9">
                        <h5 class="mb-3">Images</h5>

                <div class="image-grid">

@forelse($images as $img)

<div class="image-card">

<img src="{{ asset($img) }}">

</div>

@empty

<p>No images uploaded.</p>

@endforelse

</div>
                </div>
            </div>
        </div>
    </section>	
@endsection