{% extends 'layouts/base.twig' %}

{% macro contenido_subpagina(post) %}
    <div class="card mb-3">
        <div class="card-header">
            <h5 class="card-title">{{ post.title }}</h5>
        </div>
        <div class="card-body" style="padding-bottom: 60px;">
            <div class="card-text">
                {{ post.content }}
            </div>          
        </div>
    </div>
{% endmacro %}

{% block content %}

<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</p>
{# {{ dump(post.children) }} #}
<div class="container mt-4">
    <div class="row" id="page-columns">

        <!-- Columna izquierda: títulos -->
        <div class="col-md-4 border-end">
            <ul id="post-list" class="list-group">
                {% for pagina in post.children('page') %}
                    {% set is_active = (subpagina and subpagina.id == pagina.id) or (not subpagina and loop.first) %}
                    {% set active_class = is_active ? 'bg-danger text-white' : 'text-black' %}

                    <li class="list-group-item {{active_class}}" data-page-id="{{ pagina.id }}">
                        <a hx-get="{{ pagina.link }}" 
                            hx-target="#page-columns" 
                            hx-select="#page-columns" 
                            hx-swap="outerHTML" 
                            hx-push-url="true" 
                            href="{{ pagina.link }}" class="text-decoration-none d-block w-100  {{ active_class }}">
                            {{ pagina.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
       
        <!-- Columna derecha: contenido del post -->
        <div class="col-md-8">
            <div id="content-area">
                {% if subpagina %}
                    {% set primera = post.children('page')|first %}
                    {{ _self.contenido_subpagina(subpagina) }}
                {% else %}
                    {{ _self.contenido_subpagina(post.children('page')|first) }}
                {% endif %}
            </div>
        </div>

    </div>
</div>

{% endblock %}