{% 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 SubpaginasAcercaCnt %}
                <li class="list-group-item {% if loop.first %}active-acerca{% endif %}" data-page-id="{{ pagina.id }}">
                    <a href="#" 
                       data-page-id="{{ pagina.id }}"
                       class="text-decoration-none d-block w-100 {% if loop.first %}text-white{% else %}text-black{% endif %}">
                        {{ pagina.title }}
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
       
        <!-- Columna derecha: contenido del post -->
        <div class="col-md-8">
            <div id="content-area">
                {% if SubpaginasAcercaCnt|length > 0 %}
                    {% set primera = SubpaginasAcercaCnt|first %}
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="card-title">{{ primera.title }}</h5>
                        </div>
                        <div class="card-body" style="padding-bottom: 60px;">
                            <div class="card-text">
                                {{ primera.content }}
                            </div>          
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const postList = document.getElementById('post-list');
        const contentArea = document.getElementById('content-area');
        
        postList.addEventListener('click', function(e) {
            const link = e.target.closest('a');
            if (!link) return;
            
            e.preventDefault();
            
            const pageId = link.getAttribute('data-page-id');
            
            // Remover clase active de todos
            postList.querySelectorAll('.list-group-item').forEach(item => {
                item.classList.remove('active-acerca');
                const a = item.querySelector('a');
                if (a) {
                    a.classList.remove('text-white');
                    a.classList.add('text-black');
                }
            });
            
            // Añadir clase active al clickeado
            const listItem = link.closest('.list-group-item');
            listItem.classList.add('active-acerca');
            link.classList.add('text-white');
            link.classList.remove('text-black');
            
            // Mostrar loader
            contentArea.innerHTML = '<div class="text-center p-5"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
            
            // Cargar contenido via AJAX
            fetch('{{ site.url }}/wp-admin/admin-ajax.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=get_page_content&page_id=' + pageId
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    contentArea.innerHTML = `
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">${data.data.title}</h5>
                            </div>
                            <div class="card-body" style="padding-bottom: 60px;">
                                <div class="card-text">
                                    ${data.data.content}
                                </div>          
                            </div>
                        </div>
                    `;
                }
            })
            .catch(error => {
                contentArea.innerHTML = '<div class="alert alert-danger">Error al cargar el contenido</div>';
                console.error('Error:', error);
            });
        });
    });
</script>

{% endblock %}