<% if (Array.isArray(opt.items) && opt.items.length) {
  const title = opt.title ||
    (opt.collection && opt.collection.name) ||
    _.dictionary('popularProducts')
  const link = opt.link || (opt.collection && `/${opt.collection.slug}`)

  if (opt.shuffle) {
    let m = opt.items.filter(item => {
      return item.available && _.ecomUtils.inStock(item)
    }).length
    let t, i
    while (m) {
      i = Math.floor(Math.random() * m--)
      t = opt.items[m]
      opt.items[m] = opt.items[i]
      opt.items[i] = t
    }
  }
  %>

  <section
    class="products-carousel"
    data-size="<%= opt.items.length %>"
    <% if (opt.collection) { %>
      data-collection-id="<%= opt.collection._id %>"
    <% } %>
    data-title="<%= title %>"
  >
    <% if (!opt.headless) { %>
      <h4 class="products-carousel__title">
        <% if (opt.title || opt.collection) { %>
          <% if (link) { %>
            <a href="<%= link %>">
              <%= title %>
            </a>
          <% } else { %>
            <span><%= title %></span>
          <% } %>
        <% } else { %>
          <a href="/search">
            <%= title %>
          </a>
        <% } %>
      </h4>
    <% } %>

    <div
      class="glide"
      data-wait-mutation="true"
      data-autoplay="<%= opt.autoplay %>"
      data-per-view="4"
      data-per-view-md="3"
      data-per-view-sm="2"
    >
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides products-carousel__list">
          <% for (let i = 0; i < opt.items.length; i++) { %>
            <li class="glide__slide products-carousel__item">
              <%- await include('@/sections/inc/product-item', {
                _, opt: { item: opt.items[i] }
              }) %>
            </li>
          <% } %>
        </ul>

        <div
          class="glide__arrows glide__arrows--outer"
          data-glide-el="controls"
        >
          <button
            class="btn glide__arrow glide__arrow--left"
            data-glide-dir="<"
            aria-label="<%= _.dictionary('previous') %>"
          >
            <i class="i-chevron-left"></i>
          </button>
          <button
            class="btn glide__arrow glide__arrow--right"
            data-glide-dir=">"
            aria-label="<%= _.dictionary('next') %>"
          >
            <i class="i-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </section>
<% } %>
