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

{% block content %}
    <h1 class="my-5 position-relative fs-3 fw-bold sp-module-title">{{ __('Vídeos', 'Sindikatua') }}</h1>
    {# {{ dump(videos.pagination) }}#}

    <section class="archive-videos my-3">
        <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 %}

                <!-- PAGINATION -->
                {% set pagination = videos.pagination %}
                <div class="pagination-custom mt-5">
                    {% include 'partials/pagination-custom.twig' %}
                </div>
                
            </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>
    </section>

{% endblock %}