{% load css_tags %}{% block_css 'enap_designsystem/blocks/carousel_images.css' %}
<!-- templates/blocks/carousel_images.html -->
{% load wagtailimages_tags %}

{% load wagtailcore_tags wagtailimages_tags %}
{% load static %}

<section class="enap-carousel" 
        data-autoplay="{{ value.autoplay|yesno:'true,false' }}"
        data-interval="{{ value.intervalo_autoplay }}000"
        data-effect="{{ value.efeito_transicao }}"
        style="--altura-desktop: {{ value.altura_desktop }}; --altura-mobile: {{ value.altura_mobile }};">
    
        <div class="carousel-container {{ value.largura_container }}">
        <div class="carousel-wrapper">
            
            <!-- Slides -->
            <div class="carousel-slides">
                {% for slide in value.slides %}
                    <div class="carousel-slide {% if forloop.first %}active{% endif %}"
                        data-slide="{{ forloop.counter0 }}">
                        
                        <!-- Imagem Desktop -->
                        {% if slide.imagem_desktop %}
                            {% image slide.imagem_desktop original as img_desktop %}
                            <div class="slide-image desktop-image">
                                <img src="{{ img_desktop.url }}" alt="{{ slide.titulo|default:'Slide' }}" />
                            </div>
                        {% else %}
                            <div class="slide-image desktop-image">
                                <img src="{% static 'enap_designsystem/blocks/suap/default_1.png' %}" alt="Imagem padrão com logo da Enap e fundo verde" />
                            </div>
                        {% endif %}
                        
                        <!-- Imagem Mobile -->
                        {% if slide.imagem_mobile %}
                            {% image slide.imagem_mobile original as img_mobile %}
                            <div class="slide-image mobile-image">
                                <img src="{{ img_mobile.url }}" alt="{{ slide.titulo|default:'Slide' }}" />
                            </div>
                        {% else %}
                            <div class="slide-image mobile-image">
                                <img src="{% static 'enap_designsystem/blocks/suap/default_1.png' %}" alt="Imagem padrão com logo da Enap e fundo verde" />
                            </div>
                        {% endif %}
                        
                        <!-- Overlay -->
                        {% if slide.overlay_escuro %}
                            <div class="slide-overlay"></div>
                        {% endif %}
                        
                        <!-- Conteúdo do Slide -->
                        {% if slide.titulo or slide.subtitulo or slide.texto_botao %}
                            <div class="slide-content {{ slide.posicao_conteudo }}">
                                <div class="content-wrapper">
                                    
                                    {% if slide.titulo %}
                                        <h2 class="slide-title" style="color: {{ slide.cor_titulo }};">
                                            {{ slide.titulo }}
                                        </h2>
                                    {% endif %}
                                    
                                    {% if slide.subtitulo %}
                                    <div class="slide-subtitle" style="color: {{ slide.cor_subtitulo }} !important;">
                                    {{ slide.subtitulo|safe }}
                                </div>
                                    {% endif %}
                                    {% if slide.links %}
                                            <div class="slide-additional-buttons">
                                                {% for item in slide.links %}
                                                    <div class="debug-button-info">
                                                        <!-- Depuração simples -->
                                                    {{ item }}

                                                    </div>
                                                    
                                                    <!-- Renderização tentativa -->
                                                
                                                {% endfor %}
                                            </div>
                                        {% endif %}
                                    
                                    {% if slide.texto_botao %}
                                        <div class="slide-button-wrapper">
                                            {% if slide.link_botao %}
                                                <a href="{{ slide.link_botao }}" 
                                                    class="btn {{ slide.estilo_botao }} {{ slide.tamanho_botao }}"
                                                    {% if slide.estilo_botao == 'personalizado' %}
                                                    style="background-color: {{ slide.cor_fundo_botao }}; color: {{ slide.cor_texto_botao }}; border-color: {{ slide.cor_borda_botao }};"
                                                    {% elif slide.estilo_botao == 'outline' %}
                                                    style="border-color: {{ slide.cor_borda_botao }}; color: {{ slide.cor_borda_botao }};"
                                                    {% endif %}>
                                                    {{ slide.texto_botao }}
                                                </a>
                                            {% else %}
                                                <button class="btn {{ slide.estilo_botao }} {{ slide.tamanho_botao }}"
                                                        {% if slide.estilo_botao == 'personalizado' %}
                                                        style="background-color: {{ slide.cor_fundo_botao }}; color: {{ slide.cor_texto_botao }}; border-color: {{ slide.cor_borda_botao }};"
                                                        {% elif slide.estilo_botao == 'outline' %}
                                                        style="border-color: {{ slide.cor_borda_botao }}; color: {{ slide.cor_borda_botao }};"
                                                        {% endif %}>
                                                    {{ slide.texto_botao }}
                                                </button>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                    
                                </div>
                            </div>
                        {% endif %}
                        
                    </div>
                {% endfor %}
            </div>
            
            <!-- Setas de Navegação -->
            {% if value.mostrar_setas and value.slides|length > 1 %}
                <button class="carousel-arrow prev" onclick="changeSlide(-1)">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
                <button class="carousel-arrow next" onclick="changeSlide(1)">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2"/>
                    </svg>
                </button>
            {% endif %}
            
        </div>
        
        <!-- Indicadores -->
        {% if value.mostrar_indicadores and value.slides|length > 1 %}
            <div class="carousel-indicators">
                {% for slide in value.slides %}
                    <button class="indicator {% if forloop.first %}active{% endif %}"
                            onclick="goToSlide({{ forloop.counter0 }})"
                            data-slide="{{ forloop.counter0 }}">
                    </button>
                {% endfor %}
            </div>
        {% endif %}
        
    </div>
