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

{% block content %}

<div class="marketplace-container">

    <!-- ========== LEFT FILTER SIDEBAR ========== -->
    <aside class="market-filters">

        <h4>Filters</h4>

        <!-- SEARCH -->
        <form method="GET" action="{{ url_for('marketplace') }}">

            <label>Search</label>
            <input type="text" name="q" placeholder="Search product..."
                   value="{{ request.args.get('q','') }}">

            <!-- PRICE FILTERS -->
            <label>Min Price (£)</label>
            <input type="number" step="0.01" name="min_price"
                   value="{{ request.args.get('min_price','') }}">

            <label>Max Price (£)</label>
            <input type="number" step="0.01" name="max_price"
                   value="{{ request.args.get('max_price','') }}">

            <!-- FARMER FILTER -->
            <label>Farmer</label>
            <select name="farmer">
                <option value="">All Farmers</option>
                {% for farmer in farmers %}
                    <option value="{{ farmer.id }}"
                        {% if request.args.get('farmer') == farmer.id|string %}selected{% endif %}>
                        {{ farmer.name }}
                    </option>
                {% endfor %}
            </select>

            <!-- SORT -->
            <label>Sort By</label>
            <select name="sort">
                <option value="">Default</option>
                <option value="price_asc" {% if request.args.get('sort')=='price_asc' %}selected{% endif %}>Price: Low → High</option>
                <option value="price_desc" {% if request.args.get('sort')=='price_desc' %}selected{% endif %}>Price: High → Low</option>
                <option value="newest" {% if request.args.get('sort')=='newest' %}selected{% endif %}>Newest</option>
            </select>

            <button type="submit" class="filter-btn">Apply Filters</button>

        </form>

    </aside>

    <!-- ========== RIGHT PRODUCT GRID ========== -->
    <div class="market-grid-wrapper">

        <h2 class="mb-2">Marketplace</h2>
        <p class="text-muted">Browse fresh produce directly from registered farmers.</p>

        <div class="market-grid">

            {% for product in products %}
            <div class="market-card">

                {% 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">
                {% endif %}

                <div class="market-body">
                    <h3>{{ product.name }}</h3>

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

                    <p><strong>Quantity:</strong> {{ product.quantity }} {{ product.unit }}</p>

                    <p><strong>Farmer:</strong> {{ product.farmer.name }}</p>

                    <a href="{{ url_for('view_product', product_id=product.id) }}" class="market-btn">
                        View Product
                    </a>
                </div>

            </div>
            {% endfor %}

            {% if products|length == 0 %}
                <p class="no-results">No products match your search/filter.</p>
            {% endif %}

        </div>

    </div>

</div>

{% endblock %}