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

{% block meta_description %}Découvrez les projets menés par Sensipode : recherche terrain, cadrage, expérimentation et conception au service des usages et des transformations.{% endblock %}
{# Les filtres restent utilisables ; seule la liste sans paramètres est la référence SEO. #}
{% block reference_url %}{{ public_url('app_projet_index') }}{% endblock %}

{% block title %}Nos projets de design — Sensipode{% endblock %}

{% block body %}

	<div class="cards_container">

		{% if projets is not empty %}
			
			{# Tri : d’abord par année (desc), puis par titre (asc) #}
			{% set projets_sorted = projets
				| sort((a, b) => b.annee <=> a.annee ?: a.titre <=> b.titre)
			%}

			{% for projet in projets_sorted %}
				{% if projet.online %}
					<article class="card_project {{ projet.pole ? projet.pole.slug : 'no-pole' }}">
						<a class="card_content"
						   href="{{ projet.slug ? path('app_projet_show', { 'slug': projet.slug }) : '#' }}"
						   title="{{ projet.slug ? '' : 'Slug manquant' }}">

							<header>
								{# Première image #}
								{% if projet.images|length > 0 %}
									<picture class="avatar">
										<source
											type="image/webp"
											srcset="
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('s_400_webp') }} 400w,
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('m_600_webp') }} 600w,
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('m_768_webp') }} 768w,
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('l_800_webp') }} 800w
											"
											sizes="(max-width: 600px) 100vw, (max-width: 800px) 50vw, 33vw"
										/>
									
										<img
											src="{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('m_600') }}"
											srcset="
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('s_400') }} 400w,
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('m_600') }} 600w,
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('m_768') }} 768w,
												{{ asset('images/projets/' ~ (projet.images|first).imageName) | imagine_filter('l_800') }} 800w
											"
											sizes="(max-width: 600px) 100vw, (max-width: 800px) 50vw, 33vw"
											alt="Sensipode - {{ projet.titre }}"
											loading="lazy"
											decoding="async"
											{% if loop.first %}
												fetchpriority="high"
												loading="eager"
											{% else %}
												loading="lazy"
											{% endif %}
										/>
									</picture>
								{% endif %}

								{# Client principal + Date #}
								<span class="client flexContainer">
									{% if projet.clients|length > 0 %}
										{{ projet.clients|first }}
									{% endif %}
									/ {{ projet.annee }}
								</span>

								<h2 class="card_heading">{{ projet.titre }}</h2>
							</header>

							<div class="content">
								<span class="tags">

									{# Pôle #}
									{% if projet.pole %}
										<div class="tag">{{ projet.pole.titre }}</div>
									{% endif %}
								
									{# Offres liées #}
									{% for offre in projet.offres|filter(o => o.published) %}
										<div class="tag offre">{{ offre.titre }}</div>
									{% endfor %}
								
									{# Tags classiques #}
									{% for tag in projet.tags %}
										{% if tag.parent and tag.parent.nom != 'Secteur' %}
											<div class="tag {{ tag.parent.nom }}">{{ tag.nom }}</div>
										{% endif %}
									{% endfor %}
								
								</span>
							</div>

							<footer>
								<button class="tertiaryButton">
									{{ material_icon('add', 'flexContainer') }}En savoir plus
								</button>
							</footer>
						</a>
					</article>
				{% endif %}
			{% endfor %}

		{% else %}
			<div class="no-results">
				Aucun résultat pour votre recherche.
				<a href="{{ path('app_projet_index') }}"
				   class="isButton secondaryButton withIcon">
					{{ material_icon('restart_alt') }}Réinitialiser les filtres
				</a>
			</div>
		{% endif %}

	</div>

{% endblock %}