{% extends 'base.html' %}

{% block title %}Products - Taiya Detergents{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="text-center text-taiya-green">Our Products</h1>
        <p class="text-center lead">Available in 1kg, 800gms, 600gms, and 200gms sizes</p>
    </div>
</div>

<div class="row">
    <div class="col-md-3 mb-4">
        <div class="card">
            <div class="card-header bg-taiya-green text-white">
                <h5 class="mb-0">Categories</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="{% url 'product_list' %}" 
                       class="list-group-item list-group-item-action {% if not selected_category %}active{% endif %}">
                        All Products
                    </a>
                    {% for category in categories %}
                    <a href="{% url 'product_list' %}?category={{ category.slug }}" 
                       class="list-group-item list-group-item-action {% if selected_category == category.slug %}active{% endif %}">
                        {{ category.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Size Filter -->
        <div class="card mt-4">
            <div class="card-header bg-taiya-green text-white">
                <h5 class="mb-0">Filter by Size</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="{% url 'product_list' %}" 
                       class="list-group-item list-group-item-action {% if not selected_size %}active{% endif %}">
                        All Sizes
                    </a>
                    <a href="{% url 'product_list' %}?size=1kg" 
                       class="list-group-item list-group-item-action {% if selected_size == '1kg' %}active{% endif %}">
                        1kg - Family Size
                    </a>
                    <a href="{% url 'product_list' %}?size=800gms" 
                       class="list-group-item list-group-item-action {% if selected_size == '800gms' %}active{% endif %}">
                        800gms - Standard
                    </a>
                    <a href="{% url 'product_list' %}?size=600gms" 
                       class="list-group-item list-group-item-action {% if selected_size == '600gms' %}active{% endif %}">
                        600gms - Economy
                    </a>
                    <a href="{% url 'product_list' %}?size=200gms" 
                       class="list-group-item list-group-item-action {% if selected_size == '200gms' %}active{% endif %}">
                        200gms - Travel
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        {% if products %}
        <div class="row">
            {% for product in products %}
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card product-card h-100">
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <h6 class="card-subtitle mb-2 text-muted">
                            {{ product.get_form_display }} • {{ product.volume }}
                        </h6>
                        <p class="card-text">{{ product.description|truncatewords:20 }}</p>
                        
                        <div class="mb-2">
                            <span class="badge bg-{% if product.in_stock %}success{% else %}danger{% endif %}">
                                {% if product.in_stock %}In Stock{% else %}Out of Stock{% endif %}
                            </span>
                            <span class="badge bg-secondary ms-1">{{ product.category.name }}</span>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="{% url 'product_detail' product.id %}" class="btn btn-primary btn-sm">
                            <i class="fas fa-eye me-1"></i>View Details
                        </a>
                        <a href="{% url 'contact_us' %}" class="btn btn-success btn-sm ms-2" {% if not product.in_stock %}disabled{% endif %}>
                            <i class="fas fa-shopping-bag me-1"></i>Buy Now
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-5">
            <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">No products found</h4>
            <p class="text-muted">Check back later for our amazing products!</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}