@if (count($viewedProducts) > 0)
<section class="container pt-5 mt-2 mt-sm-3 mt-lg-4 mt-xl-5">
    <div class="d-flex align-items-center justify-content-between pt-1 pt-lg-0 pb-3 mb-2 mb-sm-3">
        <h2 class="mb-0 me-3">Viewed products</h2>

        <!-- Slider prev/next buttons -->
        <div class="d-flex gap-2">
            <button type="button"
                class="btn btn-icon btn-outline-secondary animate-slide-start rounded-circle me-1"
                id="viewedPrev" aria-label="Prev">
                <i class="ci-chevron-left fs-lg animate-target"></i>
            </button>
            <button type="button" class="btn btn-icon btn-outline-secondary animate-slide-end rounded-circle"
                id="viewedNext" aria-label="Next">
                <i class="ci-chevron-right fs-lg animate-target"></i>
            </button>
        </div>
    </div>

    <!-- Slider -->
    <div class="swiper"
        data-swiper='{
      "slidesPerView": 2,
      "spaceBetween": 24,
      "loop": true,
      "navigation": {
        "prevEl": "#viewedPrev",
        "nextEl": "#viewedNext"
      },
      "breakpoints": {
        "768": {
          "slidesPerView": 3
        },
        "992": {
          "slidesPerView": 4
        }
      }
    }'>
        <div class="swiper-wrapper">

            @foreach ($viewedProducts as $key => $product)
                   <!-- Item -->
            <div class="swiper-slide">
                <x-home.product-card :product="$product"/>
            </div>
            @endforeach
             

        </div>
    </div>
</section>
@endif