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

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

{% block meta %}
    <meta name="description" content="{{ content.description ?? metaDescription ?? '' }}">
    <meta property="og:title" content="{{ title }}">
    <meta property="og:description" content="{{ content.description ?? metaDescription ?? '' }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ app.request.uri }}">
    {% if featuredImagePath is defined and featuredImagePath %}
        <meta property="og:image" content="{{ absolute_url(featuredImagePath) }}">
    {% endif %}
    <link rel="canonical" href="{{ app.request.uri }}">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('project-detail') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('project-detail') }}
{% endblock %}

{% block body %}
<div class="project-detail__bg" data-project-detail-bg="true" aria-hidden="true"></div>
<div class="project-detail {% if editMode|default(false) %}project-detail--edit-mode{% endif %}">
    <div class="container">
        {# Hero restyle (node 409-624): title + subtitle + tag pills overlaid directly on
           the hero image, rather than the title rendering above it in its own .page-hero
           band. Tags here are the same Page<->Tag entity relation as Actualité's
           `show_tags`/TagPicker.ts (mutualized system, `tag_scope: 'project'`), just
           rendered inline in this custom hero markup instead of via _page_hero.html.twig
           (which this template doesn't use for its title/subtitle either). #}
            {% if (content.featuredImage is defined and content.featuredImage) or content.featuredImageDark|default(false) or editMode|default(false) %}
                <div class="project-detail__hero-image{% if editMode|default(false) and not (content.featuredImage|default(false) or content.featuredImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(content|default({}), 'featuredImage', editMode|default(false)) }} {% if editMode|default(false) %} data-editable-image="true" data-field="featuredImage" data-media-id="{{ content.featuredImage|default('') }}" data-media-id-dark="{{ content.featuredImageDark|default('') }}" {% endif %}>
                    {% if editMode|default(false) and not (content.featuredImage|default(false) or content.featuredImageDark|default(false)) %}
                        <span class="editable-image__placeholder">
                            <span class="editable-image__placeholder-icon">+</span>
                            <span class="editable-image__placeholder-label">Ajouter l'image principale</span>
                        </span>
                    {% endif %}
                    {% include 'components/_themed_img.html.twig' with {light: featuredImagePath|default(''), dark: featuredImageDarkPath|default(''), alt: title, class: 'project-detail__hero-img'} only %}

                    <div class="project-detail__hero-overlay">
                        {% include 'components/_page_hero.html.twig' with {
                                    title: title,
                                    subtitle: content.subtitle|default(null),
                                    edit_mode: editMode|default(false),
                                    title_class: 'page-hero__title--lato'
                                } %}

                        {% if (tags is defined and tags is not empty) or editMode|default(false) %}
                            <div class="project-detail__hero-tags" id="project-detail-hero-tags" data-tag-list="true">
                                {% if editMode|default(false) %}
                                    {# Page<->Tag relation, same TagPicker.ts as Actualité's #tag-picker
                                       (see components/_page_hero.html.twig) - mounted inline here since
                                       this hero doesn't include that partial. `tag_scope="project"`
                                       restricts the pickable/creatable catalog. #}
                                    <div id="tag-picker"
                                        data-tag-picker="true"
                                        data-page-id="{{ entityId|default(0) }}"
                                        data-tag-scope="project"
                                        data-selected-tag-ids="{{ tags is defined ? tags|map(t => t.id)|join(',') : '' }}"></div>
                                {% elseif tags is defined and tags is not empty %}
                                    {% for tag in tags %}
                                        {% include 'components/_tag.html.twig' with { label: tag.name, disabled: true, class: 'project-detail__hero-tag' } %}
                                    {% endfor %}
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}


        {# "Le projet" info block (decision (a)): top-level content fields, always exactly
           one instance directly under the hero - not a `blocks[]` entry, so included here
           unconditionally rather than inside .project-detail__blocks. #}
        {% include 'components/_project-detail-info.html.twig' with {
            content: content,
            editMode: editMode|default(false)
        } %}

        {# Content blocks - rendered in stored order, dispatched by block.type.
           BlockListEditor.ts manages add/remove/reorder in edit mode: the wrapper below is
           always present in edit mode (even with zero blocks) so a new project can receive
           its first block via "Ajouter un bloc". Reuses the Actualité block partials for
           text/text-image-* (shared components, no duplication) plus a ProjectDetail-only
           gallery block. #}
        {% if (content.blocks is defined and content.blocks is not empty) or editMode|default(false) %}
            <div class="project-detail__blocks" id="project-detail-blocks" data-blocks-container="true">
                {% for block in content.blocks|default([]) %}
                    {% if block.type == 'text' %}
                        {% include 'components/_actualite-block-text.html.twig' with { block: block } %}
                    {% elseif block.type == 'text-image-left' or block.type == 'text-image-right' %}
                        {% include 'components/_actualite-block-text-image.html.twig' with {
                            block: block,
                            imagePosition: block.type == 'text-image-left' ? 'left' : 'right',
                            mobileImagePosition: block.fields.mobileImagePosition|default('before')
                        } %}
                    {% elseif block.type == 'gallery' %}
                        {% include 'components/_project-detail-block-gallery.html.twig' with { block: block } %}
                    {% elseif block.type == 'paragraphs-image' %}
                        {% include 'components/_project-detail-block-paragraphs-image.html.twig' with { block: block } %}
                    {% elseif block.type == 'before-after' %}
                        {% include 'components/_project-detail-block-before-after.html.twig' with { block: block } %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

        {% if editMode|default(false) %}
            {# BlockListEditor.ts "Add block" control - offers the 4 block types, clones the
               matching hidden <template> fragment below rather than building DOM via TS
               template literals. #}
            <div class="project-detail__add-block" data-add-block-control="true">
                <button type="button" class="actualite-block__control actualite-block__control--add" data-add-block-type="text">
                    + Bloc texte
                </button>
                <button type="button" class="actualite-block__control actualite-block__control--add" data-add-block-type="text-image-left">
                    + Bloc texte + image (gauche)
                </button>
                <button type="button" class="actualite-block__control actualite-block__control--add" data-add-block-type="text-image-right">
                    + Bloc texte + image (droite)
                </button>
                <button type="button" class="actualite-block__control actualite-block__control--add" data-add-block-type="gallery">
                    + Bloc galerie
                </button>
                <button type="button" class="actualite-block__control actualite-block__control--add" data-add-block-type="paragraphs-image">
                    + Bloc paragraphes + image
                </button>
                <button type="button" class="actualite-block__control actualite-block__control--add" data-add-block-type="before-after">
                    + Bloc avant / après
                </button>
            </div>
        {% endif %}
    </div>

    {# Footer "Projets similaires" - previous/next navigation among published project_detail pages #}
    {% include 'components/_project-detail-related.html.twig' with {
        previousProject: previousProject,
        nextProject: nextProject
    } %}
</div>

{% if editMode|default(false) %}
    {#
        Hidden, server-rendered block fragments - one per addable block type. BlockListEditor.ts
        clones `<template>.content` for the chosen type rather than constructing DOM via TS
        template literals, so editor markup always matches the real render partials (same
        pattern as templates/pages/actualite.html.twig).
    #}
    <template id="project-detail-block-template-text">
        {% include 'components/_actualite-block-text.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'text', fields: {} }
        } %}
    </template>

    <template id="project-detail-block-template-text-image-left">
        {% include 'components/_actualite-block-text-image.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'text-image-left', fields: {} },
            imagePosition: 'left',
            mobileImagePosition: 'before'
        } %}
    </template>

    <template id="project-detail-block-template-text-image-right">
        {% include 'components/_actualite-block-text-image.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'text-image-right', fields: {} },
            imagePosition: 'right',
            mobileImagePosition: 'before'
        } %}
    </template>

    <template id="project-detail-block-template-gallery">
        {% include 'components/_project-detail-block-gallery.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'gallery', fields: {} }
        } %}
    </template>

    <template id="project-detail-block-template-paragraphs-image">
        {% include 'components/_project-detail-block-paragraphs-image.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'paragraphs-image', fields: { paragraphs: [] } }
        } %}
    </template>

    <template id="project-detail-block-template-before-after">
        {% include 'components/_project-detail-block-before-after.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'before-after', fields: {} }
        } %}
    </template>
{% endif %}
{% endblock %}