{% load wagtailcore_tags wagtailimages_tags %}
{% block block_render %}
{% load static %}
<script src="https://kit.fontawesome.com/2e8803d931.js" crossorigin="anonymous"></script>
<section class="enap-events-section">
    <div class="enap-wrapper-texts">
        <h2 class="enap-h2-title">Eventos e Oficinas</h2>
        <h4 class="enap-sub-title">Acompanhe os próximos eventos da Enap</h4>
    </div>
    
    <div class="enap-wrapper">
        <div class="enap-events-carousel-container" id="enap-events-carousel-container">
            <div class="enap-events-carousel-items" id="enap-events-carousel-items">
                {% for page in pages %}
                <div class="enap-events-carousel-item">
                    <a href="{% pageurl page %}" class="enap-events-item-link">
                        <div class="enap-events-carousel-item-content">
                            <div class="enap-events-carousel-datetime">
                                <div class="enap-event-date">
                                    <span class="enap-event-day">
                                        {% if page.event_date %}
                                            {{ page.event_date|date:"d" }}
                                        {% else %}
                                            {{ page.last_published_at|date:"d" }}
                                        {% endif %}
                                    </span>
                                    <div class="enap-event-month-year">
                                        <span class="enap-text-date">
                                            {% if page.event_date %}
                                                {{ page.event_date|date:"F" }}
                                            {% else %}
                                                {{ page.last_published_at|date:"F" }}
                                            {% endif %}
                                        </span>
                                        <span class="enap-text-date">
                                            {% if page.event_date %}
                                                {{ page.event_date|date:"Y" }}
                                            {% else %}
                                                {{ page.last_published_at|date:"Y" }}
                                            {% endif %}
                                        </span>
                                    </div>
                                    <span class="enap-text-date">
                                        {% if page.event_date %}
                                            {{ page.event_date|date:"l" }}
                                        {% else %}
                                            {{ page.last_published_at|date:"l" }}
                                        {% endif %}
                                    </span>
                                </div>
                                {% if page.event_date %}
                                <p class="enap-event-time">{{ page.event_date|date:"d/m/Y H:i" }}</p>
                                {% endif %}
                            </div>
                            <div class="enap-events-carousel-content">
                                <div class="enap-event-tag">Evento</div>
                                <h3 class="enap-events-title">{{ page.title }}</h3>
                                <p class="enap-card-text">{{ page.body_preview }}</p>
                                
                                <!-- Data de publicação -->
                                <div class="enap-event-published">
                                    <small class="enap-text-muted">
                                        <i class="fa-regular fa-calendar"></i>
                                        Publicado: {{ page.last_published_at|date:"d/m/Y" }}
                                    </small>
                                </div>
                                
                                <div class="enap-event-location">
                                    <i class="fa-solid fa-location-dot"></i> Presencial
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {% empty %}
                <div class="enap-events-carousel-item">
                    <p>Nenhum evento disponível.</p>
                </div>
                {% endfor %}
            </div>
            <button class="enap-events-carousel-control enap-events-carousel-control-prev">
                <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconleft.svg' %}" alt="Passar pro lado esquerdo">
            </button>
            <button class="enap-events-carousel-control enap-events-carousel-control-next">
                <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconrig.svg' %}" alt="Passar pro lado direito">
            </button>
        </div>
    </div>

    <a class="enap-btn-todos" href="{% pageurl value.indexed_by %}">Ver todos os eventos</a>
</section>

