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

{% block title %}{{ projet.titre|metadata_text }} | Sensipode{% endblock %}

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

{% block og_type %}article{% endblock %}

{% block og_image %}
	{% set firstImage = projet.images|first %}
	{% if firstImage and firstImage.imageName %}
		<meta property="og:image" content="{{ absolute_url(asset('images/projets/' ~ firstImage.imageName)) }}">
	{% endif %}
{% endblock %}

{% block twitter_metadata %}
	{% set firstImage = projet.images|first %}
	<meta name="twitter:card" content="{{ firstImage and firstImage.imageName ? 'summary_large_image' : 'summary' }}">
	<meta name="twitter:title" content="{{ block('title')|trim|raw }}">
	{% if description|trim is not empty %}
		<meta name="twitter:description" content="{{ description|trim|raw }}">
	{% endif %}
	{% if firstImage and firstImage.imageName %}
		<meta name="twitter:image" content="{{ absolute_url(asset('images/projets/' ~ firstImage.imageName)) }}">
	{% endif %}
{% endblock %}

{% block body %}

	<article class="project_article">

		{# Contenu principal #}
		<div class="content CKEditor project_content">
			{% if projet.online is same as true %}
				{{ projet.description|raw }}
			{% endif %}
		</div>

		{# Contenus connexes #}
		<aside class="project_aside" aria-label="Contenus associés au projet">

			{# ========================== #
			   SECTION : Offre liée
			   ========================== #}
			{% if linkedOffre is defined and linkedOffre %}
				<section id="offre" class="page_section cards_section projet_linked_offre">
					<header class="section_header">
						<h2>Offre liée</h2>
					</header>

					<div class="content">
						<div class="cards_container">

						{# slug safe #}
						{% set slug = linkedOffre.slug ?? '' %}
						{% set link = linkedOffre.isClickable ? path('app_offre_show', { slug: slug }) : null %}

						{% set firstPole = linkedOffre.pole ?? null %}

						<article class="card_offre {{ firstPole ? firstPole.slug : '' }} {{ link ? 'card_shadow' : 'card_outline' }}">
							{% if link %}
								<a class="card_content" href="{{ link }}" title="{{ linkedOffre.titre }}">
							{% else %}
								<span class="card_content">
							{% endif %}

								<header>
									{% if linkedOffre.image %}
										<picture class="avatar">
											<source
												type="image/webp"
												srcset="
													{{ asset('images/offres/' ~ linkedOffre.image) | imagine_filter('s_400_webp') }} 400w,
													{{ asset('images/offres/' ~ linkedOffre.image) | imagine_filter('m_600_webp') }} 600w,
													{{ asset('images/offres/' ~ linkedOffre.image) | imagine_filter('l_1024_webp') }} 1024w
												"
												sizes="(max-width: 600px) 100vw, 512px" />
											<img
												src="{{ asset('images/offres/' ~ linkedOffre.image) | imagine_filter('m_600') }}"
												alt="Sensipode - {{ linkedOffre.titre }}"
												loading="lazy"
												decoding="async"
											/>
										</picture>
									{% endif %}

									<h3 class="card_heading">{{ linkedOffre.titre }}</h3>
								</header>

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

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

										{# Enjeux liés à l'offre (souvent 1) #}
									{% if linkedOffre.enjeu and linkedOffre.enjeu.published %}
										<div class="tag flexContainer">{{ linkedOffre.enjeu.title }}</div>
									{% endif %}
									</span>
								</div>

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

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

						</div>
					</div>

					<footer>
						<a href="{{ path('app_offre_index') }}" class="isButton primaryButton">
							{{ material_icon('add') }}
							Toutes les offres
						</a>
					</footer>
				</section>
			{% endif %}


			{# ========================== #
			   SECTION : Autres projets
			   ========================== #}
			{% if otherProjets is defined and otherProjets|length > 0 %}
				<section id="autres-projets" class="page_section scrollable cards_section projet_other_projets">
					<header class="section_header">
						<h2>Autres projets</h2>
					</header>

					<div class="content">

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

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

										<span class="client flexContainer">
											{% if p.clients|length > 0 %}
												{{ p.clients|first }}
											{% endif %}
											{% if p.annee %}/ {{ p.annee }}{% endif %}
										</span>

										<h3 class="card_heading">{{ p.titre }}</h3>
									</header>

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

											{% for o in p.offres|filter(o => o.published) %}
												<div class="tag offre">{{ o.titre }}</div>
											{% endfor %}
										</span>
									</div>

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

					<footer>
						<a href="{{ path('app_projet_index') }}" class="isButton primaryButton">
							{{ material_icon('undo') }}
							Tous les projets
						</a>
					</footer>
				</section>
			{% endif %}


			{# ========================== #
			   SECTION : Pôle associé
			   ========================== #}
			{% if projet.pole %}
				{% set pole = projet.pole %}

				<section id="pole" class="page_section cards_section section_pole_associe {{ pole.slug }}">
					<header>
						{% if pole.icon %}
							<img
								src="{{ asset('images/poles/icones/' ~ pole.icon) }}"
								alt="Icône {{ pole.titre }}"
								width="80"
								height="80"
								loading="lazy"
								decoding="async"
							/>
						{% endif %}
						<h2>Pôle {{ pole.titre }}</h2>
						{% if pole.shortDescription %}
							<p class="description">{{ pole.shortDescription|raw }}</p>
						{% endif %}
					</header>

					<div class="content">
						<div class="cards_container">
							{% if pole.enjeux|filter(e => e.published) is not empty %}
								{% for enjeu in pole.enjeux|filter(e => e.published) %}
									<article class="card_enjeu compact">
										<span class="card_content">
											<header>
												{% if enjeu.icon %}
													<div class="avatar mid round filled">
														{{ material_icon(enjeu.icon, 'flexContainer') }}
													</div>
												{% endif %}
												<h3>{{ enjeu.title }}</h3>
											</header>
										</span>
									</article>
								{% endfor %}
							{% endif %}
						</div>
					</div>

					<footer>
						<a href="{{ path('app_pole_slug_show', {'slug': pole.slug}) }}" class="isButton primaryButton">
							{{ material_icon('add') }}
							En savoir plus sur le pôle
						</a>
					</footer>
				</section>
			{% endif %}

		</aside>
	</article>

{% endblock %}