{# Partial: Section Petites Annonces (Home) #}
<section id="classifieds" class="section-padding bg-white" aria-labelledby="classifieds-title">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h2 id="classifieds-title" class="mb-2">Petites annonces</h2>
                <p class="text-muted mb-0">Les dernières annonces approuvées par l’association</p>
            </div>
        </div>

        <div class="row">
            {% for ad in latestAds %}
                <div class="col-lg-4 col-md-6 mb-4">
                    <article class="card h-100 shadow-sm">
                        {# ------- Miniature ------- #}
                        {% set thumb = asset('images/placeholders/classified_no_image.png') %}

                        {% if ad.photos is defined and ad.photos|length > 0 %}
                            {% set first = ad.photos|first %}
                            {% if first %}
                                {# 1) VichUploader: ajusta 'imageFile' si tu campo se llama distinto #}
                                {% set vichUrl = vich_uploader_asset(first, 'imageFile') ?? null %}

                                {% if vichUrl %}
                                    {% set thumb = vichUrl %}
                                {% else %}
                                    {# 2) Fallback a nombre de archivo en la entidad #}
                                    {% set fileName = attribute(first, 'fileName') ?? attribute(first, 'filename') ?? attribute(first, 'name') ?? null %}
                                    {% if fileName %}
                                        {% set thumb = asset('uploads/classifieds/' ~ fileName) %}
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endif %}

                        <img
                            src="{{ thumb | imagine_filter('ad_thumb') }}"
                            class="card-img-top"
                            alt="{{ ad.title }}"
                            loading="lazy"
                        >

                        <div class="card-body d-flex flex-column">
                            <h3 class="h6 card-title mb-2 text-truncate" title="{{ ad.title }}">{{ ad.title }}</h3>
                            {% if ad.description is defined %}
                                <p class="card-text text-muted small mb-3">{{ ad.description|u.truncate(120, '…', false) }}</p>
                            {% endif %}

                            <div class="mt-auto d-flex align-items-center justify-content-between">
                <span class="fw-semibold">
                  {% if ad.price is not null %}
                      {{ ad.price|number_format(0, ',', ' ') }} €
                  {% else %}
                      -
                  {% endif %}
                </span>
                                <a class="btn btn-outline-primary btn-sm" href="{{ path('app_classified_show', { id: ad.id }) }}">
                                    Voir
                                </a>
                            </div>
                        </div>
                    </article>
                </div>
            {% else %}
                <div class="col-12 text-center">
                    <p class="text-muted mb-0">Aucune annonce pour le moment.</p>
                </div>
            {% endfor %}
        </div>

        <div class="text-center mt-3 d-flex gap-2 justify-content-center">
            <a href="{{ path('app_classified_index') }}" class="btn custom-btn px-4">
                Voir toutes les annonces
            </a>
            {% if is_granted('ROLE_USER') %}
                <a class="btn btn-success px-4" href="{{ path('account_ad_new') }}">
                    Déposer une annonce
                </a>
            {% endif %}
        </div>
    </div>
</section>