<!-- Todos os estilos CSS que você já tinha -->
<style>
    .enap-event-published {
        margin: 8px 0;
    }
    
    .enap-text-muted {
        color: #6c757d;
        font-size: 12px;
    }
    
    .enap-text-muted i {
        margin-right: 4px;
    }

    .enap-btn-todos{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        text-decoration: none;
        color: #007D7A;
        border: 1px solid #007D7A;
        padding: 8px 24px;
        border-radius: 40px;
        margin: auto;
        background-color: white;
        font-weight: 600;
    }
    .enap-btn-todos:hover{
        color: #006969;
        border: 1px solid #006969;
    }

    .enap-btn-todos:active{
        color: #025257;
        border: 1px solid #025257;
    }
    .enap-events-section {
        max-width: 74.1rem;
        margin: auto;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 40px;
        overflow: hidden;
    }
    
    .enap-wrapper-texts {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .enap-h2-title {
        margin: 0;
        font-size: 40px;
        font-weight: 600;
        color: #434A54;
    }
    
    .enap-sub-title {
        font-size: 20px;
        font-weight: 400;
        margin: 10px 0 0 0;
        color: #434A54;
    }
    
    .enap-wrapper {
        position: relative;
        width: 1142px;
        margin: auto;
    }
    
    .enap-events-carousel-container {
        position: relative;
        max-width: 1142px;
        margin: auto;
    }
    
    .enap-events-carousel-items {
        display: flex;
        transition: transform 0.3s ease-in-out;
        gap: 25px;
        cursor: grab;
        width: calc(100% + 25px);
        margin-right: -25px;
    }
    
    .enap-events-carousel-items:active {
        cursor: grabbing;
    }
    
    .enap-events-carousel-item {
        flex-shrink: 0;
        width: 367px;
        margin-right: 0;
    }
    
    .enap-events-item-link {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    
    .enap-events-carousel-item-content {
        display: flex;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #C8D1E0;
    }
    
    .enap-events-carousel-datetime {
        width: 35%;
        border-radius: 8px 0 0 8px;
        overflow: hidden;
        text-align: center;
        background-color: #EBEFF5;
        padding: 20px 10px;
        height: 216px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .enap-event-date {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .enap-event-day {
        font-size: 44px;
        color: #007D7A;
        font-weight: 700;
        line-height: 1;
    }
    
    .enap-event-month-year {
        margin: 5px 0;
    }
    
    .enap-text-date {
        font-size: 16px;
        color: #58606E;
        font-weight: 300;
        text-align: center;
    }
    
    .enap-event-time {
        font-size: 14px;
        color: #58606E;
        margin-top: 10px;
    }
    
    .enap-events-carousel-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        width: 65%;
        background-color: white;
        height: 216px;
        padding: 20px;
        text-align: left;
    }
    
    .enap-event-tag {
        border: 1px solid #FC7D5C;
        font-size: 14px;
        color: #FC7D5C;
        border-radius: 24px;
        padding: 0px 15px;
        display: inline-block;
    }
    
    .enap-events-title {
        font-size: 20px;
        color: #007D7A;
        text-decoration: none;
        font-weight: 500;
        margin: 10px 0;
    }
    
    .enap-card-text {
        text-align: left;
        margin: 0;
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
    }
    
    .enap-event-location {
        font-size: 14px;
        color: #58606E;
    }
    
    .enap-events-carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #333;
        cursor: pointer;
        border: none;
        background-color: transparent;
        z-index: 10;
    }
    
    .enap-events-carousel-control-prev {
        left: -22px;
    }
    
    .enap-events-carousel-control-next {
        right: -22px;
    }
    
    .enap-btn {
        border: none;
        border-radius: 32px;
        color: #007D7A;
        text-decoration: none;
        display: inline-block;
        margin-top: 20px;
    }
    
    /* Estilos responsivos */
    @media (max-width: 992px) {
        .enap-events-section {
            gap: 30px;
            padding-left: 10px;
        }
        
        .enap-h2-title {
            font-size: 32px;
        }
        
        .enap-sub-title {
            font-size: 20px;
            text-align: left;
        }

        .enap-wrapper-texts {
            margin-top: 40px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            max-width: 81vw;
        }
    }
    
    @media (max-width: 1142px) {
        .enap-wrapper {
            width: 100%;
            padding: 0 20px;
        }
    }
    
    @media (max-width: 768px) {
        .enap-events-carousel-item {
            width: 70vw;
            max-width: 400px;
        }

        .enap-wrapper {
            width: 100%;
            padding: 0px;
        }
        
        .enap-events-carousel-control {
            display: none !important;
        }
        
        .enap-h2-title {
            font-size: 32px;
        }
        
        .enap-sub-title {
            font-size: 20px;
            text-align: left;
        }
    }
    
    @media (max-width: 576px) {
        .enap-events-carousel-item-content {
            flex-direction: column;
            height: 100%;
        }
        
        .enap-events-carousel-datetime {
            width: 100%;
            height: auto;
            border-radius: 8px 8px 0 0;
            padding: 15px;
        }
        
        .enap-events-carousel-content {
            width: 100%;
            height: auto;
            padding: 15px;
            gap: 10px;
        }
        
        .enap-event-day {
            font-size: 36px;
        }
        
        .enap-events-title {
            font-size: 18px;
        }
    }
</style>

<!-- Todo o JavaScript que você já tinha -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Selecionar elementos do DOM
        const container = document.getElementById('enap-events-carousel-container');
        const carouselItems = document.getElementById('enap-events-carousel-items');
        const prevBtn = document.querySelector('.enap-events-carousel-control-prev');
        const nextBtn = document.querySelector('.enap-events-carousel-control-next');
        const items = carouselItems.querySelectorAll('.enap-events-carousel-item');
        
        // Variáveis de controle
        let currentIndex = 0;
        let startX, moveX, initialPosition;
        let isDragging = false;
        
        // Dimensões fixas dos itens - IMPORTANTE para alinhamento correto
        const itemWidth = 367; // Largura do item
        const itemGap = 25;    // Espaçamento entre itens
        const itemTotalWidth = itemWidth + itemGap; // Largura total de cada item + gap
        
        // Adicionar padding ao contêiner para garantir alinhamento correto dos cards
        // Isso ajuda a evitar que cards sejam cortados pela metade na visualização
        container.style.paddingLeft = '0px';
        container.style.paddingRight = '0px';
        
        // Verifica se é dispositivo móvel
        function isMobile() {
            return window.innerWidth <= 768;
        }
        
        // Determina quantos itens são visíveis na viewport atual
        function getVisibleItems() {
            const containerWidth = container.offsetWidth;
            return Math.max(1, Math.floor(containerWidth / itemTotalWidth));
        }
        
        // Calcula o índice máximo possível
        function getMaxIndex() {
            return Math.max(0, items.length - getVisibleItems());
        }
        
        // Define quantos itens devem ser rolados de cada vez
        function getScrollAmount() {
            return isMobile() ? 1 : 3; // 1 no mobile, 3 no desktop
        }
        
        // Exibe o slide no índice especificado com alinhamento perfeito
        function showSlide(index) {
            // Garante que o índice esteja dentro dos limites válidos
            const maxIndex = getMaxIndex();
            currentIndex = Math.max(0, Math.min(index, maxIndex));
            
            // Calcula o offset preciso baseado no índice atual
            const offset = Math.round(currentIndex * itemTotalWidth);
            
            // Aplica a transformação com valor inteiro para evitar problemas de subpixel
            carouselItems.style.transform = `translateX(-${offset}px)`;
            
            // Atualiza a visibilidade dos botões de navegação
            updateButtons(maxIndex);
        }
        
        // Atualiza a visibilidade dos botões de navegação
        function updateButtons(maxIndex) {
            // Primeiro slide: esconde botão anterior
            if (currentIndex <= 0) {
                prevBtn.style.display = 'none';
                nextBtn.style.display = items.length > getVisibleItems() ? 'block' : 'none';
            } 
            // Último slide: esconde botão próximo
            else if (currentIndex >= maxIndex) {
                prevBtn.style.display = 'block';
                nextBtn.style.display = 'none';
            } 
            // Slides intermediários: mostra ambos os botões
            else {
                prevBtn.style.display = 'block';
                nextBtn.style.display = 'block';
            }
        }
        
        // Configurar eventos de botões de navegação
        prevBtn.addEventListener('click', () => {
            // Número de itens a retroceder depende do dispositivo
            const amount = getScrollAmount();
            const step = Math.min(amount, currentIndex);
            showSlide(currentIndex - step);
        });
        
        nextBtn.addEventListener('click', () => {
            // Número de itens a avançar depende do dispositivo
            const amount = getScrollAmount();
            const maxIndex = getMaxIndex();
            const step = Math.min(amount, maxIndex - currentIndex);
            showSlide(currentIndex + step);
        });
        
        // Eventos de toque para mobile
        carouselItems.addEventListener('touchstart', handleStart, { passive: true });
        carouselItems.addEventListener('touchmove', handleMove, { passive: false });
        carouselItems.addEventListener('touchend', handleEnd, { passive: true });
        
        // Eventos de mouse para desktop
        carouselItems.addEventListener('mousedown', handleStart);
        carouselItems.addEventListener('mousemove', handleMove);
        carouselItems.addEventListener('mouseup', handleEnd);
        carouselItems.addEventListener('mouseleave', handleEnd);
        
        // Inicia o arrasto do carousel
        function handleStart(e) {
            isDragging = true;
            startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
            initialPosition = currentIndex * itemTotalWidth;
            
            // Remove transição para resposta imediata
            carouselItems.style.transition = 'none';
        }
        
        // Processa o movimento durante o arrasto
        function handleMove(e) {
            if (!isDragging) return;
            
            moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
            const diff = moveX - startX;
            
            // Aplica o movimento com efeito elástico nos limites
            const maxIndex = getMaxIndex();
            
            if (currentIndex === 0 && diff > 50) {
                // Limite inicial com efeito elástico
                carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
            } else if (currentIndex >= maxIndex && diff < -50) {
                // Limite final com efeito elástico
                carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
            } else {
                // Movimento normal
                carouselItems.style.transform = `translateX(${diff - initialPosition}px)`;
            }
            
            // Previne o scroll da página durante o arrasto horizontal
            if (Math.abs(diff) > 10 && e.type === 'touchmove') {
                e.preventDefault();
            }
        }
        
        // Finaliza o arrasto do carousel
        function handleEnd() {
            if (!isDragging) return;
            isDragging = false;
            
            // Restaura a transição suave
            carouselItems.style.transition = 'transform 0.3s ease-in-out';
            
            // Determina se o movimento foi significativo para mudar o slide
            const diff = moveX - startX;
            const threshold = itemWidth / 4; // 25% da largura do item
            
            if (diff > threshold) {
                // Swipe para direita (voltar)
                const amount = getScrollAmount();
                const step = Math.min(amount, currentIndex);
                showSlide(currentIndex - step);
            } else if (diff < -threshold) {
                // Swipe para esquerda (avançar)
                const amount = getScrollAmount();
                const maxIndex = getMaxIndex();
                const step = Math.min(amount, maxIndex - currentIndex);
                showSlide(currentIndex + step);
            } else {
                // Movimento pequeno, volta à posição atual
                showSlide(currentIndex);
            }
        }
        
        // Previne cliques em links durante arrasto
        const links = carouselItems.querySelectorAll('a');
        links.forEach(link => {
            link.addEventListener('click', function(e) {
                if (isDragging || (moveX && Math.abs(moveX - startX) > 10)) {
                    e.preventDefault();
                }
            });
        });
        
        // Adapta o carousel quando a janela é redimensionada
        window.addEventListener('resize', function() {
            // Força uma pausa antes de recalcular para garantir medidas corretas
            setTimeout(function() {
                // Recalcula índices e posição
                const maxIndex = getMaxIndex();
                if (currentIndex > maxIndex) {
                    currentIndex = maxIndex;
                }
                
                // Restaura transição para animação suave
                carouselItems.style.transition = 'transform 0.3s ease-in-out';
                
                // Atualiza a exibição
                showSlide(currentIndex);
            }, 100);
        });
        
        // Aguardar que todas as imagens carreguem para inicializar corretamente
        window.addEventListener('load', function() {
            // Inicializa com um pequeno delay para garantir medidas corretas
            setTimeout(function() {
                // Certificar que os estilos estão aplicados antes de inicializar
                carouselItems.style.transition = 'transform 0.3s ease-in-out';
                showSlide(0);
            }, 100);
        });
        
        // Inicializa o carousel (também será inicializado no evento load)
        showSlide(0);
    });
</script>
{% endblock %}