{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}">
{% endblock %}

{% block content %}
<section class="product-hero">
    <div class="hero-copy">
        <h1>Shop the best products</h1>
        <p>Browse items, compare prices, and find great deals near you.</p>
    </div>

    <form action="{% url 'product_list' %}" method="get" class="product-search-bar">
        <input type="search" name="q" value="{{ search_query }}" placeholder="Search products, brands, categories">
        <select name="sort">
            <option value="" {% if not selected_sort %}selected{% endif %}>Best Matches</option>
            <option value="newest" {% if selected_sort == 'newest' %}selected{% endif %}>Newest</option>
            <option value="rating" {% if selected_sort == 'rating' %}selected{% endif %}>Top Rated</option>
            <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Price Low to High</option>
            <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>Price High to Low</option>
        </select>
        {% if selected_category %}<input type="hidden" name="category" value="{{ selected_category }}">{% endif %}
        {% if selected_featured %}<input type="hidden" name="featured" value="1">{% endif %}
        <button type="submit" class="btn btn-primary">Apply</button>
    </form>
</section>

<section class="shop-feature-strip">
    <div>Items: {{ products_count }}</div>
    <div>Featured: {{ featured_count }}</div>
    <div>In Stock: {{ in_stock_count }}</div>
</section>

<div id="categories" class="category-bar">
    <a href="{% url 'product_list' %}" class="category-chip {% if not selected_category and not selected_featured %}active{% endif %}">All</a>
    <a href="{% url 'product_list' %}?featured=1" class="category-chip {% if selected_featured %}active{% endif %}">Featured</a>
    {% for category in categories %}
    <a href="{% url 'product_list' %}?category={{ category|urlencode }}" class="category-chip {% if selected_category == category %}active{% endif %}">{{ category }}</a>
    {% endfor %}
</div>

{% if products %}
<div class="cards">
{% for product in products %}
    <div class="card">
        {% if product.image %}<img src="{{ product.image.url }}" alt="{{ product.name }}">{% else %}<div class="product-image-placeholder">No image available</div>{% endif %}
        <div class="card-content">
            <div class="tag-row">
                {% if product.featured %}<span class="tag badge-pill">Featured</span>{% endif %}
                <span class="tag category-tag">{{ product.category }}</span>
                {% if product.is_low_stock %}<span class="tag low-stock">Low Stock</span>{% endif %}
            </div>
            <h2>{{ product.name }}</h2>
            <p class="description">{{ product.description|truncatewords:16 }}</p>
            <div class="product-pricing">
                <span class="price">Rs. {{ product.display_price|floatformat:2 }}</span>
                {% if product.discount_price %}
                <span class="original-price">Rs. {{ product.price|floatformat:2 }}</span>
                {% endif %}
            </div>
            <p class="stock">Stock: {{ product.stock|default:0 }}</p>
            <div class="card-actions">
                <a href="{% url 'product_detail' product.id %}" class="btn btn-secondary">View</a>
                <a href="{% url 'add_to_cart' product.id %}?next={{ request.get_full_path|urlencode }}" class="btn btn-secondary">Add to Cart</a>
                <a href="{% url 'buy_now' product.id %}" class="btn btn-primary">Buy Now</a>
                {% if user.is_authenticated %}
                <a href="{% url 'toggle_wishlist' product.id %}?next={{ request.get_full_path|urlencode }}" class="btn btn-secondary">{% if product.id in wishlist_ids %}Wishlisted{% else %}Wishlist{% endif %}</a>
                {% endif %}
            </div>
        </div>
    </div>
{% endfor %}
</div>
{% else %}
<div class="empty-state"><h2>No products found.</h2><p>Try adjusting search or filters.</p></div>
{% endif %}
{% endblock %}