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

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

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

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

{% block body %}

	<article class="ressource_article">

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

		{# Contenus connexes #}
		<aside class="ressource_aside" aria-label="Contenus associés à la ressource">
			
			{# ========================== #
			   SECTION : Autres ressources
			   ========================== #}
			{% if otherRessources is defined and otherRessources|length > 0 %}
				<section id="autres-ressources" class="page_section scrollable cards_section ressource_other_ressources">
					<header class="section_header">
						<h2>Autres ressources</h2>
					</header>
			
					<div class="content">
						<div class="cards_container">
						{% for r in otherRessources %}
							{# lien uniquement si slug OK (et on sait déjà qu'il y a description) #}
							{% set slug = r.slug ?? '' %}
							{% set hasValidSlug = slug and ('/' not in slug) %}
							{% set link = hasValidSlug ? path('app_ressource_show', { slug: slug }) : null %}
			
							<article class="card_ressource {{ r.pole ? r.pole.slug : '' }} {{ link ? 'card_shadow' : 'card_outline' }}">
								{% if link %}
									<a class="card_content" href="{{ link }}" title="{{ r.titre }}">
								{% else %}
									<span class="card_content">
								{% endif %}
			
									<header>
										{% if r.image %}
											<picture class="avatar">
												<img
													src="{{ asset('images/ressources/' ~ r.image) | imagine_filter('m_600') }}"
													alt="Sensipode - {{ r.titre }}"
													loading="lazy"
													decoding="async"
												/>
											</picture>
										{% endif %}
			
										<h3 class="card_heading">{{ r.titre }}</h3>
									</header>
			
									<div class="content">
										{% if r.shortDescription %}
											<p class="excerpt">{{ r.shortDescription|raw }}</p>
										{% endif %}
			
										{% if r.pole %}
											<span class="tags">
												<div class="tag">{{ r.pole.titre }}</div>
											</span>
										{% 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_ressource_index') }}" class="isButton primaryButton">
							{{ material_icon('undo') }}
							Toutes les ressources
						</a>
					</footer>
					
				</section>
			{% endif %}

			{# ========================== #
			   SECTION : Pôle associé
			   ========================== #}
			{% if ressource.pole %}
				<section id="pole" class="page_section cards_section section_pole_associe {{ ressource.pole.slug }}">
					<header>
						{% if ressource.pole.icon %}
							<img
								src="{{ asset('images/poles/icones/' ~ ressource.pole.icon) }}"
								alt="Icône {{ ressource.pole.titre }}"
								width="80"
								height="80"
								loading="lazy"
								decoding="async"
							/>
						{% endif %}

						<h2>Pôle {{ ressource.pole.titre }}</h2>

						{% if ressource.pole.shortDescription %}
							<p class="description">{{ ressource.pole.shortDescription|raw }}</p>
						{% endif %}
					</header>

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

							{# Enjeux liés au pôle #}
							{% if ressource.pole.enjeux|filter(e => e.published) is not empty %}
								{% for enjeu in ressource.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': ressource.pole.slug}) }}" class="isButton primaryButton">
							{{ material_icon('add') }}
							En savoir plus sur le pôle
						</a>
					</footer>
				</section>
			{% endif %}

		</aside>

	</article>

{% endblock %}