From cd6bac28449676d5d0f8b074e25f7fe4abe9c58b Mon Sep 17 00:00:00 2001
From: gustavo <gustavo@estudionexos.com>
Date: Wed, 30 Jul 2025 11:25:56 +0000
Subject: [PATCH] ADD new pages

---
 views/partials/breadcrumb.twig             | 26 +++++++
 views/partials/section-videos.twig         |  8 +-
 views/templates/404.twig                   |  6 +-
 views/templates/page-acerca-de-la-cnt.twig | 49 +++++++++++-
 views/templates/page-documentos.twig       | 69 ++++++++++++++++-
 views/templates/page-noticias.twig         | 40 +++++++++-
 views/templates/page-videos.twig           | 87 +++++++++++++++++++++-
 views/templates/single-acerca.twig         | 39 ++++++++++
 8 files changed, 309 insertions(+), 15 deletions(-)
 create mode 100644 views/partials/breadcrumb.twig
 create mode 100644 views/templates/single-acerca.twig

diff --git a/views/partials/breadcrumb.twig b/views/partials/breadcrumb.twig
new file mode 100644
index 0000000..17eb0a9
--- /dev/null
+++ b/views/partials/breadcrumb.twig
@@ -0,0 +1,26 @@
+<div class="alert alert-light m-0 mb-2 p-2" role="alert">
+    <nav aria-label="breadcrumb">
+    <ol class="breadcrumb m-0">
+        <li class="breadcrumb-item"><a href="{{ site.url }}">Inicio</a></li>
+
+        {% if post.post_type == 'page' %}
+        {# Si tiene padres, recorrerlos #}
+        {% set ancestors = post.ancestors %}
+        {% for ancestor in ancestors|reverse %}
+            <li class="breadcrumb-item">
+            <a href="{{ ancestor.link }}">{{ ancestor.title }}</a>
+            </li>
+        {% endfor %}
+        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
+
+        {% elseif post.post_type == 'post' %}
+        <li class="breadcrumb-item"><a href="{{ site.url }}/blog">Blog</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
+
+        {% elseif post.post_type != 'page' %}
+        <li class="breadcrumb-item"><a href="{{ post.type_archive_link }}">{{ post.post_type_label }}</a></li>
+        <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
+        {% endif %}
+    </ol>
+    </nav>
+</div>
diff --git a/views/partials/section-videos.twig b/views/partials/section-videos.twig
index 96a8c1c..513e83c 100644
--- a/views/partials/section-videos.twig
+++ b/views/partials/section-videos.twig
@@ -6,10 +6,10 @@
             <div class="col-lg-8 col-12 mb-4 mb-lg-0">
                 <p class="mb-4 position-relative fs-4 fw-bold sp-module-title">VÍDEOS</p>
                 
-                {% if videos_carousel %}
+                {% if videos %}
                     <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
                         <div class="carousel-inner">
-                        {% for pair in videos_carousel|batch(2, null) %}
+                        {% for pair in videos|batch(2, null) %}
                         
                             <div class="carousel-item {% if loop.first %}active{% endif %}">
                                 <div class="row">
@@ -68,7 +68,7 @@
                         </div>
 
                         {# carousel controls buttons#}                        
-                        {% if videos_carousel|length > 1 %}
+                        {% if videos|length > 1 %}
                             <button class="carousel-control-prev" type="button" data-bs-target="#videosCarousel" data-bs-slide="prev">
                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                 <span class="visually-hidden">Anterior</span>
@@ -79,7 +79,7 @@
                             </button>
 
                             {# <div class="carousel-indicators">
-                                {% for pair in videos_carousel|batch(2, null) %}
+                                {% for pair in videos|batch(2, null) %}
                                     <button type="button" data-bs-target="#videosCarousel" data-bs-slide-to="{{ loop.index0 }}" 
                                             {% if loop.first %}class="active"{% endif %} aria-label="Slide {{ loop.index }}"></button>
                                 {% endfor %}
diff --git a/views/templates/404.twig b/views/templates/404.twig
index 1b2073c..98e1cd5 100644
--- a/views/templates/404.twig
+++ b/views/templates/404.twig
@@ -1,5 +1,9 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    Sorry, we couldn't find what you're looking for.
+    <main class="container py-5 text-center">
+        <h1 class="display-4">404 - Página no encontrada</h1>
+        <p class="lead">Ez da aurkitu bilatzen duzun orria / No se ha encontrado la página que buscabas</p>
+        <a href="<?php echo home_url(); ?>" class="btn btn-primary mt-4">Volver al inicio</a>
+    </main>
 {% endblock %}
diff --git a/views/templates/page-acerca-de-la-cnt.twig b/views/templates/page-acerca-de-la-cnt.twig
index 454e562..44c9887 100644
--- a/views/templates/page-acerca-de-la-cnt.twig
+++ b/views/templates/page-acerca-de-la-cnt.twig
@@ -1,7 +1,52 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
-        Acerca de la CNT ---- A simple warning alert—check it out!
+    {% include 'partials/breadcrumb.twig' %}
+
+    <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{% endif %}" data-post-id="{{ pagina.id }}">
+                        <a href="#"
+                            data-post-id="{{ pagina.id }}"
+                            class="text-decoration-none d-block w-100 {% if pagina.id == post.id %}text-white{% endif %}">
+                            {{ pagina.title }}
+                        </a>
+                    </li>
+
+                    {% endfor %}
+                </ul>
+            </div>
+
+            <!-- Columna derecha: contenido dinámico del post (se llena con el primer post) -->
+            <div class="col-md-8" id="post-content">
+            <!-- Aquí se inyectará dinámicamente el primer post con JS -->
+            </div>
+        </div>
+
+    <!-- Plantilla oculta con el contenido completo de cada post -->
+    <div id="post-templates" class="d-none">
+        {% for pagina in paginas_acerca %}
+            <div class="post-template" data-post-id="{{ pagina.id }}">
+
+                <div class="card mb-3">
+                    <div class="card-header">
+                        <h5 class="card-title">{{ pagina.title }}</h5>
+                    </div>
+                    <div class="card-body" style="padding-bottom: 60px;">
+                        <p class="card-text">
+                            {{ pagina.content }}
+                        </p>          
+                    </div>
+                    
+                </div>
+            </div>
+        {% endfor %}
     </div>
+
+
 {% endblock %}
diff --git a/views/templates/page-documentos.twig b/views/templates/page-documentos.twig
index cce4b14..d1daf5e 100644
--- a/views/templates/page-documentos.twig
+++ b/views/templates/page-documentos.twig
@@ -1,8 +1,71 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-<h1 class="badge text-bg-primary text-wrap">DOCUMENTOS</h1>
-    <div class="alert alert-warning" role="alert">
-        DOCUMENTOS ---- A simple warning alert—check it out!
+<p class="alert alert-info" role="alert">
+    <i class="bi bi-folder-fill"></i>   
+    Dokumentuak / Documentos</p>
+
+<section class="documentos">
+    <div class="container">
+        {% if documentos %}
+        {#<pre>{{ dump(documentos) }}</pre>#}
+
+            {% for doc in documentos %}
+                <div class="card mb-3">
+                    <div class="card-header">
+                        <h6 class="card-title mb-1">{{ doc.title }}</h6>
+                    </div>
+                    <div class="row g-0">
+                        <div class="col-2">
+                            {% if doc.thumbnail %}
+                                <img src="{{ doc.thumbnail }}"
+                                     class="img-fluid object-fit-cover"
+                                     alt="{{ doc.title }}"
+                                     loading="lazy"
+                                     >
+                            {% else %}
+                                <div class="bg-light d-flex align-items-center justify-content-center h-100 rounded-start">
+                                    <i class="bi bi-file-earmark-image-fill"></i>
+                                </div>
+                            {% endif %}
+                        </div>
+                        <div class="col-10">
+                            <div class="card-body d-flex flex-column justify-content-between h-100 py-2">
+                                <div>
+                                    {% if doc.content %}
+                                        <p class="card-text small mb-2">{{ doc.content }}</p>
+                                    {% endif %}
+                                </div>
+
+                                <div>
+                                    {% if doc.documento_url %}
+                                        <a href="{{ doc.documento_url }}" 
+                                            class="btn btn-primary btn-sm me-2" 
+                                            target="_blank">
+                                                <i class="bi bi-eye-fill"></i>
+                                                Ver documento
+                                        </a>
+
+                                        <a href="{{ doc.documento_url }}" download
+                                            class="btn btn-primary btn-sm me-2" >
+                                                <i class="bi bi-cloud-download-fill"></i>
+                                                Descargar
+                                        </a>
+
+                                    {% endif %}
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        {% else %}
+            <div class="alert alert-info" role="alert">
+                No hay documentos disponibles.
+            </div>
+        {% endif %}
     </div>
+</section>
+
 {% endblock %}
diff --git a/views/templates/page-noticias.twig b/views/templates/page-noticias.twig
index bf03b38..4694688 100644
--- a/views/templates/page-noticias.twig
+++ b/views/templates/page-noticias.twig
@@ -1,7 +1,41 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
-        NOTICIAS ---- A simple warning alert—check it out!
-    </div>
+    {% include 'partials/breadcrumb.twig' %}
+
+    {% if recent_posts_noticias %}
+        {% for noticias in recent_posts_noticias %}
+
+            <div class="card my-3 position-relative">
+            <div class="row g-0">
+                <div class="col-md-4">
+                    <img src="{{ noticias.thumbnail.src }}" 
+                            class="rounded-start object-fit-cover w-100 h-100" 
+                            alt="{{ noticias.thumbnail.alt }}"
+                            style="min-height: 200px;"
+                            />
+                </div>
+                <div class="col-md-8">
+                <div class="card-body" style="padding-bottom: 60px;">
+                    <h5 class="card-title">{{ noticias.title }}</h5>
+                    <p class="card-text"> {{
+                            noticias.excerpt({
+                                words: 50,
+                                read_more: ''
+                            })
+                        }}</p>
+                    <p class="card-text"><small class="text-body-secondary">{{ noticias.date }}</small></p>
+                    <a href="{{ noticias.link  }}" 
+                            class="btn btn-secondary position-absolute"
+                            style="position: absolute; bottom: 15px; right: 15px; z-index: 10;" 
+                            >Sigue leyendo...</a>
+                </div>
+                </div>
+            </div>
+            </div>
+
+        {% endfor %}
+    {% else %}
+        <h2>no hay artículos</h2>
+    {% endif %}
 {% endblock %}
diff --git a/views/templates/page-videos.twig b/views/templates/page-videos.twig
index 3cda63b..14f1cd5 100644
--- a/views/templates/page-videos.twig
+++ b/views/templates/page-videos.twig
@@ -1,7 +1,90 @@
 {% extends 'layouts/base.twig' %}
 
 {% block content %}
-    <div class="alert alert-warning" role="alert">
-        VIDEOS ---- A simple warning alert—check it out!
+    {% include 'partials/breadcrumb.twig' %}
+
+    <div class="container text-center">
+        <div class="row">
+        {% if videos %}
+            {% for video in videos %}
+        
+            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
+                <div class="video-item">
+                    {% set url_video = video.meta('url_video') %}
+                    {% set video_data = generar_embed(url_video) %}
+                    {% if video_data %}
+
+                    {# Thumbnail clickeable en lugar del iframe #}
+                    <div class="ratio ratio-16x9 video-thumbnail-container position-relative rounded" 
+                        data-bs-toggle="modal" 
+                        data-bs-target="#videoModal"
+                        data-video-url="{{ video_data.embed_url }}"
+                        data-video-title="{{ video.titulo }}"
+                        data-video-allow="{{ video_data.allow }}"
+                        style="cursor: pointer; 
+                                background-image: url('{{ video_data.thumbnail_url }}'); 
+                                background-size: cover; 
+                                background-position: center;">
+
+                        {# Overlay con botón play #}
+                        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center">
+                            <div class="btn btn-danger btn-lg rounded-circle d-flex align-items-center justify-content-center"
+                                style="width: 60px; height: 60px;">
+                                <i class="bi bi-play-btn" style="font-size: 2rem;"></i>
+                            </div>
+                        </div>
+                        
+                        {# Overlay oscuro al hover #}
+                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-0 hover-overlay"
+                            style="transition: opacity 0.3s ease;">
+                        </div>
+                        
+                        {# Título del vídeo #}
+                        <div class="position-absolute bottom-0 start-0 end-0 bg-dark bg-opacity-75 text-white p-3 rounded">
+                            <h6 class="mb-0 text-white">{{ video.titulo }}</h6>
+                        </div>
+                    </div>
+
+                    {% else %}
+                        <div class="alert alert-warning">
+                            <h5>{{ video.titulo }}</h5>
+                            <p class="mb-0">No se ha configurado URL para este vídeo.</p>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            {% endfor %}
+        {% else %}
+            <p>No hay vídeos disponibles.</p>
+        {% endif %}
+        </div>
+
+        {# MODAL PARA REPRODUCIR VÍDEO #}
+        <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="videoModalLabel"></h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
+                    </div>
+                    <div class="modal-body p-0">
+                        <div class="ratio ratio-16x9">
+                            <iframe id="modalVideoIframe"
+                                    src=""
+                                    title=""
+                                    frameborder="0"
+                                    allow=""
+                                    allowfullscreen
+                                    loading="lazy">
+                            </iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
     </div>
+
+
 {% endblock %}
diff --git a/views/templates/single-acerca.twig b/views/templates/single-acerca.twig
new file mode 100644
index 0000000..dc84965
--- /dev/null
+++ b/views/templates/single-acerca.twig
@@ -0,0 +1,39 @@
+{% extends 'layouts/base.twig' %}
+
+{% block content %}
+
+<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 %}