{% extends "enap_designsystem/base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load css_tags %}
{% load static %}
{% block extra_css %}{% block_css 'enap_designsystem/blocks/pagelist_block.css' %}{% endblock %}
{% block content %}
<style>
    .article-preview {
        position: relative;
        background-color: #012124;
        padding: 80px 0;
        color: white;
    }

    .overlay-holofote{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(1, 33, 36, 0.5);
        z-index: 10;
    }
    
    .break-pa{
        font-size: 2.5rem;
        font-weight: 600;    
        color: #FC7D5C;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .container-holofote {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    .content-wrapper {
        display: flex;
        align-items: center;
        gap: 60px;
        min-height: 500px;
    }
    
    /* Seção de Texto */
    .text-section {
        flex: 1;
        max-width: 500px;
        text-align: left;
    }
    
    .section-title-h {
        font-size: 32px;
        font-weight: 400;
        margin: 0 0 20px 0;
        color: #AFF0ED;
        line-height: 1.1;
    }
    
    .section-subtitle {
        font-size: 18px;
        color: #AFF0ED;
        margin: 0 0 30px 0;
        line-height: 1.4;
    }
    
    .description-text {
        font-size: 16px;
        color: #cccccc;
        line-height: 1.6;
        margin-bottom: 30px;
    }
    
    .features-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .feature-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 16px;
        color: #e0e0e0;
    }
    
    .feature-item i {
        color: #30bfbc;
        font-size: 18px;
        width: 20px;
    }
    
    /* Seção do Carrossel */
    .carousel-section-holofote {
        flex: 1;
        max-width: 700px;
        text-align: center;
    }
    
    .gradiente-rigth{
        width: 80px;
        height: 100%;
        background: linear-gradient(270deg, #012124 0%, rgba(1, 33, 36, 0) 100%);
        border-radius: 2px;
        position: absolute;
        right: 0;
        z-index: 5;
    }
    
    .gradiente-left{
        width: 80px;
        height: 100%;
        background: linear-gradient(to right, #012124 0%, rgba(1, 33, 36, 0) 100%);
        border-radius: 2px;
        position: absolute;
        left: 0;
        z-index: 5;
    }
    
    .article-carousel-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 30px;
        padding: 0;
    }
    
    .article-carousel-items {
        display: flex;
        transition: transform 0.5s ease-in-out;
        gap: 20px;
        cursor: grab;
        width: max-content;
        margin: 0 auto;
    }
    
    .article-carousel-item.clone {
        opacity: 1;
    }
    
    .article-carousel-items:active {
        cursor: grabbing;
    }
    
    .article-carousel-item {
        flex: 0 0 auto;
        width: 100%;
        max-width: 600px;
        height: 380px;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        position: relative;
    }
    
    .article-carousel-item-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.9) 100%);
    }
    
    .article-carousel-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .image-link {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .article-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .image-link:hover .article-img {
        transform: scale(1.05);
    }
    
    .article-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .image-link:hover .article-video {
        transform: scale(1.05);
    }
    
    .article-carousel-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        height: 100%;
        padding: 30px;
        text-align: left;
        position: relative;
        z-index: 12;
        width: 60%;
    }
    
    .article-title {
        font-size: 24px;
        text-decoration: none;
        font-weight: 600;
        color: white;
        text-align: left;
        margin: 0 0 15px 0;
        line-height: 1.3;
    }
    
    .article-description {
        color: #e0e0e0;
        text-align: left;
        margin: 0 0 20px 0;
        font-size: 14px;
        line-height: 1.5;
        max-width: 90%;
    }
    
    .article-btn {
        border: 2px solid white;
        background-color: transparent;
        color: white;
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
    }
    
    .article-btn:hover {
        background-color: white;
        color: #012124;
    }
    
    .article-btn i {
        transition: transform 0.2s;
    }
    
    .article-btn:hover i {
        transform: translateX(4px);
    }
    
    .article-carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
    
    .indicator {
        width: 12px;
        height: 12px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .indicator.active {
        background-color: white;
    }
    
    .no-content {
        color: white;
        padding: 40px;
        text-align: center;
    }
    
    /* CSS para placeholder */
    .article-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: rgba(175, 240, 237, 0.1);
        color: #AFF0ED;
        text-align: center;
        padding: 20px;
    }

    .article-placeholder i {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.6;
    }

    .article-placeholder span {
        font-size: 16px;
        font-weight: 500;
        opacity: 0.8;
    }
    
    /* Responsiveness */
    @media (max-width: 1200px) {
        .content-wrapper {
            gap: 40px;
        }
        
        .section-title-h {
            font-size: 40px;
        }
        
        .article-carousel-item {
            max-width: 500px;
            height: 350px;
        }
    }
    
    @media (max-width: 992px) {
        .content-wrapper {
            flex-direction: column;
            gap: 50px;
        }
        
        .text-section {
            max-width: 100%;
            text-align: left;
        }
        
        .carousel-section-holofote {
            max-width: 100%;
        }
        
        .article-carousel-item {
            max-width: 600px;
            height: 380px;
        }
        
        .section-title-h {
            font-size: 36px;
        }
    
        .gradiente-rigth,
        .gradiente-left {
            display: none;
        }

        .break-pa{
            text-align: left;
            margin: 0;
            margin-bottom: 20px;
            font-size: 2rem;
        }
    }
    
    @media (max-width: 768px) {
        .article-preview {
            padding: 60px 0;
        }
            .article-carousel-content {
                width: 100%;
            }
        
        .container-holofote {
            padding: 0 20px;
        }
        
        .content-wrapper {
            gap: 40px;
        }
        
        .article-carousel-item {
            max-width: 500px;
            height: 340px;
        }
        
        .article-title {
            font-size: 22px;
        }
        
        .section-title-h{
            font-size: 32px;
        }
        
        .section-subtitle {
            font-size: 18px;
        }
        
        .description-text {
            font-size: 15px;
        }
        
        .feature-item {
            font-size: 15px;
        }
    }
    
    @media (max-width: 480px) {
        .article-preview {
            padding: 0px 0;
        }
        
        .article-carousel-item {
            max-width: 85vw;
            height: 60vh;
        }
        
        .article-title {
            font-size: 20px;
        }
        
        .article-description {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            overflow: hidden;
        }
        
        .article-btn {
            padding: 8px 16px;
            font-size: 13px;
        }
        
        .section-title-h {
            font-size: 28px;
        }
        
        .section-subtitle {
            font-size: 16px;
        }
        
        .description-text {
            font-size: 14px;
        }
        
        .features-list {
            gap: 12px;
        }
        
        .feature-item {
            font-size: 14px;
        }
    }
