{# templates/pole/show.html.twig #}

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

{% block title %}{{ (pole.seoTitle ?: pole.titre)|metadata_text }} — Sensipode{% endblock %}

{% block meta_description %}{{ pole.shortDescription|metadata_text }}{% endblock %}
{% block reference_url %}{{ public_url('app_pole_slug_show', {slug: pole.slug}) }}{% endblock %}

{% block body %}



	{# ---------------------
	
	SECTION MANIFESTE
	
	--------------------- #}
	
	
	<section id="manifest" class="page_section">
	
		{% if pole.manifestTitle %}
			<header>
				<h2>{{ pole.manifestTitle }}</h2>
			</header>
		{% endif %}
			
		<div class="content">
		
			{% if pole.description %}
			<div class="CKEditor">{{ pole.description|raw }}</div>
			{% endif %}
			
			<picture class="avatar">
				{# Source WebP prioritaire #}
				<source
					type="image/webp"
					srcset="
						{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('s_400_webp') }} 400w,
						{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('m_600_webp') }} 600w,
						{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('l_1024_webp') }} 1024w
					"
					sizes="(max-width: 600px) 100vw, 512px" />
			
				{# Fallback JPEG/PNG #}
				<img
					src="{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('m_600') }}"
					srcset="
						{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('s_400') }} 400w,
						{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('m_600') }} 600w,
						{{ asset('images/poles/manifest/' ~ pole.manifestImage) | imagine_filter('l_1024') }} 1024w
					"
					sizes="(max-width: 600px) 100vw, 512px"
					alt="Sensipode - Affiche Extralucide du pôle {{ pole.titre }}"
					loading="lazy"
					decoding="async"
				/>
			</picture>
			
		</div>
					
	</section>
	
	
	
	
	
	
	{# ---------------------
	
	SECTION OFFRE
	
	--------------------- #}
	
	
	{% if pole.enjeux|filter(e => e.published) is not empty %}
	<section id="offres" class="page_section cards_section">
	
		<header>
			<h2>Offre</h2>
			<p>{{ pole.offresDescription|raw }}</p>
		</header>
	
		<div class="content">
	
			{# =========================
			   ENJEUX PUBLIÉS
			   ========================= #}
			<div class="cards_container cards_enjeux">
				{% for enjeu in pole.enjeux|filter(e => e.published) %}
					<article class="card_enjeu">
						<span class="card_content">
							<header>
								<div class="avatar mid round filled">
									{{ material_icon(enjeu.icon, 'flexContainer') }}
								</div>
								<h3>{{ enjeu.title }}</h3>
							</header>
	
							<div class="content">
								<p class="description">{{ enjeu.shortDescription }}</p>
								<ul class="tags">
									{% for offre in enjeu.offres|filter(o => o.published) %}
										<li class="tag">{{ offre.titre }}</li>
									{% endfor %}
								</ul>
							</div>
						</span>
					</article>
				{% endfor %}
			</div>
	
	
			{# =========================
			   SOUS-SECTION : À la une (max 3)
			   Offres complètes dont l'enjeu est publié
			   ========================= #}
	
			{% set featuredOffresPole = pole.offres|filter(o => o.featured and o.isClickable and o.enjeu and o.enjeu.published) %}
			{% set selectedFeatured = featuredOffresPole|slice(0, 3) %}
	
			{% if selectedFeatured is not empty %}
				<section class="page_subsection scrollable offres_featured cards_section">
					<header class="section_header">
						<h3>Offre à la une</h3>
					</header>
	
					<div class="content">
						<div class="cards_container">
						{% for item in selectedFeatured %}
							{% set slug = item.slug ?? '' %}
							{% set link = item.isClickable ? path('app_offre_show', { slug: slug }) : null %}
	
				<article class="card_offre {{ item.pole.slug }} {{ link ? 'card_shadow' : 'card_outline' }}">
								{% if link %}
									<a class="card_content" href="{{ link }}" title="{{ item.titre }}">
								{% else %}
									<span class="card_content">
								{% endif %}
	
									<header>
										{% if item.image %}
											<picture class="avatar">
												<source
													type="image/webp"
													srcset="
														{{ asset('images/offres/' ~ item.image) | imagine_filter('s_400_webp') }} 400w,
														{{ asset('images/offres/' ~ item.image) | imagine_filter('m_600_webp') }} 600w,
														{{ asset('images/offres/' ~ item.image) | imagine_filter('l_1024_webp') }} 1024w
													"
													sizes="(max-width: 600px) 100vw, 512px" />
												<img
													src="{{ asset('images/offres/' ~ item.image) | imagine_filter('m_600') }}"
													srcset="
														{{ asset('images/offres/' ~ item.image) | imagine_filter('s_400') }} 400w,
														{{ asset('images/offres/' ~ item.image) | imagine_filter('m_600') }} 600w,
														{{ asset('images/offres/' ~ item.image) | imagine_filter('l_1024') }} 1024w
													"
													sizes="(max-width: 600px) 100vw, 512px"
													alt="Sensipode - {{ item.titre }}"
													loading="lazy"
													decoding="async"
												/>
											</picture>
										{% endif %}
	
										<h4>{{ item.titre }}</h4>
									</header>
	
									{% if item.shortDescription %}
										<div class="content">
											<p class="description">{{ item.shortDescription|raw }}</p>
										</div>
									{% endif %}
	
									<footer>
										{% if link %}
											<button class="tertiaryButton">
												{{ material_icon('add', 'flexContainer') }}
												En savoir plus
											</button>
										{% endif %}
									</footer>
	
								{% if link %}</a>{% else %}</span>{% endif %}
							</article>
						{% endfor %}
						</div>
					</div>
				</section>
			{% endif %}
	
		</div>
	
		<footer>
			<a href="{{ path('app_offre_index') }}" class="isButton primaryButton">
				{{ material_icon('undo') }}
				Toutes les offres
			</a>
		</footer>
	
	</section>
	{% endif %}


	
	
	
	
	
	
	
	
	



	
	
	
	{# ---------------------
	
	SECTION PROJETS
	
	--------------------- #}
	
	
	
	{% set projets_associes = projets
		|filter(p => p.pole and p.pole.id == pole.id)
		|shuffle
		|slice(0, 3)
	%}
	
	{% if projets_associes is not empty %}
		<section id="projets" class="page_section scrollable cards_section">
			<header>
				<h2>Réalisations</h2>
				<p>{{ pole.projetsDescription|raw }}</p>
			</header>
	
			<div class="content">
				<div class="cards_container">
					{% for projet in projets_associes %}
						<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>
									{# Avatar (première image du projet) #}
									{% if projet.images|length > 0 %}
										<picture class="avatar">
											{# Source WebP prioritaire #}
											<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('l_1024_webp') }} 1024w
												"
												sizes="(max-width: 600px) 100vw, 512px" />
										
											{# Fallback JPEG/PNG #}
											<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('l_1024') }} 1024w
												"
												sizes="(max-width: 600px) 100vw, 512px"
												alt="Sensipode - {{ projet.titre }}"
												loading="lazy"
												decoding="async"
											/>
										</picture>
									{% endif %}
									
	
									{# Client principal + Date #}
									<span class="client flexContainer">
										{% if projet.clients|length > 0 %}
											{{ projet.clients|first }}
										{% endif %}
										/ {{ projet.annee }}
									</span>
	
									<h3>{{ projet.titre }}</h3>
								</header>
	
								<div class="content">
									<span class="tags">
									
									    {# 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') }}
										Plus
									</button>
								</footer>
							</a>
						</article>
					{% endfor %}
				</div>
			</div>
			
			<footer>
				<a class="isButton primaryButton withIcon" 
					href="{{ path('app_projet_index', { pole: pole.id }) }}">
					{{ material_icon('arrow_forward') }}
					 Autres projets du pôle
				</a>
			</footer>
			
		</section>
	{% endif %}

	
	
	
	{# ---------------------
	
	SECTION RESSOURCES
	
	--------------------- #}
	
	{% set ressourcesFavorites = featuredItems|filter(i => i.entityType == 'ressource') %}
	{% if ressourcesFavorites is not empty %}
	
		<section id="featured" class="page_section scrollable cards_section">
		    <header>
		        <h2>Ressources</h2>
		        <p>Nous interrogeons nos métiers, ceci pourrait vous intéresser</p>
		    </header>
	
		    <div class="content">
		        <div class="cards_container">
	
		            {# --- Ressources uniquement --- #}
		            {% set ressourcesFavorites = featuredItems|filter(i => i.entityType == 'ressource') %}
	
		            {% for item in ressourcesFavorites %}
		                {% set isExternal = item.isExternal() %}
		                {% set isInternal = item.isInternal() %}
		                {% set link = isExternal
		                    ? item.url
		                    : (isInternal and item.slug ? path('app_ressource_show', { slug: item.slug }) : null)
		                %}
	
		                <article class="card_ressource {{ item.pole ? item.pole.slug : '' }} {{ link ? 'card_shadow' : 'card_outline' }}">
		                    {% if link %}
		                        <a class="card_content"
		                           href="{{ link }}"
		                           {% if isExternal %}target="_blank" rel="noopener"{% endif %}
		                           title="{{ item.titre }}">
		                    {% else %}
		                        <span class="card_content">
		                    {% endif %}
	
		                        <header>
		                            {% if item.image %}
		                                <picture class="avatar">
		                                    <source
		                                        type="image/webp"
		                                        srcset="
		                                            {{ asset('images/ressources/' ~ item.image) | imagine_filter('s_400_webp') }} 400w,
		                                            {{ asset('images/ressources/' ~ item.image) | imagine_filter('m_600_webp') }} 600w,
		                                            {{ asset('images/ressources/' ~ item.image) | imagine_filter('l_800_webp') }} 800w
		                                        "
		                                        sizes="(max-width: 600px) 100vw, (max-width: 800px) 50vw, 33vw"
		                                    />
		                                    <img
		                                        src="{{ asset('images/ressources/' ~ item.image) | imagine_filter('m_600') }}"
		                                        srcset="
		                                            {{ asset('images/ressources/' ~ item.image) | imagine_filter('s_400') }} 400w,
		                                            {{ asset('images/ressources/' ~ item.image) | imagine_filter('m_600') }} 600w,
		                                            {{ asset('images/ressources/' ~ item.image) | imagine_filter('l_800') }} 800w
		                                        "
		                                        sizes="(max-width: 600px) 100vw, (max-width: 800px) 50vw, 33vw"
		                                        alt="Sensipode - {{ item.titre }}"
		                                        loading="lazy"
		                                        decoding="async"
		                                    />
		                                </picture>
		                            {% endif %}
	
		                            <p class="solution_type">Ressource</p>
		                            <h3 class="card_heading">{{ item.titre }}</h3>
		                        </header>
	
		                        <div class="content">
		                            {% if item.shortDescription %}
		                                <p class="excerpt">{{ item.shortDescription|raw }}</p>
		                            {% 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>
		            {% else %}
		                {# optionnel #}
		                {# <p>Aucune ressource à la une pour le moment.</p> #}
		            {% endfor %}
	
		        </div>
		    </div>
	
		    <footer>
		        <a class="isButton primaryButton withIcon" href="{{ path('app_ressource_index') }}">
		            {{ material_icon('arrow_forward') }}
		            Voir toutes nos ressources
		        </a>
		    </footer>
		</section>
	
	{% endif %}
	
	
	
	
	
	
	
	
	
	
	{# ---------------------
	
	SECTION EQUIPE
	
	--------------------- #}
	
	
	
	{% if pole.collaborateurs is not empty %}
	<section id="collaborateurs" class="page_section cards_section">
		
		<header>
			<h2>L'équipe</h2>
			<p>{{ pole.equipeDescription|raw }}</p>
		</header>

		<div class="content">
			
			<div class="cards_container">
				
				{% for collab in pole.collaborateurs %}
					<article class="card_collab">
						<span class="card_content">
							<header>
								<picture class="avatar">
									<source
										type="image/webp"
										srcset="
											{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_64_webp') }} 64w,
											{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_128_webp') }} 128w,
											{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_256_webp') }} 256w
										"
										sizes="(max-width: 256px) 50vw, 256px" />
								
									<img
										src="{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_128') }}"
										srcset="
											{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_64') }} 64w,
											{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_128') }} 128w,
											{{ asset('images/collaborateurs/' ~ collab.photo) | imagine_filter('xs_256') }} 256w
										"
										sizes="(max-width: 256px) 50vw, 256px"
										alt="Sensipode - {{ collab.prenom }} {{ collab.nom }}"
										loading="lazy"
										decoding="async"
									/>
								</picture>
								<h3>{{ collab.prenom }} {{ collab.nom }}</h3>
							</header>
							<div class="content">
								<p class="fontion">{{ collab.fonction }}</p>
							</div>
							{% if collab.linkedinUrl %}
								(<footer><a class="button" href="{{ collab.linkedinUrl }}" target="_blank">LinkedIn</a></footer>)
							{% endif %}
						</span>
					</article>
				{% endfor %}
								
			</div>
			
			<section class="page_subsection">
				<div class="content">
			
					<ul class="tags">
					{% for tagPole in pole.tagsPole %}
						<li class="tag flexContainer">{{tagPole}}</li>
					{% endfor %}
					</ul>
			
				</div>
			</section>
			
		</div>
		
		<footer>
			<a href="{{ path('app_contact') }}" class="isButton primaryButton">
				{{ material_icon('campaign') }}Contactez-nous
			</a>
		</footer>
			
	</section>
	{% endif %}
	
	
		
		
	
	{# ---------------------
	
	SECTION PÔLES
	
	--------------------- #}
		
		
	<section id="poles" class="page_section cards_section">
	
		<header>
			<h2>Autres pôles</h2>
			<p>Sensipode c'est 3 autres pôles pour accompagner vos différents besoins</p>
		</header>

		<div class="content">

			<div class="cards_container">
			{% for otherPole in poles %}
				{% if otherPole.online and otherPole.id != pole.id %}

					<article class="card_pole {{ otherPole.slug }}">

						<a class="card_content" href="{{ path('app_pole_slug_show', {'slug': otherPole.slug}) }}">

							<header>
								<div class="avatar">
									<img
										src="{{ asset('images/poles/icones/' ~ otherPole.icon) }}"
										alt="Icône {{ otherPole.titre }}"
										width="128"
										height="128"
										loading="lazy"
										decoding="async"
									/>
								</div>

								<h3>{{ otherPole.titre }}</h3>
							</header>

							<div class="content">
								<p>{{ otherPole.activityDescription }}</p>
							</div>

							<footer>
								<button class="tertiaryButton">
									{{ material_icon('add', 'flexContainer') }}
									Plus
								</button>
							</footer>

						</a>

					</article>

				{% endif %}
			{% endfor %}
			</div>

		</div>
			
	</section>		

{% endblock %}