{% 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('actualite') }}
{% endblock %}

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

{% block body %}
<div class="actualite-page__bg" data-actualite-bg="true" aria-hidden="true"></div>
<div class="actualite-page {% if editMode|default(false) %}actualite-page--edit-mode{% endif %}">
    <div class="container">
        {# Header: title + tag pills - title editable, tags are entity relations (managed via picker in a later issue) #}
        {% include 'components/_page_hero.html.twig' with {
            title: title,
            edit_mode: editMode|default(false),
            entity_id: entityId ?? 0,
            tags: tags|default([]),
            show_tags: true,
            tag_scope: 'actualite',
            title_class: 'page-hero__title--lato'
        } %}

        {% if (content.mainImage is defined and content.mainImage) or content.mainImageDark|default(false) or editMode|default(false) %}
            <div class="actualite-page__hero-image{% if editMode|default(false) and not (content.mainImage|default(false) or content.mainImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(content|default({}), 'mainImage', editMode|default(false)) }}{% if editMode|default(false) %}
                data-editable-image="true"
                data-field="mainImage"
                data-media-id="{{ content.mainImage|default('') }}" data-media-id-dark="{{ content.mainImageDark|default('') }}"{% endif %}>
                {% if editMode|default(false) and not (content.mainImage|default(false) or content.mainImageDark|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: mainImagePath|default(''), dark: mainImageDarkPath|default(''), alt: title, class: 'actualite-page__hero-img'} only %}
            </div>
        {% endif %}

        {# 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 article can receive
           its first block via "Ajouter un bloc". #}
        {% if (content.blocks is defined and content.blocks is not empty) or editMode|default(false) %}
            <div class="actualite-page__blocks" id="actualite-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')
                        } %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

        {% if editMode|default(false) %}
            {# BlockListEditor.ts "Add block" control - offers the 3 block types, clones the
               matching hidden <template> fragment below rather than building DOM via TS
               template literals, so editor markup always matches real server-rendered
               partials (_actualite-block-text.html.twig / _actualite-block-text-image.html.twig). #}
            <div class="actualite-page__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>
            </div>
        {% endif %}
    </div>

    {# Related posts footer - previous/next navigation among published actualite pages #}
    {% include 'components/_actualite-related-posts.html.twig' with {
        previousPost: previousPost,
        nextPost: nextPost
    } %}
</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.

        Each block is rendered with a sentinel id (`__NEW_BLOCK_ID__`) and empty fields;
        BlockListEditor.ts replaces the sentinel with a freshly generated `crypto.randomUUID()`
        after cloning, then calls EditorCore.bindEditableElement() + MediaSelectorModal.registerField()
        on the clone's editable fields before inserting it into #actualite-blocks.

        `<template>` content is inert (not part of the live DOM, no MediumEditor binding, no
        `id` collisions) until cloned - safe to keep on every edit-mode page load regardless
        of whether "Ajouter un bloc" is ever used.
    #}
    <template id="actualite-block-template-text">
        {% include 'components/_actualite-block-text.html.twig' with {
            block: { id: '__NEW_BLOCK_ID__', type: 'text', fields: {} }
        } %}
    </template>

    <template id="actualite-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="actualite-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>
{% endif %}
{% endblock %}