</style>

<section class="article-preview">
    <div class="container-holofote" id="holofote-home">
        <p class="break-pa">{{ value.section_label }}</p>
        <div class="content-wrapper">
            <!-- Seção de Texto (Lado Esquerdo) -->
            <div class="text-section">
                <h2 class="section-title-h">{{ value.title }}</h2>
                <p class="section-subtitle">{{ value.subtitle }}</p>
                <div class="text-content">
                    <div class="features-list">
                        {% for feature in value.features %}
                        <div class="feature-item">
                            {% if feature.icon %}<i class="{{ feature.icon }}"></i>{% endif %}
                            <span>{{ feature.text }}</span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <div class="carousel-section-holofote">
                <div class="article-carousel-container" id="article-carousel-container">
                    <div class="gradiente-rigth"></div>
                    <div class="gradiente-left"></div>
                    <div class="article-carousel-items" id="article-carousel-items">
                        {% for page in pages %}
                        <div class="article-carousel-item">
                            <div class="article-carousel-item-content">
                                <div class="overlay-holofote"></div>
                                <div class="article-carousel-image">
                                    {% comment %}BUSCA IMAGEM NO BACKGROUND_MEDIA DO CITIZEN SERVER{% endcomment %}
                                    
                                    {% if page.body and page.body|length > 0 %}
                                        {% for block in page.body %}
                                            {% if block.block_type == 'citizen_server' %}
                                                {% for media_block in block.value.background_media %}
                                                    {% if media_block.block_type == 'image' and media_block.value %}
                                                        {% image media_block.value fill-600x380 format-webp preserve-svg as card_img %}
                                                        <a href="{% pageurl page %}" title="{{ page.title }}" class="image-link">
                                                            <img class="article-img" src="{{ card_img.url }}" alt="{{ page.title }}">
                                                        </a>
                                                    {% elif media_block.block_type == 'video' and media_block.value %}
                                                        <a href="{% pageurl page %}" title="{{ page.title }}" class="image-link">
                                                            <video class="article-video" autoplay muted loop playsinline>
                                                                <source src="{{ media_block.value.url }}" type="video/mp4">
                                                            </video>
                                                        </a>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                    {% else %}
                                        <a href="{% pageurl page %}" title="{{ page.title }}" class="image-link">
                                            <div class="article-placeholder">
                                                <i class="fa-regular fa-image"></i>
                                                <span>Adicione CitizenServer com imagem</span>
                                            </div>
                                        </a>
                                    {% endif %}
                                </div>
                                
                                <div class="article-carousel-content">
                                    <h3 class="article-title">
                                        <a class="article-title" href="{% pageurl page %}">{{ page.title }}</a>
                                    </h3>
                                    <p class="article-description">
                                        {% if page.search_description %}
                                            {{ page.search_description|truncatechars:100 }}
                                        {% else %}
                                            Explore este conteúdo especialmente selecionado.
                                        {% endif %}
                                    </p>
                                    <a href="{% pageurl page %}" class="article-btn">
                                        Explorar conteúdo
                                        <i class="fa-solid fa-circle-chevron-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="article-carousel-item">
                            <div class="no-content-wrapper">
                                <i class="fa-regular fa-folder-open"></i>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="article-carousel-indicators" id="article-carousel-indicators">
                    {% for page in pages %}
                    <button class="indicator {% if forloop.first %}active{% endif %}" 
                            data-index="{{ forloop.counter0 }}" 
                            aria-label="Ir para slide {{ forloop.counter }}"></button>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const carouselContainer = document.getElementById('article-carousel-container');
        const carousel = document.getElementById('article-carousel-items');
        const items = carousel.querySelectorAll('.article-carousel-item');
        const indicatorsContainer = document.getElementById('article-carousel-indicators');
        let indicators = Array.from(indicatorsContainer.querySelectorAll('.indicator'));
        
        let currentIndex = 0;
        let startX, moveX, initialPosition;
        let isDragging = false;
        
        const totalItems = items.length;
        
        // Clone items for infinite scroll effect
        function setupInfiniteCarousel() {
            // Clone the first few items and add to the end
            for (let i = 0; i < Math.min(totalItems, 3); i++) {
                const clone = items[i].cloneNode(true);
                clone.classList.add('clone');
                carousel.appendChild(clone);
            }
            
            // Clone the last few items and add to the beginning
            for (let i = Math.max(0, totalItems - 3); i < totalItems; i++) {
                const clone = items[i].cloneNode(true);
                clone.classList.add('clone', 'prepend-clone');
                carousel.prepend(clone);
            }
        }
        
        // Call setup function
        if (totalItems > 1) {
            setupInfiniteCarousel();
        }
        
        // Get all items including clones
        const allItems = carousel.querySelectorAll('.article-carousel-item');
        const prependCount = carousel.querySelectorAll('.prepend-clone').length;
        
        // Item width based on screen size
        function getItemWidth() {
            if (window.innerWidth <= 480) {
                return Math.min(carouselContainer.offsetWidth * 0.85, 350);
            } else if (window.innerWidth <= 768) {
                return 500;
            } else if (window.innerWidth <= 992) {
                return 600;
            } else if (window.innerWidth <= 1200) {
                return 500;
            } else {
                return 600;
            }
        }
        
        // Gap between items
        const itemsGap = 20;
        
        // Show slide at specific index
        function showSlide(index, immediate = false) {
            const itemWidth = getItemWidth();
            const containerWidth = carouselContainer.offsetWidth;
            const centerOffset = (containerWidth - itemWidth) / 2;
            
            // Handle infinite scroll cycling
            if (index < 0) {
                // Going left beyond first slide
                currentIndex = totalItems - 1;
                
                // First transition to the clone without animation
                carousel.style.transition = 'none';
                const position = (prependCount + totalItems - 1) * (itemWidth + itemsGap) - centerOffset;
                carousel.style.transform = `translateX(-${position}px)`;
                
                // Force reflow to ensure the position change happens immediately
                carousel.offsetHeight;
                
                // Then animate to the original slide
                setTimeout(() => {
                    carousel.style.transition = 'transform 0.3s ease-in-out';
                    const newPosition = (prependCount + currentIndex) * (itemWidth + itemsGap) - centerOffset;
                    carousel.style.transform = `translateX(-${newPosition}px)`;
                }, 10);
                
            } else if (index >= totalItems) {
                // Going right beyond last slide
                currentIndex = 0;
                
                // First transition to the clone without animation
                carousel.style.transition = 'none';
                const position = prependCount * (itemWidth + itemsGap) - centerOffset;
                carousel.style.transform = `translateX(-${position}px)`;
                
                // Force reflow to ensure the position change happens immediately
                carousel.offsetHeight;
                
                // Then animate to the original slide
                setTimeout(() => {
                    carousel.style.transition = 'transform 0.3s ease-in-out';
                    const newPosition = (prependCount + currentIndex) * (itemWidth + itemsGap) - centerOffset;
                    carousel.style.transform = `translateX(-${newPosition}px)`;
                }, 10);
                
            } else {
                // Normal slide transition
                currentIndex = index;
                if (immediate) {
                    carousel.style.transition = 'none';
                } else {
                    carousel.style.transition = 'transform 0.3s ease-in-out';
                }
                
                const offset = (prependCount + currentIndex) * (itemWidth + itemsGap) - centerOffset;
                carousel.style.transform = `translateX(-${offset}px)`;
                
                if (immediate) {
                    // Force reflow to ensure the position change happens immediately
                    carousel.offsetHeight;
                    carousel.style.transition = 'transform 0.3s ease-in-out';
                }
            }
            
            // Update indicators
            indicators.forEach((indicator, i) => {
                indicator.classList.toggle('active', i === currentIndex);
            });
        }
        
        // Set up indicators if needed
        if (indicators.length === 0 && items.length > 0) {
            // Clear previous indicators
            indicatorsContainer.innerHTML = '';
            
            // Create new indicators
            for (let i = 0; i < items.length; i++) {
                const indicator = document.createElement('button');
                indicator.classList.add('indicator');
                indicator.setAttribute('data-index', i);
                indicatorsContainer.appendChild(indicator);
                
                indicator.addEventListener('click', () => {
                    showSlide(i);
                });
            }
            
            // Update indicators array
            indicators = Array.from(indicatorsContainer.querySelectorAll('.indicator'));
        }
        
        // Add click events to indicators
        indicators.forEach((indicator, i) => {
            indicator.addEventListener('click', () => {
                showSlide(i);
            });
        });
        
        // Set first indicator as active
        if (indicators.length > 0) {
            indicators[0].classList.add('active');
        }
        
        // Touch events for mobile
        carousel.addEventListener('touchstart', handleStart, { passive: true });
        carousel.addEventListener('touchmove', handleMove, { passive: true });
        carousel.addEventListener('touchend', handleEnd, { passive: true });
        
        // Mouse events for desktop
        carousel.addEventListener('mousedown', handleStart);
        carousel.addEventListener('mousemove', handleMove);
        carousel.addEventListener('mouseup', handleEnd);
        carousel.addEventListener('mouseleave', handleEnd);
        
        function handleStart(e) {
            isDragging = true;
            startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
            
            // Calculate current position based on transform
            const transform = carousel.style.transform;
            const translateXMatch = transform.match(/translateX\(-?(\d+(\.\d+)?)px\)/);
            initialPosition = translateXMatch ? parseFloat(translateXMatch[1]) : 0;
            
            // Disable transition during drag
            carousel.style.transition = 'none';
        }
        
        function handleMove(e) {
            if (!isDragging) return;
            
            moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
            const diff = moveX - startX;
            
            // Move carousel with dragging
            carousel.style.transform = `translateX(-${initialPosition - diff}px)`;
        }
        
        function handleEnd() {
            if (!isDragging) return;
            isDragging = false;
            
            // Restore transition
            carousel.style.transition = 'transform 0.3s ease-in-out';
            
            const diff = moveX - startX;
            const threshold = getItemWidth() / 4; // 25% of item width for swipe
            
            if (diff > threshold) {
                showSlide(currentIndex - 1);
            } else if (diff < -threshold) {
                showSlide(currentIndex + 1);
            } else {
                showSlide(currentIndex);
            }
        }
        
        // Function to automatically move the carousel
        function autoAdvance() {
            showSlide(currentIndex + 1);
        }
        
        // Set auto-advance timer
        let autoAdvanceTimer = setInterval(autoAdvance, 5000);
        
        // Pause auto-advance on hover or touch
        carouselContainer.addEventListener('mouseenter', () => {
            clearInterval(autoAdvanceTimer);
        });
        
        carouselContainer.addEventListener('mouseleave', () => {
            autoAdvanceTimer = setInterval(autoAdvance, 5000);
        });
        
        carouselContainer.addEventListener('touchstart', () => {
            clearInterval(autoAdvanceTimer);
        });
        
        carouselContainer.addEventListener('touchend', () => {
            autoAdvanceTimer = setInterval(autoAdvance, 5000);
        });
        
        // Fix for links inside carousel
        const links = carousel.querySelectorAll('a');
        links.forEach(link => {
            link.addEventListener('click', function(e) {
                if (isDragging || (moveX && Math.abs(moveX - startX) > 10)) {
                    e.preventDefault();
                }
            });
        });
        
        // Update item widths based on screen size
        function updateItemWidths() {
            const newWidth = getItemWidth();
            allItems.forEach(item => {
                item.style.width = `${newWidth}px`;
                item.style.maxWidth = `${newWidth}px`;
            });
            
            // Ensure carousel position is updated
            showSlide(currentIndex, true);
        }
        
        // Initialize carousel
        updateItemWidths();
        
        // Start with the first slide centered
        setTimeout(() => {
            showSlide(0, true);
        }, 0);
        
        // Update on window resize
        window.addEventListener('resize', function() {
            setTimeout(() => {
                updateItemWidths();
            }, 100);
        });
    });
</script>

{% endblock %}