{% extends 'base.html' %}
{% block content %}
<div class="container mt-5 mb-5">
    <h1 class="fw-bold mb-4">All Categories</h1>
    
    <div class="row g-4">
        {% for category in categories %}
        <div class="col-md-6 col-lg-4">
            <a href="{% url 'shop:category_detail' category.slug %}" 
              class="text-decoration-none">
                <div class="card h-100 shadow-sm hover-card">
                    <div class="card-body text-center p-5">
                        <div class="mb-4">
                            <i class="fas fa-tags fa-4x text-primary opacity-75"></i>
                        </div>
                        <h4 class="fw-bold text-dark">{{ category.name }}</h4>
                        <p class="text-muted small mt-2">
                            Browse all {{ category.products.count }} products in this category
                        </p>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</div>

<style>
.hover-card {
    transition: all 0.3s ease;
}
.hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important;
}
</style>
{% endblock %}