@extends('layouts.frontend.app')

@section('content')
    <section id="photos" class="photos">
        <div class="container" data-aos="fade-up">
            <div class="d-flex align-items-center justify-content-center gap-3 w-100 mb-5">
                <div class="border w-25"></div>
                <div class="fw-bold text-secondary fs-4">{{ $categoryName }}</div>
                <div class="border w-25"></div>
            </div>
            @if (count($photos) > 0)
                <div class="row">
                    @foreach ($photos as $item)
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mb-4 shadow-md">
                            <div class="card">
                                <img src="{{ $item->image }}" class="card-img-top img-fluid">
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="row text-center justify-content-center">
                    <div class="text-center">
                        <lord-icon src="https://cdn.lordicon.com/tbkntwzz.json" trigger="loop" delay="1500"
                            style="width:150px;height:150px">
                        </lord-icon>
                        <h3 class="fw-semibold" style="letter-spacing: 2px">Data Empty</h3>
                    </div>
                </div>
            @endif
        </div>
    </section>
@endsection