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

{% block meta_description %}Découvrez les accompagnements de Sensipode pour éclairer vos décisions, mobiliser les acteurs et transformer durablement les usages, les services et les organisations.{% endblock %}
{% block reference_url %}{{ public_url('app_offre_index') }}{% endblock %}

{% block title %}Nos offres de design — Sensipode{% endblock %}

{% block body %}

{# =========================
   SECTION 1 : Offres à la une
   ========================= #}
<section class="page_section offres_section cards_section featured">
    <header class="section_header">
        <h2>À la une</h2>
    </header>

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

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

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

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

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

                        <span class="tags">
                            {% if offre.type %}
                                <div class="tag">{{ offre.type }}</div>
                            {% endif %}
                            {# 
							<div class="tag">{{ offre.pole.titre }}</div>
                            #}
                            {# Enjeux liés à l'offre (normalement 1) #}
						{% if offre.enjeu and offre.enjeu.published %}
						    <div class="tag flexContainer">{{ offre.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>
        {% else %}
            <p>Aucune offre à la une pour le moment.</p>
        {% endfor %}
        </div>
    </div>
</section>


{# =========================
   SECTION 2 : Autres offres
   ========================= #}
<section class="page_section offres_section cards_section others">
    <header class="section_header">
        <h2>Mais aussi</h2>
    </header>

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

            <article class="card_offre {{ link ? 'card_shadow' : 'card_outline' }}">
                {# même card que ci-dessus #}
                {% if link %}
                    <a class="card_content" href="{{ link }}" title="{{ offre.titre }}">
                {% else %}
                    <span class="card_content">
                {% endif %}

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

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

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

                        <span class="tags">
                            {% if offre.type %}
                                <div class="tag">{{ offre.type }}</div>
                            {% endif %}
                            
                            {# 
							<div class="tag">{{ offre.pole.titre }}</div>
                            #}
                            
                            {# Enjeux liés à l'offre (normalement 1) #}
						{% if offre.enjeu and offre.enjeu.published %}
						    <div class="tag flexContainer">{{ offre.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>
        {% else %}
            <p>Aucune autre offre pour le moment.</p>
        {% endfor %}
        </div>
    </div>
</section>


{# =========================
   SECTION 3 : Découvrir nos pôles d'activité
   ========================= #}
<section class="page_section offres_section cards_section poles">
    <header class="section_header">
        <h2>Nos activités</h2>
    </header>

    <div class="content">
        <div class="cards_container">
        {% for pole in poles %}
            {% if pole.online %}
                <article class="card_pole {{ pole.slug }}">
                    <a class="card_content" href="{{ path('app_pole_slug_show', {'slug': pole.slug}) }}">
                        <header>
                            <div class="avatar">
                                {% if pole.icon %}
                                    <img
                                        src="{{ asset('images/poles/icones/' ~ pole.icon) }}"
                                        alt="Icône {{ pole.titre }}"
                                        width="128"
                                        height="128"
                                        loading="lazy"
                                        decoding="async"
                                    />
                                {% endif %}
                            </div>
                            <h3>{{ pole.titre }}</h3>
                        </header>
                        <div class="content">
                            {% if pole.activityDescription %}
                                <p>{{ pole.activityDescription }}</p>
                            {% endif %}
                            <ul class="flexContainer tags">
                                {% for enjeu in pole.enjeux|filter(e => e.published) %}
                                    <li class="tag flexContainer">{{ enjeu.title }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        <footer>
                            <button class="tertiaryButton">
                                {{ material_icon('add', 'flexContainer') }}
                                En savoir plus
                            </button>
                        </footer>
                    </a>
                </article>
            {% endif %}
        {% endfor %}
        </div>
    </div>
</section>

{% endblock %}