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

{% block title %}Accueil{% endblock %}

{% block meta %}
    <meta name="description" content="Page d'accueil du site Les Pépites d'Ophélie. Découvrez nos catégories et nos nouveautés.">
{% endblock %}

{% block content %}

{% block carousel %}{% endblock %}
    <div class="container-category">
        <h1>Découvrir nos catégories</h1>
    
        <div class="row mt-5 mb-5 justify-content-center">
            <div class="col-6 col-sm-6 col-md-4 col-lg-3 text-center mb-4">
                <a href="{{ path('app_category', {'slug' : "robes" }) }}">
                    <img src="{{ asset('assets/img/robe1.png') }}" alt="Categorie robes" class="img-category">
                </a>
                <br>
                <span>Robes</span>
            </div>
            <div class="col-6 col-sm-6 col-md-4 col-lg-3 text-center mb-4">
                <a href="{{ path('app_category', {'slug' : "chemises-et-tuniques" }) }}">
                    <img src="{{ asset('assets/img/chemise1.png') }}" alt="Categorie chemisier" class="img-category">
                </a>
                <br>
                <span>Chemisiers</span>
            </div>
            <div class="col-6 col-sm-6 col-md-4 col-lg-3 text-center mb-4">
                <a href="{{ path('app_category', {'slug' : "pantalons" }) }}">
                    <img src="{{ asset('assets/img/pantalon1.png') }}" alt="Categorie pantalons" class="img-category">
                </a>
                <br>
                <span>Pantalons</span>
            </div>
            <div class="col-6 col-sm-6 col-md-4 col-lg-3 text-center mb-4">
                <a href="{{ path('app_category', {'slug' : "chaussure-et-basket" }) }}">
                    <img src="{{ asset('assets/img/chaussure1.png') }}" alt="Categorie chaussures" class="img-category">
                </a>
                <br>
                <span>Chaussures</span>
            </div>
        </div>
            {# Pré-vérification pour compter le nombre de nouveaux produits #}

{% for product in products %}
    {% if product.new == 1 %}
       
    {% endif %}
{% endfor %}

    <h1>Découvrir nos nouveautés</h1>
    
    <div class="row mt-5 mb-5">
        {% for product in products %}
            {% if product.new == 1 %}
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="product-item text-center">
                        <a href="{{ path('app_product', {'slug' : product.slug }) }}">
                            <img src="/uploads/{{ product.illustration1 }}" alt="{{ product.name }}" class="img-taille-product-home">
                        </a>
                        <h5>{{ product.name }}</h5>
                        {% set shortDescritpion = product.descritpion|length > 20 ? product.descritpion|slice(0, 20) ~ '...' : product.descritpion %}
                        <span class="product_description">{{ shortDescritpion }}</span>
                        <span class="product-price">{{ (product.price / 100)|number_format(2, ',', '.') }} €</span>
                    </div>
                </div>
            {% endif %}
            {% endfor %}
        </div>
  
    </div>
{% endblock %}