{# ==========================================================
   Franklin Theme v2.0
   Our Herbal Collection
========================================================== #}

<section class="franklin-collection section">

    <div class="container">

        <div class="section-title">

            <span>Premium Herbal Products</span>

            <h2>Our Herbal Collection</h2>

            <p>
                Discover our carefully selected herbal remedies made with
                premium natural ingredients for everyday wellness.
            </p>

        </div>

        <div class="row g-4">

            {% if products %}
                {% for product in products %}

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

                        <div class="product-card">

                            <!-- Image -->

                            <div class="product-image">

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

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

                                </a>

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

                                <div class="wishlist-btn">

                                    <a href="#"
                                       onclick="wishlist.add('{{ product.product_id }}');return false;">

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

                                    </a>

                                </div>

                                <div class="quick-view">

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

                                        Quick View

                                    </a>

                                </div>

                            </div>

                            <!-- Content -->

                            <div class="product-content">

                                <h5>

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

                                        {{ product.name }}

                                    </a>

                                </h5>

                                {% if product.description %}

                                <p>

                                    {{ product.description|striptags|slice(0,70) }}...

                                </p>

                                {% endif %}

                                {% if product.rating %}

                                <div class="product-rating">

                                    {% for i in 1..5 %}

                                        {% if product.rating >= i %}

                                            <i class="bi bi-star-fill"></i>

                                        {% else %}

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

                                        {% endif %}

                                    {% endfor %}

                                </div>

                                {% endif %}

                                <div class="product-price">

                                    {% if not product.special %}

                                        <span class="price">

                                            {{ product.price }}

                                        </span>

                                    {% else %}

                                        <span class="old-price">

                                            {{ product.price }}

                                        </span>

                                        <span class="special-price">

                                            {{ product.special }}

                                        </span>

                                    {% endif %}

                                </div>

                                <div class="product-btn">

                                    <button
                                        class="btn btn-primary w-100"
                                        onclick="cart.add('{{ product.product_id }}');">

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

                                        Add to Cart

                                    </button>

                                </div>

                            </div>

                        </div>

                    </div>

                {% endfor %}
            {% endif %}

        </div>

        <div class="text-center mt-5">

            <a href="{{ products_link }}" class="btn btn-outline">

                View All Products

                <i class="bi bi-arrow-right"></i>

            </a>

        </div>

    </div>

</section>