<template id="product-thumb">
  <div class="product-thumb">
    <div class="image"><a href="{{ href }}"><img src="{{ thumb }}" alt="{{ name }}" title="{{ name }}" class="img-fluid"/></a></div>
    <div class="content">
      <div class="description">
        <h4><a href="{{ href }}">{{ name }}</a></h4>

        <p>{{ description }}</p>

        {% if price %}
          <div class="price">
            {% if not special %}
              <span class="price-new"><x-currency code="{{ currency }}" amount="{{ price }}"></x-currency></span>
            {% else %}
              <span class="price-new"><x-currency code="{{ currency }}" amount="{{ special }}"></x-currency></span>
              <span class="price-old"><x-currency code="{{ currency }}" amount="{{ price }}"></x-currency></span>
            {% endif %}
            {% if tax %}
              <span class="price-tax">{{ text_tax }} <x-currency code="{{ currency }}" amount="{{ tax }}"></x-currency></span>
            {% endif %}
          </div>
        {% endif %}

        {% if review_status and rating %}
          <div class="rating">
            {% for i in 1..5 %}
              {% if rating < i %}
                <span class="fa-stack"><i class="fa-regular fa-star fa-stack-1x"></i></span>
              {% else %}
                <span class="fa-stack"><i class="fa-solid fa-star fa-stack-1x"></i><i class="fa-regular fa-star fa-stack-1x"></i></span>
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}

      </div>

      <form method="post" data-oc-target="#cart">
        <div class="button">
          <button type="submit" formaction="{{ cart_add }}" title="{{ button_cart }}" data-bind="button_cart"><i class="fa-solid fa-shopping-cart"></i></button>
          <button type="submit" formaction="{{ wishlist_add }}" title="{{ button_wishlist }}" data-bind="button_wishlist"><i class="fa-solid fa-heart"></i></button>
          <button type="submit" formaction="{{ compare_add }}" title="{{ button_compare }}" data-bind="button_compare"><i class="fa-solid fa-arrow-right-arrow-left"></i></button>
        </div>
        <input type="hidden" name="product_id" value="{{ product_id }}"/>
        <input type="hidden" name="quantity" value="{{ minimum }}"/>
      </form>

    </div>
  </div>
</template>