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

{% block body %}
<div class="list-page {% if editMode|default(false) %}list-page--edit-mode{% endif %}">
    <div class="container">
        {# Page Header - Editable in edit mode #}
        <header class="list-page__header">
            <h1 class="list-page__title"{% if editMode|default(false) %}
                data-editable="true"
                data-editor-type="simple"
                data-field="title"
                data-section="header"
                data-section-type="header"{% endif %}>
                {{ title }}
            </h1>
        </header>

        {# Intro Sections - Editable in edit mode #}
        {% if content.sections is defined and content.sections is not empty %}
            <div class="list-page__intro">
                {% for section in content.sections %}
                    <div class="list-page__section"{% if editMode|default(false) %} data-section="{{ section.id }}" data-section-type="{{ section.type }}"{% endif %}>
                        {% if section.fields.content is defined %}
                            <div class="list-page__section-content"{% if editMode|default(false) %} data-editable="true" data-field="content"{% endif %}>
                                {{ section.fields.content|raw }}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {# Child Pages Grid - Dynamic from DB, NOT editable #}
        {% if children is defined and children is not empty %}
            <div class="list-page__grid">
                {% for child in children %}
                    {% set childLocale = app.request.locale %}
                    {% set parentSlug = slug %}
                    {% set childSlug = child.localizedSlug %}
                    {% set childLink = childLocale == 'en'
                        ? path('subpage_show_en', {parentSlug: parentSlug, slug: childSlug})
                        : path('subpage_show', {parentSlug: parentSlug, slug: childSlug}) %}
                    {% set linkText = childLocale == 'en' ? 'Learn more' : 'En savoir plus' %}

                    {# Render card component for each child page #}
                    {% include 'components/_card.html.twig' with {
                        'image': child.featuredImage ?? null,
                        'title': child.localizedTitle,
                        'description': child.localizedDescription ?? null,
                        'link': childLink,
                        'linkText': linkText,
                        'modifierClass': 'card--project'
                    } %}
                {% endfor %}
            </div>
        {% else %}
            {# Empty State - No child pages #}
            <div class="list-page__empty-state">
                <p>{{ app.request.locale == 'en' ? 'No pages available at the moment' : 'Aucune page disponible pour le moment' }}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}