@php
$unique_id = uniqid();
@endphp
@if(isset($data) && is_array($data) && !empty($data))
<div class="heading">
      <h2 class="heading__title">{{ $data['category_title'] }}</h2>
      <span class="heading__meta">{{ $data['category_subtitle'] }}</span>
    </div>
    <div class="grid2">
      @foreach($data['category_items'] as $category)
      <figure class="grid__item2" role="img" aria-labelledby="caption{{ $unique_id }}">
        <div class="grid__item-image" style="background-image: url({{ asset($category['product_image']) }})"></div>
        <figcaption class="grid__item-caption" id="caption{{ $unique_id }}">
          <h3>{{ $category['product_name'] }}</h3>
          <p>{{ $category['product_model'] }}</p>
        </figcaption>
      </figure>
      @endforeach

    </div>
    <!-- panel for large preview -->
    <figure class="panel" role="img" aria-labelledby="caption">
      <div class="panel__img" style="background-image: url(./images/category/img1.webp)"></div>
      <figcaption class="panel__content" id="caption">
        <div>
          <h3>{{ $category['product_name'] }}</h3>
          
        </div>

        <p class="panel___desc"></p>
        <div class="panel__buttons">
          <a type="button" href="{{ ($category['product_button_url']) }}">
            {{ $category['product_button_text'] }}
          </a>
          <button type="button" class="panel__close" aria-label="Close preview">
            GERİ
          </button>
        </div>
      </figcaption>
    </figure>
@endif

@section('scripts')
<!-- Add (Lenis) smooth scroll -->
<script src="{{ asset(env('THEME_FOLDER') . '/assets/js/category/lenis.min.js') }}"></script>
<script src="{{ asset(env('THEME_FOLDER') . '/assets/js/category/smoothscroll.js') }}"></script>
<!-- Scripts for the effect -->
<script type="module" src="{{ asset(env('THEME_FOLDER') . '/assets/js/category/index.js') }}"></script>

@endsection