{# Carte produit pour la vue grille - responsive mobile #}
{% set stockStatus = product.getStockStatus() %}
{% set stockColors = { 'ok': 'green', 'low': 'orange', 'critical': 'red', 'out': 'gray', 'service': 'purple' } %}

<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-shadow overflow-hidden">
    {# Image #}
    <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="block">
        <div class="h-28 sm:h-40 bg-gray-100 dark:bg-gray-700 flex items-center justify-center relative">
            {% if product.primaryImage and product.primaryImage.media and product.primaryImage.media.filePath %}
                <img src="{{ path('app_media_serve', {path: product.primaryImage.media.filePath}) }}" alt="{{ product.name }}" class="h-full w-full object-cover">
            {% else %}
                <i class="fas {{ product.isService ? 'fa-concierge-bell' : 'fa-box' }} text-3xl sm:text-4xl text-gray-300 dark:text-gray-600"></i>
            {% endif %}

            {# Badge stock en overlay #}
            <span class="absolute top-1.5 right-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] sm:text-xs font-medium bg-{{ stockColors[stockStatus] }}-100 text-{{ stockColors[stockStatus] }}-800">
                {% if product.isService %}Service{% else %}{{ product.currentStock }}{% endif %}
            </span>

            {% if product.isFeatured %}
                <span class="absolute top-1.5 left-1.5"><i class="fas fa-star text-yellow-400 text-sm"></i></span>
            {% endif %}
        </div>
    </a>

    <div class="p-3 sm:p-4">
        <div class="min-w-0">
            <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-emerald-600 truncate block">
                {{ product.name }}
            </a>
            <p class="text-[10px] sm:text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-mono">{{ product.sku }}</p>
        </div>

        {% if product.category %}
            <span class="inline-block mt-1.5 px-1.5 py-0.5 text-[10px] sm:text-xs rounded bg-{{ product.category.color }}-100 text-{{ product.category.color }}-800 truncate max-w-full">
                {{ product.category.name }}
            </span>
        {% endif %}

        <div class="mt-2 sm:mt-3">
            <span class="text-base sm:text-lg font-bold text-gray-900 dark:text-white">{{ product.price|number_format(0, ',', ' ') }}</span>
            <span class="text-[10px] sm:text-xs text-gray-500 ml-0.5">FCFA</span>
        </div>

        <div class="mt-2 sm:mt-3 flex items-center gap-1.5 sm:gap-2">
            <a href="{{ path('manager_pos_products_edit', {id: product.id}) }}" class="flex-1 text-center px-2 py-1.5 text-xs font-medium text-emerald-700 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/30 rounded hover:bg-emerald-100 dark:hover:bg-emerald-900/50 transition-colors">
                <i class="fas fa-edit mr-1"></i><span class="hidden sm:inline">Modifier</span>
            </a>
            <a href="{{ path('manager_pos_products_show', {id: product.id}) }}" class="flex-1 text-center px-2 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 rounded hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
                <i class="fas fa-eye mr-1"></i><span class="hidden sm:inline">Voir</span>
            </a>
        </div>
    </div>
</div>