<? $hash = md5(time() . rand(0, 9999999999)); ?>

<? if ($this->products) : ?>
  <div class="products-box-<?= $hash; ?>">
    <div class="swiper">
      <div class="swiper-wrapper">
        <?
        foreach ($this->products as $product):
          if ($product['status']):
            echo \Shared\Tpl\Tpl::view('shop-product/product-mini', [
              'product' => $product,
              'class'   => 'item',
              'product_mini_class' => 'swiper-slide'
            ]);
          endif;
        endforeach;
        ?>
      </div>
    </div>
    <div class="swiper-button-next products-box-<?= $hash; ?>-next"></div>
    <div class="swiper-button-prev products-box-<?= $hash; ?>-prev"></div>
  </div>

  <script class="footer" type="text/javascript">
    $(function() {
      if ($(".products-box-<?= $hash; ?> .swiper").length) {
        const swiper<?= $hash; ?> = new Swiper(".products-box-<?= $hash; ?> .swiper", {
          spaceBetween: 10,
          loop: false,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          breakpoints: {
            1400: {
              slidesPerView: 6
            },
            992: {
              slidesPerView: 5
            },
            767: {
              slidesPerView: 4
            },
            576: {
              slidesPerView: 3
            },
            300: {
              slidesPerView: 2
            }
          },
          on: {
            init: function() {
              setSliderHeight(this);
            },
            resize: function() {
              setSliderHeight(this);
            },
          },
        })
      }
    });
  </script>

<? endif; ?>