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

{% block content %}
<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</p>

<div class="container mt-4">
    <div class="row">

        <!-- Columna izquierda: títulos -->
        <div class="col-md-4 border-end">
            <ul id="post-list" class="list-group">
                {% for pagina in paginas_acerca %}
                <li class="list-group-item {% if pagina.id == post.id %}active-acerca{% endif %}">
                    <a href="{{ pagina.link }}"
                       class="text-decoration-none d-block w-100 text-black {% if pagina.id == post.id %}text-white{% endif %}">
                        {{ pagina.title }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        
        <!-- Columna derecha: contenido del post actual -->
        <div class="col-md-8">
            <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>
        </div>

    </div>
</div>

{% endblock %}