{# ==========================================================
   Kottal Premium Theme
   Universal Product Grid Component
   Variables:
   - title
   - subtitle
   - description (optional)
   - products
   - badge ('sale','new','none')
   - view_all (optional)
========================================================== #}

{% if products %}

<section class="product-section section">

    <div class="container">

        <div class="section-header">

            <div class="row align-items-center">

                <div class="col-lg-8">

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

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

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

                </div>

                <div class="col-lg-4 text-lg-end">

                    {% if view_all %}

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

                        View All

                    </a>

                    {% endif %}

                </div>

            </div>

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

                    {# Badge #}

                    {% if badge == 'sale' and product.special %}

                        <span class="sale-badge">

                            Sale

                        </span>

                    {% elseif badge == 'new' %}

                        <span class="new-badge">

                            New

                        </span>

                    {% endif %}

                    <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
                                class="action-btn"
                                title="Add to Cart"
                                onclick="cart.add('{{ product.product_id }}');">

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

                            </button>

                            <button
                                class="action-btn"
                                title="Wishlist"
                                onclick="wishlist.add('{{ product.product_id }}');">

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

                            </button>

                            <button
                                class="action-btn"
                                title="Compare"
                                onclick="compare.add('{{ product.product_id }}');">

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

                            </button>

                        </div>

                    </div>

                    <div class="product-content">

                        <h3>

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

                                {{ product.name }}

                            </a>

                        </h3>

                        {% if product.rating is defined and product.rating %}

                        <div class="rating">

                            {% for i in 1..5 %}

                                {% if product.rating >= i %}

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

                                {% else %}

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

                                {% endif %}

                            {% endfor %}

                        </div>

                        {% endif %}

                        <div class="price">

                            {% if product.special %}

                                <span class="price-old">

                                    {{ product.price }}

                                </span>

                                <span class="price-special">

                                    {{ product.special }}

                                </span>

                            {% else %}

                                <span class="price-current">

                                    {{ product.price }}

                                </span>

                            {% endif %}

                        </div>

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

                            View Product

                        </a>

                    </div>

                </div>

            </div>

            {% endfor %}

        </div>

    </div>

</section>

{% endif %}