{% if products %}

  <div class="wishlist-product-grid">

    {% set product_row = 0 %}

    {% for product in products %}
      <article class="wishlist-product-card">

        <a href="{{ product.href }}" class="wishlist-product-image">
          {% if product.thumb %}
            <img src="{{ product.thumb }}"
                 alt="{{ product.name }}"
                 title="{{ product.name }}"
                 loading="lazy"/>
          {% else %}
            <span class="wishlist-product-image-placeholder">
              <i class="bi bi-image"></i>
            </span>
          {% endif %}

          <span class="wishlist-heart-badge" aria-hidden="true">
            <i class="bi bi-heart-fill"></i>
          </span>
        </a>

        <div class="wishlist-product-body">

          <div class="wishlist-product-heading">
            <div>
              <span class="wishlist-product-model">
                <i class="bi bi-upc-scan"></i>
                {{ product.model }}
              </span>

              <h3>
                <a href="{{ product.href }}">{{ product.name }}</a>
              </h3>
            </div>

            <span class="wishlist-stock-badge">
              <i class="bi bi-box-seam"></i>
              {{ product.stock }}
            </span>
          </div>

          {% if product.price %}
            <div class="wishlist-product-price">
              <small>{{ column_price }}</small>

              {% if not product.special %}
                <strong>{{ product.price }}</strong>
              {% else %}
                <strong>{{ product.special }}</strong>
                <s>{{ product.price }}</s>
              {% endif %}
            </div>
          {% endif %}

          <form id="form-product-{{ product_row }}"
                action="{{ cart_add }}"
                method="post"
                data-oc-toggle="ajax"
                data-oc-load="{{ cart }}"
                data-oc-target="#cart">

            <input type="hidden"
                   name="product_id"
                   value="{{ product.product_id }}"/>

            <input type="hidden"
                   name="quantity"
                   value="{{ product.minimum }}"/>

          </form>

          <div class="wishlist-product-actions">

            <button type="submit"
                    form="form-product-{{ product_row }}"
                    class="btn btn-primary wishlist-cart-button">
              <i class="bi bi-bag-plus"></i>
              {{ button_cart }}
            </button>

            <a href="{{ product.remove }}"
               class="btn wishlist-remove-button"
               aria-label="{{ button_remove }}: {{ product.name }}">
              <i class="bi bi-trash3"></i>
              {{ button_remove }}
            </a>

          </div>

        </div>

      </article>

      {% set product_row = product_row + 1 %}
    {% endfor %}

  </div>

{% else %}

  <div class="wishlist-empty-state">
    <div class="wishlist-empty-icon">
      <i class="bi bi-heart"></i>
    </div>

    <h3>Your Wishlist Is Empty</h3>
    <p>{{ text_no_results }}</p>
  </div>

{% endif %}