ADD new page acerca de la cnt

views/templates/page-acerca-de-la-cnt.twig

@@ -0,0 +1,109 @@
+{% 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 %}

views/templates/page-cnt-ri-buruz.twig

@@ -1 +1 @@
-{% extends 'templates/single-acerca.twig' %}
+{% extends 'templates/page-acerca-de-la-cnt.twig' %}