{# ==========================================================
   Kottal Premium Theme
   Featured Products
========================================================== #}

{% if products %}

<section class="kottal-featured section">

    <div class="container">

        <div class="section-header text-center">

            <span class="section-subtitle">
             {{ subtitle }}
            </span>

            <h2 class="section-title">
                 {{ title }}
            </h2>

            <p class="section-description">
                {{ description }}
            </p>

        </div>

        <div class="row g-4">

            {% for product in products %}

            <div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">

                <form method="post"
      data-oc-toggle="ajax"
      data-oc-load="{{ cart }}"
      data-oc-target="#cart"
      class="kottal-product-form">

<div class="product-card">

                    {% if product.special %}
                    <span class="sale-badge">
                        Sale
                    </span>
                    {% endif %}
                    
                    

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

                    <div class="product-image">

                        <a href="{{ product.href }}">

                            <img
                                src="{{ product.thumb }}"
                                alt="{{ product.name }}"
                                loading="lazy"
                                class="img-fluid">

                        </a>

                        <div class="product-actions">

    <button
        type="submit"
        formaction="{{ product.cart_add }}"
        class="action-btn"
        title="{{ product.button_cart }}">

        <i class="fa-solid fa-cart-shopping"></i>

    </button>

    <button
        type="submit"
        formaction="{{ product.wishlist_add }}"
        class="action-btn"
        title="{{ product.button_wishlist }}">

        <i class="fa-regular fa-heart"></i>

    </button>

    <button
        type="submit"
        formaction="{{ product.compare_add }}"
        class="action-btn"
        title="{{ product.button_compare }}">

        <i class="fa-solid fa-code-compare"></i>

    </button>

</div>

                    </div>
                    </form>

                    <div class="product-content">

                        <h3>

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

                        </h3>

                        {% if product.rating %}

                        <div class="rating">

                            {% for i in 1..5 %}

                                {% if product.rating >= i %}

                                    <i class="fa-solid fa-star"></i>

                                {% else %}

                                    <i class="fa-regular fa-star"></i>

                                {% endif %}

                            {% endfor %}

                        </div>

                        {% endif %}

                        <div class="price">

                            {% if not product.special %}

                                <span class="price-current">

                                    {{ product.price }}

                                </span>

                            {% else %}

                                <span class="price-old">

                                    {{ product.price }}

                                </span>

                                <span class="price-special">

                                    {{ product.special }}

                                </span>

                            {% endif %}

                        </div>

                        <a
                            href="{{ product.href }}"
                            class="btn-product">

                            View Product

                        </a>

                    </div>

                </div>

            </div>

            {% endfor %}

        </div>

    </div>

</section>

{% endif %}