<%
const stamps = _.cms('stamps') || {}
const itemData = {}
let itemDataFields = ['_id', 'sku', 'slug', 'quantity']
if (Array.isArray(_.itemDataFields)) {
  itemDataFields = itemDataFields.concat(_.itemDataFields)
}
itemDataFields.forEach(field => itemData[field] = opt.item[field])
itemData.name = _.ecomUtils.name(opt.item)
itemData.price = _.ecomUtils.price(opt.item)

const imgObj = _.ecomUtils.img(opt.item)
if (imgObj) {
  itemData.pictures = [{
    _id: _.ecomUtils.randomObjectId(),
    normal: imgObj
  }]
}
let stampsList
if (stamps && Array.isArray(stamps.stamps_list) && stamps.stamps_list.length) {
  stampsList = stamps.stamps_list
}

%>

<article class="product-item" data-product="<%= JSON.stringify(itemData) %>">
  <div
    class="product-card"
    data-product-id="<%= itemData._id %>"
    data-sku="<%= itemData.sku %>"
    <% if (!opt.static) { %>
      data-to-render="true"
    <% } %>
  >
    <!--
      `ProductCard` should be rendered (hydrated) here:
      https://developers.e-com.plus/storefront/@ecomplus/storefront-components/docs/ProductCard.html
    -->
    <div data-slot="stamps">
      <% if (Array.isArray(stampsList) && stampsList.length) { %>
        <div class="product-card__stamps">
          <% for (stamp of stampsList) { 
            if (stamp.img && (!stamp.skus || !stamp.skus.length || stamp.skus.includes(itemData.sku))) {
              %>
              <span class="product-card__stamps-<%= stamp.id && stamp.id.toLowerCase().replace(/\s/g, '-') %>">
                <img src="<%= stamp.img %>" alt="<%= stamp.id %>">
              </span>
            <% } %>
          <% } %>
        </div>
      <% } %>
    </div>

    <a
      href="/<%= itemData.slug %>"
      class="product-card__link"
      title="<%= itemData.name %>"
    >
      <!-- Custom code on product card top wrapped by link:
      <span data-slot="header">
      </span>
      -->

      <div class="product-card__pictures">
        <!-- Picture(s) will be inserted and loaded dynamically within `ProductCard` -->
        <% if (imgObj) { %>
          <picture class="product-card__picture">
            <img
              data-src="<%= imgObj.url %>"
              alt="<%= imgObj.alt %>"
              class="lozad-delay fade"
              <% if (imgObj.url.startsWith('https://ecoms1.com/')) { %>
                crossorigin="anonymous"
              <% } %>
            >
          </picture>
        <% } %>
      </div>

      <div data-slot="title">
        <h3 class="product-card__name">
          <%= itemData.name %>
        </h3>
      </div>
    </a>

    <div class="product-card__prices prices">
      <strong class="prices__value">
        <% if (opt.item.available && opt.item.visible && _.ecomUtils.inStock(opt.item)) { %>
          <%= _.ecomUtils.formatMoney(itemData.price) %>
        <% } else { %>
          --
        <% } %>
      </strong>
    </div>

    <!-- Customize add to cart button content:
    <div data-slot="buy-button-content">
      <i class="i-shopping-bag mr-1"></i>
      {{ _.dictionary('buy') }}
    </div>
    -->

    <div class="spinner-border spinner-border-sm fade" role="status">
      <span class="sr-only">Loading...</span>
    </div>

    <%- await include('@/helpers/widgets-append', {
      _, opt, field: 'productCardSlots'
    }) %>
  </div>

  <%- await include('@/helpers/widgets-append', {
    _, opt, field: 'productItemAppend'
  }) %>
</article>
