{# ==========================================================
   Dr franklin Premium Theme
   Featured Products
========================================================== #}

{% if products %}

<section class="kottal-featured section">

    <div class="container">

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

            <span class="section-subtitle">
                Best Selling Products
            </span>

            <h2 class="section-title">
                Featured Ayurveda Collection
            </h2>

            <p class="section-description">
                Handpicked Ayurvedic products trusted for quality,
                purity and wellness.
            </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">

                <div class="product-card">

                    {% if product.special %}
                    <span class="sale-badge">
                        Sale
                    </span>
                    {% endif %}
                    
                    <form method="post"
      data-oc-toggle="ajax"
      data-oc-load="{{ cart }}"
      data-oc-target="#cart"
      class="kottal-product-form">

    <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"
                              >

                        </a>

                        <div class="product-actions">

                            <button
    type="submit"
    formaction="{{ product.cart_add }}"
    class="action-btn action-cart"
    title="{{ button_cart }}">
    <i class="fa-solid fa-cart-shopping"></i>
</button>

                            <button
    type="submit"
    formaction="{{ product.wishlist_add }}"
    data-oc-load="{{ wishlist_info }}"
    data-oc-target="#wishlist-header"
    class="action-btn action-wishlist"
    title="{{ button_wishlist }}">
    <i class="fa-regular fa-heart"></i>
</button>

                            <button
    type="submit"
    formaction="{{ product.compare_add }}"
    class="action-btn action-compare"
    title="{{ 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 %}