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

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

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

{% block og_image %}
	{% if offre.image %}
		<meta property="og:image" content="{{ absolute_url(asset('images/offres/' ~ offre.image)) }}">
	{% endif %}
{% endblock %}

{% block body %}

	<article class="offre_article">

		{# Contenu principal #}
		{% if offre.description %}
			<div class="content CKEditor offre_content">
				{{ offre.description|raw }}
			</div>
		{% endif %}

		{# Contenus connexes #}
		<aside class="offre_aside" aria-label="Contenus associés à l’offre">

			{# ========================== #
			   SECTION : Projets en lien
			   ========================== #}
			{% if relatedProjets is defined and relatedProjets|length > 0 %}
				<section id="projets" class="page_section scrollable cards_section offre_related_projets">
					<header class="section_header">
						<h2>Projets en lien</h2>
					</header>

					<div class="content">
						<div class="cards_container">
						{% for projet in relatedProjets %}
							<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>
										{% 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') }}"
													alt="Sensipode - {{ projet.titre }}"
													loading="lazy"
													decoding="async"
												/>
											</picture>
										{% endif %}

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

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

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

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

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


			{# ========================== #
			   SECTION : Autres offres
			   ========================== #}
			{% if otherOffres is defined and otherOffres|length > 0 %}
				<section id="autres-offres" class="page_section cards_section offre_other_offres">

					<header class="section_header">
						<h2>Autres offres</h2>
					</header>

					<div class="content">
						<div class="cards_container">
						{% for offreItem in otherOffres %}
							{% set slug = offreItem.slug ?? '' %}
							{% set link = offreItem.isClickable ? path('app_offre_show', { slug: slug }) : null %}

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

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

									<header>
										{% if offreItem.image %}
											<picture class="avatar">
												<img
													src="{{ asset('images/offres/' ~ offreItem.image) | imagine_filter('m_600') }}"
													alt="Sensipode - {{ offreItem.titre }}"
													loading="lazy"
													decoding="async"
												/>
											</picture>
										{% endif %}

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

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

									<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>

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


			{# ========================== #
			   SECTION : Pôle associé
			   ========================== #}
			{% if offre.pole %}
				{% set pole = offre.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 %}