@if($photos->isEmpty())
    <x-chm.empty-state
        icon="bx bx-image"
        title="No photos yet"
        message="Profile and update photos will appear here when uploaded."
    />
@else
    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3">
        @foreach($photos as $photo)
            <div class="col">
                <button
                    type="button"
                    class="chm-child-gallery-item border-0 p-0 w-100"
                    data-bs-toggle="modal"
                    data-bs-target="#childGalleryModal"
                    data-img="{{ url('upload/cfdp_child/'.$photo) }}"
                >
                    <img src="{{ url('upload/cfdp_child/'.$photo) }}" alt="Child photo">
                </button>
            </div>
        @endforeach
    </div>

    <div class="modal fade" id="childGalleryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0 text-center">
                    <img id="childGalleryModalImg" class="img-fluid rounded shadow" alt="Photo preview">
                </div>
                <div class="modal-footer border-0 justify-content-center">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endif