@php
    $gallery = $item['gallery'] ?? [];
    $cover = $item['image'] ?? '';
    $detailUrl = "/portfolio-detail";
    $showDetailBtn = $showDetailBtn ?? true;
    $hideDesc = $hideDesc ?? false;
    $carouselSlot = $carouselSlot ?? false;
@endphp
<article
    class="product-grid-card portfolio-card{{ $carouselSlot ? ' portfolio-card--carousel-slot' : '' }}">
    <div class="portfolio-card__lightbox" data-lightbox="gallery">
        <div class="portfolio-card__media">
            <a href="{{ $cover ?? '' }}" class="product-grid-card__thumb" data-lightbox="gallery-image" title="{{ $item['name'] ?? '' }}"
                aria-label="ดูแกลเลอรี่: {{ $item['name'] }}">
                <img src="{{ $cover ?? '' }}" alt="{{ $item['name'] }}"
                    onerror="this.classList.add('is-broken'); this.removeAttribute('src');">
            </a>
            @if (!empty($gallery) && count($gallery) > 1)
                @foreach ($gallery as $gl)
                    <a href="{{ $gl['image'] ?? '' }}" class="visually-hidden" data-lightbox="gallery-image" title="{{ $item['name'] ?? '' }}"
                        tabindex="-1" aria-hidden="true">&#8203;</a>
                @endforeach
            @endif
        </div>
        @unless ($carouselSlot)
            <div class="product-grid-card__body">
                <h3 class="product-grid-card__title">
                    <a href="{{ $cover }}" data-lightbox="gallery-image" title="{{ $item['name'] ?? '' }}"
                        aria-label="ดูแกลเลอรี่: {{ $item['name'] }}">{{ $item['name'] }}</a>
                </h3>
               
                @if ($showDetailBtn)
                    <a href="{{ $detailUrl }}" class="product-grid-card__btn">ดูรายละเอียด</a>
                @endif
            </div>
        @endunless
    </div>
</article>