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

{% block meta_description %}Explorez les articles, retours d’expérience et outils de Sensipode pour nourrir vos réflexions et faire évoluer vos pratiques par le design.{% endblock %}
{% block reference_url %}{{ public_url('app_ressource_index') }}{% endblock %}

{% block title %}Nos ressources sur le design — Sensipode{% endblock %}

{% block body %}

	<div class="cards_container">

		{# Tri : d’abord les ressources à la une, puis par ordre alphabétique #}
		{% set ressources_sorted = ressources
		    | sort((a, b) => (b.featured <=> a.featured) ?: (a.titre <=> b.titre))
		%}
	
		{% for ressource in ressources_sorted %}
			
			{% set isExternal = ressource.isExternal() %}
			{% set isInternal = ressource.isInternal() %}
			{% set link = null %}
			{% if isExternal %}
				{% set link = ressource.url %}
			{% elseif isInternal and ressource.slug %}
				{% set link = path('app_ressource_show', { slug: ressource.slug }) %}
			{% endif %}

			<article class="card_ressource {{ ressource.pole ? ressource.pole.slug : '' }} {{ link ? 'card_shadow' : 'card_outline' }}">
				{% if link %}
					<a class="card_content" 
					   href="{{ link }}"
					   {% if isExternal %}target="_blank" rel="noopener"{% endif %}
					   title="{{ ressource.titre }}">
					
				{% else %}
					<span class="card_content">
				{% endif %}

					<header>
						{# Image principale #}
						{% if ressource.image %}
							<picture class="avatar">
								<source
									type="image/webp"
									srcset="
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('s_400_webp') }} 400w,
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('m_600_webp') }} 600w,
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('m_768_webp') }} 768w,
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('l_800_webp') }} 800w
									"
									sizes="(max-width: 600px) 100vw, (max-width: 800px) 50vw, 33vw"
								/>

								<img
									src="{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('m_600') }}"
									srcset="
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('s_400') }} 400w,
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('m_600') }} 600w,
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('m_768') }} 768w,
										{{ asset('images/ressources/' ~ ressource.image) | imagine_filter('l_800') }} 800w
									"
									sizes="(max-width: 600px) 100vw, (max-width: 800px) 50vw, 33vw"
									alt="Sensipode - {{ ressource.titre }}"
									loading="lazy"
									decoding="async"
									{% if loop.first %}
										fetchpriority="high"
										loading="eager"
									{% else %}
										loading="lazy"
									{% endif %}
								/>
							</picture>
						{% endif %}

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

					<div class="content">
						{% if ressource.shortDescription %}
							<p class="excerpt">{{ ressource.shortDescription|raw }}</p>
						{% endif %}

						{% if ressource.pole %}
							<span class="tags">
								<div class="tag">{{ ressource.pole }}</div>
							</span>
						{% endif %}
					</div>

					<footer>
						{% if isExternal %}
							<button class="tertiaryButton">
								{{ material_icon('open_in_new', 'flexContainer') }}
								Découvrir
							</button>
						{% elseif isInternal %}
							<button class="tertiaryButton">
								{{ material_icon('add', 'flexContainer') }}
								En savoir plus
							</button>
						{% endif %}
					</footer>

				{% if link %}
					</a>
				{% else %}
					</span>
				{% endif %}
				
			</article>
			
		{% endfor %}
		
	</div>

{% endblock %}