{% extends "base.html" %}
{% block title %}{{ product.name }} — AgriLink{% endblock %}

{% block content %}

<div class="product-detail-container">

    <div class="product-detail-wrapper">

        <!-- IMAGE SECTION -->
        <div class="product-detail-image-box">
            {% if product.image_filename %}
                <img src="{{ url_for('static', filename='uploads/products/' ~ product.image_filename) }}"
                     alt="{{ product.name }}">
            {% else %}
                <img src="{{ url_for('static', filename='img/no-image.jpg') }}"
                     alt="No image available">
            {% endif %}
        </div>

        <!-- INFO SECTION -->
        <div class="product-detail-info-box">
            <h2>{{ product.name }}</h2>

            <p class="pd-price">£{{ '%.2f'|format(product.price) }}</p>

            <p><strong>Quantity available:</strong> {{ product.quantity }} {{ product.unit }}</p>
            <p><strong>Farmer:</strong> {{ product.farmer.name }}</p>

            <h4>Description</h4>
            <p class="pd-description">{{ product.description }}</p>

            <!-- ✅ REAL ADD-TO-CART FORM -->
            <form method="POST"
                  action="{{ url_for('add_to_cart', product_id=product.id) }}"
                  class="pd-cart-form">
                <!-- For now we add exactly 1 item; later we can add a quantity input -->
                <input type="hidden" name="quantity" value="1">
                <button type="submit" class="pd-btn">
                    Add to Cart
                </button>
            </form>

        </div>

    </div>

</div>

{% endblock %}