
<div class="row align-items-stretch">

    {# Primera columna - Carousel con vídeos embebidos #}
    <div class="col-lg-8 col-12 mb-4 mb-lg-0 order-2 order-lg-1 mt-5 mt-lg-0">
        <h2 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Vídeos', 'Sindikatua')|upper }}</h2>

        {% if videos %}
            <div id="videosCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                {% for pair in videos.posts|batch(2, null) %}
                
                    <div class="carousel-item {% if loop.first %}active{% endif %}">
                        <div class="row">
                        {% for video in pair %}
                        {% if video %}
                            <div class="col-6">
                                <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">
                                            <h4 class="fs-5">{{ video.titulo }}</h4>
                                            <p class="mb-0">{{ __('No hay URL', 'Sindikatua') }}</p>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                        {% endfor %}
                        </div>
                    </div>
                {% endfor %}
                </div>

                {# carousel controls buttons#}                        
                {% if videos.posts|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>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#videosCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Siguiente</span>
                    </button>

                    {# <div class="carousel-indicators">
                        {% 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 %}
                    </div> #}
                {% endif %}
            </div>
        {% else %}
            No hay vídeos
        {% 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">
                    <h4 class="modal-title" id="videoModalLabel"></h4>
                    <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>

    {# Segunda columna - Último artículo de opinión #}
    <div class="col-lg-4 col-12 opinion-article d-flex flex-column order-1 order-lg-2 ">
        <a href="{{ opinion_url }}" class="text-decoration-none text-dark" style="width: fit-content;">
            <h2 class="mb-4 position-relative fs-4 fw-bold sp-module-title">{{ __('Opinión', 'Sindikatua')|upper}}</h2>
        </a>
        <div class="flex-grow-1 d-flex">
            {% if last_posts_opinion and last_posts_opinion|length > 0 %}
                {% for article in last_posts_opinion %}
                {% set imagen = article.thumbnail.src('medium') | default('/wp-content/uploads/2025/10/Imagen_por_defecto_300.jpg') %}
                {% set alt = article.thumbnail.alt | default('Imagen Opinión') %}

                    <div class="card w-100 h-100 secondary-article">
                        <a class="h-100" href="{{ article.link }}">
                            <img src="{{ imagen }}" 
                                    alt="{{ alt }}" 
                                    class="card-img h-100 object-fit-cover img-noticias"
                                    style="aspect-ratio: 16/9;"/>

                            <div class="card-img-overlay d-flex flex-column justify-content-end align-items-start">
                                <div>
                                    <!-- Título -->
                                    <p class="card-title text-wrap fs-6">
                                        <a href="{{ article.link }}" class="text-white text-decoration-none">{{ article.title }}</a>
                                    </p>

                                    <!-- Icono + autor -->
                                    <p class="text-white mb-0 d-flex align-items-center" style="font-size: 0.7rem">
                                        <i class="bi bi-person me-1"></i>
                                        {{ article.author_alias }}
                                    </p>

                                    <!-- Icono + fecha -->
                                    <p class="text-white mb-0 d-flex align-items-center" style="font-size: 0.7rem">
                                        <i class="bi bi-calendar me-1"></i>
                                        {{ article.date }}
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                {% endfor %}
            {% else %}
                <p>{{ __('No hay artículos', 'Sindikatua') }}</p>
            {% endif %}
        </div>    
    </div>
    
</div>
