{% extends 'base.html.twig' %}

{% block title %}Sélection du type de stock{% endblock %}

{% block body %}
<div class="container mt-5">
    <h1 class="text-center mb-5">Sélectionner un type de stock</h1>
    
    <div class="row">
        {% for type in types_stock %}
            <div class="col-md-6 col-lg-3 mb-4">
                <div class="card h-100 shadow-sm hover-shadow" style="cursor: pointer; border-color: {{ type.couleur }};">
                    <a href="{{ path('type_stock_selectionner', {'id': type.id}) }}" class="text-decoration-none">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i class="fas {{ type.icone }} fa-4x" style="color: {{ type.couleur }};"></i>
                            </div>
                            <h5 class="card-title" style="color: {{ type.couleur }};">{{ type.libelle }}</h5>
                            <p class="card-text text-muted">{{ type.description }}</p>
                            <div class="mt-3">
                                <span class="badge bg-secondary">{{ type.nombreProduits }} produit(s)</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<style>
    .hover-shadow:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease;
    }
    
    .card {
        transition: all 0.3s ease;
        border-width: 2px;
    }
    
    .card:hover {
        border-width: 3px;
    }
</style>
{% endblock %}