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

{% block title %}Catalog - GiftShop Polska{% endblock %}

{% block content %}
<section class="py-5" style="background-color: #fff;">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item active">Catalog</li>
            </ol>
        </nav>
        
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-3 mb-4">
                <div class="card border-0 shadow-sm p-4 sticky-top" style="top: 100px;">
                    <h5 class="mb-4">Categories</h5>
                    <div class="list-group list-group-flush">
                        <a href="{% url 'catalog' %}" class="list-group-item list-group-item-action border-0 {% if not selected_category %}fw-bold text-primary{% endif %}">
                            All Products
                        </a>
                        {% for category in categories %}
                        <a href="{% url 'catalog' %}?category={{ category.slug }}" class="list-group-item list-group-item-action border-0 {% if selected_category.slug == category.slug %}fw-bold text-primary{% endif %}">
                            {{ category.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- Product Grid -->
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="h3 mb-0">{% if selected_category %}{{ selected_category.name }}{% else %}All Products{% endif %}</h2>
                    <p class="text-muted mb-0 small">{{ products.count }} items found</p>
                </div>

                <div class="row g-4">
                    {% for product in products %}
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 product-card">
                            <div class="position-relative overflow-hidden">
                                <img src="{{ product.image_url|default:'https://via.placeholder.com/400x300?text=Gift+Product' }}" class="card-img-top" alt="{{ product.name }}" style="height: 250px; object-fit: cover; transition: transform 0.5s ease;">
                                <div class="product-overlay">
                                    <a href="{% url 'product_detail' product.slug %}" class="btn btn-light btn-sm rounded-pill px-3">Quick View</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-1">{{ product.category.name }}</p>
                                <h5 class="card-title h6 mb-2">{{ product.name }}</h5>
                                <p class="text-primary fw-bold mb-0">{{ product.price }} PLN</p>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12 text-center py-5">
                        <div class="mb-3 fs-1 text-muted">🥀</div>
                        <h4>No products found</h4>
                        <p class="text-muted">Try selecting a different category or check back later.</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .product-card:hover .card-img-top {
        transform: scale(1.05);
    }
    .product-card .position-relative {
        overflow: hidden;
    }
    .product-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .product-card:hover .product-overlay {
        opacity: 1;
    }
</style>
{% endblock %}
