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

{% block title %}{% if editMode|default(false) %}Édition : {% endif %}{{ metaTitle ?? title }}{% endblock %}

{% block meta %}
    <meta name="description" content="{{ metaDescription ?? '' }}">
    <link rel="canonical" href="{{ app.request.uri }}">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('expertise') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('expertise') }}
{% endblock %}

{% block body %}
<div class="expertise-page__bg" data-expertise-bg="true" aria-hidden="true"></div>
<div class="expertise-page{% if editMode|default(false) %} expertise-page--edit-mode{% endif %}">
    <div class="container">
        {# Hero: page title over the fixed mountain-mask bg (same visual/scroll behavior
           as Actualité, see assets/expertise.ts) #}
        {% include 'components/_page_hero.html.twig' with {
            title: title,
            edit_mode: editMode|default(false)
        } %}

        {# Intro: heading + paragraph, still inside the scrolling mountain-bg zone #}
        <section class="expertise-intro">
            {% if (content.introTitle is defined and content.introTitle) or editMode|default(false) %}
                <h2 class="expertise-intro__title"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="introTitle" data-placeholder="Titre d'introduction"{% endif %}>{{ content.introTitle|default('') }}</h2>
            {% endif %}

            {% if (content.introText is defined and content.introText) or editMode|default(false) %}
                <div class="expertise-intro__text"{% if editMode|default(false) %} data-editable="true" data-field="introText" data-placeholder="Texte d'introduction"{% endif %}>{{ content.introText|default('')|raw }}</div>
            {% endif %}
        </section>

        {% include 'components/_expertise-list.html.twig' with {
            content: content,
            editMode: editMode|default(false),
            itemsImagePath: itemsImagePath|default(''),
            itemsImageDarkPath: itemsImageDarkPath|default('')
        } %}
    </div>

    {{ include('components/_patrimoine-section.html.twig', {
        content: content,
        imagePath: patrimoineImagePath|default(''),
        imageDarkPath: patrimoineImageDarkPath|default(''),
        edit_mode: editMode|default(false),
    }) }}

</div>
{% endblock %}