{# ==========================================================
   Franklin Theme v2.0
   Featured Products
========================================================== #}

{% if products %}

<section class="featured-section py-5">

    <div class="container">

        <div class="section-heading text-center mb-5">

            <span class="section-subtitle">
                Featured Products
            </span>

            <h2 class="section-title">
                Best Selling Herbal Remedies
            </h2>

            <p class="section-description">
                Carefully selected Ayurvedic formulations for a healthier lifestyle.
            </p>

        </div>

        <div class="row g-4">

            {% for product in products %}

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

                <div class="product-card h-100">

                    <div class="product-image">

                        <a href="{{ product.href }}">
                            <img src="{{ product.thumb }}"
                                 alt="{{ product.name }}"
                                 class="img-fluid">
                        </a>

                        <div class="product-icons">

                            <form method="post"
                                  class="wishlist-form"
                                  data-oc-toggle="ajax">

                                <button
                                    type="submit"
                                    class="icon-btn btn-wishlist"
                                    formaction="{{ wishlist_add }}"
                                    title="Add to Wishlist"
                                    aria-label="Add {{ product.name }} to Wishlist">

                                    <i class="bi bi-heart"></i>

                                </button>

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

                            </form>

                        </div>

                    </div>

                    <div class="product-content">

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

                        {% if product.rating %}

                        <div class="rating mb-2">

                            {% for i in 1..5 %}

                                {% if product.rating >= i %}
                                    ★
                                {% else %}
                                    ☆
                                {% endif %}

                            {% endfor %}

                        </div>

                        {% endif %}

                        <div class="price mb-3">

                            {% if product.special %}

                                <span class="old-price">
                                    {{ product.price }}
                                </span>

                                <span class="special-price">
                                    {{ product.special }}
                                </span>

                            {% else %}

                                <span class="normal-price">
                                    {{ product.price }}
                                </span>

                            {% endif %}

                        </div>

                        <button
    type="button"
    class="btn btn-success w-100 btn-add-cart"
    data-product-id="{{ product.product_id }}">

    <i class="bi bi-cart-plus me-2"></i>

    Add to Cart

</button>

                    </div>

                </div>

            </div>

            {% endfor %}

        </div>

    </div>

</section>

{% endif %}