{% extends 'base.html' %}
{% block content %}
    <!-- Products Section -->
    <section id="products" class="products">
        <div class="section-header">
            <h2>Our Wellness Products</h2>
            <p>Premium organic herbs and supplements for your health journey</p>
        </div>
        <div class="products-grid">
            {% for product in products %}
            <div class="product-card">
                {% if product.badge %}
                    <span class="product-badge">{{ product.badge }}</span>
                {% endif %}

                <div class="product-image">
                    {% if product.image_url %}
                        <img src="{{ url_for('static', filename=product.image_url) }}" alt="product image">
                    {% else %}
                        <img src="{{ url_for('static', filename='images/701ed985f9328736.jpg') }}" alt="product image">
                    {% endif %}
                </div>

                <div class="product-info">
                    <h3>{{ product.name }}</h3>
                    {% if product.description %}
                        <p class="product-description">{{ product.description }}</p>
                    {% endif %}
                    <p class="product-price">N {{ "%.2f"|format(product.price) }}</p>

                    {% if current_user.is_authenticated %}
                        <form method="POST" action="{{ url_for('main.add_to_cart') }}" class="add-to-cart-form" onsubmit="addToCart(event, {{ product.id }}, {{ loop.index }}); return false;">
                            <input type="hidden" name="product_id" value="{{ product.id }}">
                            <div class="quantity-selector">
                                <label for="quantity-{{ loop.index }}">Qty:</label>
                                <input type="number" id="quantity-{{ loop.index }}" name="quantity" value="1" min="1" max="{{ product.quantity_available or 99 }}">
                            </div>
                            <button type="submit" class="btn-add" id="add-btn-{{ loop.index }}">
                                <i class="bi bi-cart-plus"></i> <span id="btn-text-{{ loop.index }}">Add to Cart</span>
                            </button>
                        </form>
                    {% else %}
                        <a href="{{ url_for('auth.signin') }}" class="btn-add">
                            <i class="bi bi-person"></i> Sign in to Buy
                        </a>
                    {% endif %}

                    {% if product.quantity_available and product.quantity_available < 10 %}
                        <p class="stock-warning">Only {{ product.quantity_available }} left in stock!</p>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>

        {% if current_user.is_authenticated %}
        <div class="cart-link-section">
            <a href="{{ url_for('main.view_cart') }}" class="btn cart-link">
                <i class="bi bi-cart3"></i> View Your Cart
            </a>
        </div>
        {% endif %}
    </section>

    <script src="{{ url_for('static', filename='js/products.js') }}"></script>
{% endblock %}