<section class="bg-gray-100">
  <script>
    function initSliderComponent_5f7d6072c0a38() {
      return {
        active: 0,
        products: [],
        loading: true,
        minHeight: function() {
          return 'min-height: ' + ((this.loading && '491px') || 0);
        },
        query: "\n{\n  products(\n    filter: {\n      \n      sku: { in: [\"DTHE\"] },\n      \n      \n      }\n    pageSize: 8,\n    sort: {position: ASC}\n    ) {\n    items {\n        related_products {\n        \n      sku\n      id\n      name\n      small_image {\n        label\n        url\n      }\n      url_key\n      price_range {\n        minimum_price {\n          regular_price {\n            value\n            currency\n          }\n          final_price {\n            value\n            currency\n          }\n        }\n      }\n    }\n    }\n  }\n}",
        getProducts: function getProducts($nextTick) { // normally a fetch using the above graphql query
          $this = this;
          this.products = [1, 2, 3, 4, 5, 6, 7].map(function(index) {
            return {
              "sku": "ANHE",
              "id": index,
              "name": "Product Name",
              "small_image": {
                "label": "Product name",
                "url": "https://unsplash.com/photos/lbybdXUYWRs/download?force=true&w=640"
              },
              "url_key": "key",
              "price_range": {
                "minimum_price": {
                  "regular_price": {
                    "value": 1000,
                    "currency": "EUR"
                  },
                  "final_price": {
                    "value": 1000,
                    "currency": "EUR"
                  }
                }
              }
            }
          });
          $nextTick(function() {
            $this.calcPageSize()
          });
        },
        getSlider: function getSlider() {
          return this.$el.querySelector('.js_slides');
        },
        pageSize: 1,
        pageFillers: 0,
        calcPageSize: function calcPageSize() {
          var slider = this.getSlider();
          if (slider) {
            this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
            this.pageFillers = (this.pageSize * Math.ceil(this.products.length / this.pageSize)) - this.products.length;
          }
        },
        calcActive: function calcActive(event) {
          var slider = this.getSlider();
          this.active = Math.ceil(
            Math.round(
              slider.scrollLeft / (slider.scrollWidth / this.products.length)
            ) / this.pageSize
          ) * this.pageSize;
        }
      }
    }
  </script>
  <section class="text-gray-700 body-font my-12" x-data="initSliderComponent_5f7d6072c0a38()" x-init="getProducts($nextTick);" style="min-height: 491px;" :style="minHeight()" @resize.window.debounce="calcPageSize()">
    <template x-if="products && products.length">
      <div class="relative container">
        <div class="container mx-auto flex pt-6 pb-3 mb-6 md:flex-row flex-col items-center border-b-2 border-gray-300">
          <h3 class="text-gray-900 text-2xl title-font font-medium">
            Related Products: </h3>
        </div>
        <div class="w-full relative overflow-x-hidden">
          <div class="js_slides w-full relative flex flex-no-wrap snap overflow-auto relative flex-no-wrap flex transition-all" id="slider_5f7d6072c0a38" x-on:scroll.debounce="active = Math.ceil(Math.round($event.target.scrollLeft / ($event.target.scrollWidth / products.length))/pageSize)*pageSize">
            <template x-for="(product, index) in products" :key="index">
              <div class="js_slide w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex-none shadow-md m-1">
                <div class="md:mr-2 rounded-md text-center w-full">
                  <a :href="'#' + product.url_key + '.html'" class="relative w-full product photo product-item-photo flex items-center bg-white" style="padding-top:100%" tabindex="-1">
                    <span class="absolute h-full w-full align-center top-0 left-0 flex content-center flex-wrap p-2 overflow-hidden">
                      <img class="w-full h-auto self-center" :src="product.small_image.url" :alt="product.small_image.label" loading="lazy" width="500" height="500" />
                    </span>
                  </a>

                  <p class="pt-3 flex items-center justify-center text-primary px-1">
                    <a class="product-item-link truncate" :href="'https://latest.c-218.maxcluster.net/index.php/' + product.url_key + '.html'">
                      <span x-text="product.name + ' ' + index"></span>
                    </a>
                  </p>
                  <p class="pt-1 text-gray-900" x-text="new Intl.NumberFormat(document.documentElement.lang, { style: 'currency', currency: product.price_range.minimum_price.final_price.currency }).format(product.price_range.minimum_price.final_price.value)"></p>
                  <p class="p-3 flex flex-wrap inline justify-center">
                    <a class="w-auto bg-green-500 rounded p-2 shadow-md text-white hover:bg-green-600" :href="'https://hyva.io/' + product.url_key + '.html'">
                      View Product </a>
                  </p>
                </div>
              </div>
            </template>
            <div :class="{ 'js_dummy_slide w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex-none py-1' : pageFillers > 0 }" class=""></div>
            <div :class="{ 'js_dummy_slide w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex-none py-1' : pageFillers > 1 }" class=""></div>
            <div :class="{ 'js_dummy_slide w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex-none py-1' : pageFillers > 2 }"></div>
          </div>
        </div>
        <template x-if="products.length && products.length > pageSize">
          <div class="p-4 flex items-center justify-center flex-1" x-cloak>
            <button class="w-8 h-8 outline-none focus:outline-none rounded-full mx-4 text-black" :class="{ 'invisible' : active === 0 }" x-on:click="getSlider().scrollLeft = (getSlider().scrollWidth / products.length) * (active-pageSize)">
              <svg viewBox="0 0 1024 1024">
                <path class="path1" d="M716.8 1024c6.552 0 13.102-2.499 18.101-7.499 9.998-9.997 9.998-26.206 0-36.203l-442.698-442.698 442.698-442.699c9.998-9.997 9.998-26.206 0-36.203s-26.206-9.998-36.203 0l-460.8 460.8c-9.998 9.997-9.998 26.206 0 36.203l460.8 460.8c5 5 11.55 7.499 18.102 7.499z"></path>
              </svg>
            </button>
            <template x-for="(product,index) in products" :key="index">
              <button class="bg-black w-3 h-3 block mx-1 bg-opacity-25 shadow rounded-full" :alt="index" :class="{'bg-opacity-100': active === index, 'hidden': (pageSize !== 1 && !!(index % pageSize)) }" x-on:click="getSlider().scrollLeft = (getSlider().scrollWidth / products.length) * index"></button>
            </template>
            <button class="w-8 h-8 outline-none focus:outline-none rounded-full mx-4 text-black" :class="{  'invisible' : active === products.length-pageSize }" x-on:click="getSlider().scrollLeft = (getSlider().scrollWidth / products.length) * (active+pageSize)">
              <svg id="lnr-chevron-right" viewBox="0 0 1024 1024">
                <path class="path1" d="M256 1024c-6.552 0-13.102-2.499-18.101-7.499-9.998-9.997-9.998-26.206 0-36.203l442.698-442.698-442.698-442.699c-9.998-9.997-9.998-26.206 0-36.203s26.206-9.998 36.203 0l460.8 460.8c9.998 9.997 9.998 26.206 0 36.203l-460.8 460.8c-5 5-11.55 7.499-18.102 7.499z"></path>
              </svg>
            </button>
          </div>
        </template>
      </div>
    </template>
  </section>
</section>