</section>

<style>
.enap-carousel {
    position: relative;
    width: 100%;
    height: var(--altura-desktop);
    overflow: hidden;
}

/* Adicione isso dentro da tag <style> no final do arquivo */
    .slide-additional-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    /* Alinhamento conforme posição do conteúdo */
    .centro .slide-additional-buttons {
        justify-content: center;
    }
    
    .esquerda .slide-additional-buttons {
        justify-content: flex-start;
    }
    
    .direita .slide-additional-buttons {
        justify-content: flex-end;
    }
    
    .inferior-centro .slide-additional-buttons {
        justify-content: center;
    }
    
    .inferior-esquerda .slide-additional-buttons {
        justify-content: flex-start;
    }
    
    .inferior-direita .slide-additional-buttons {
        justify-content: flex-end;
    }

@media (max-width: 768px) {
    .enap-carousel {
        height: var(--altura-mobile);
    }
}

.slide-subtitle {
    color: {{ slide.cor_subtitulo }};
    font-size: 1.2rem;
    margin: 0 0 24px 0;
    opacity: 0.95;
    line-height: 1.4;
}

.carousel-container.limitador {
    max-width: 1142px;
    margin: 0 auto;
    padding: 0 20px;
}

.carousel-container.tela_toda {
    width: 100vw;
    max-width: none;
    border-radius: 0;
}

blockquote {
    border-left: 4px solid #024248;
    padding: 10px 20px;
    margin: 20px 0;
    font-style: italic;
    position: relative;
}

blockquote strong,
blockquote b {
    color: #024248;  
    font-weight: bold;
}

blockquote p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}

/* Variação mais simples */
blockquote.simples {
    border-left: 3px solid #ddd;
    padding-left: 10px;
    margin: 20px 0;
    font-style: italic;
}

@media (max-width: 768px) {
    .slide-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .slide-content {
        width: 100%;
    }
}

</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.querySelector('.enap-carousel');
    if (!carousel) return;
    
    const slides = carousel.querySelectorAll('.carousel-slide');
    const indicators = carousel.querySelectorAll('.indicator');
    const autoplay = carousel.dataset.autoplay === 'true';
    const interval = parseInt(carousel.dataset.interval) || 5000;
    
    let currentSlide = 0;
    let autoplayTimer;
    
    function showSlide(index) {
        // Remove active class from all slides and indicators
        slides.forEach(slide => slide.classList.remove('active'));
        indicators.forEach(indicator => indicator.classList.remove('active'));
        
        // Add active class to current slide and indicator
        if (slides[index]) {
            slides[index].classList.add('active');
        }
        if (indicators[index]) {
            indicators[index].classList.add('active');
        }
        
        currentSlide = index;
    }
    
    function nextSlide() {
        const next = (currentSlide + 1) % slides.length;
        showSlide(next);
    }
    
    function prevSlide() {
        const prev = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(prev);
    }
    
    function startAutoplay() {
        if (autoplay && slides.length > 1) {
            autoplayTimer = setInterval(nextSlide, interval);
        }
    }
    
    function stopAutoplay() {
        if (autoplayTimer) {
            clearInterval(autoplayTimer);
        }
    }
    
    // Global functions for navigation
    window.changeSlide = function(direction) {
        stopAutoplay();
        if (direction > 0) {
            nextSlide();
        } else {
            prevSlide();
        }
        startAutoplay();
    };
    
    window.goToSlide = function(index) {
        stopAutoplay();
        showSlide(index);
        startAutoplay();
    };
    
    // Pause autoplay on hover
    carousel.addEventListener('mouseenter', stopAutoplay);
    carousel.addEventListener('mouseleave', startAutoplay);
    
    // Touch/swipe support
    let startX = 0;
    let endX = 0;
    
    carousel.addEventListener('touchstart', function(e) {
        startX = e.touches[0].clientX;
    });
    
    carousel.addEventListener('touchend', function(e) {
        endX = e.changedTouches[0].clientX;
        const diff = startX - endX;
        
        if (Math.abs(diff) > 50) {
            stopAutoplay();
            if (diff > 0) {
                nextSlide();
            } else {
                prevSlide();
            }
            startAutoplay();
        }
    });
    
    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowLeft') {
            window.changeSlide(-1);
        } else if (e.key === 'ArrowRight') {
            window.changeSlide(1);
        }
    });
    
    // Start autoplay
    startAutoplay();
});
</script>