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

{% with carousel_id="carousel-snippet-unique" %}
<section class="carousel-responsivo{% if value.largura_container == 'limitador' %} carousel-responsivo--limitado{% endif %}" 
         data-autoplay="{{ value.autoplay }}" 
         data-interval="{{ value.intervalo_autoplay }}"
         data-efeito="{{ value.efeito_transicao }}"
         style="--carousel-height-desktop: {{ value.altura_desktop }}; --carousel-height-mobile: {{ value.altura_mobile }};">
    
    {% if value.titulo_secao %}
    <div class="{% if value.largura_container == 'limitador' %} {% endif %}">
        <h2 class="carousel-responsivo__title">{{ value.titulo_secao }}</h2>
    </div>
    {% endif %}
    
    <div class="carousel-responsivo__container{% if value.largura_container == 'limitador' %} {% endif %}" 
         id="{{ carousel_id }}"
         data-carousel-type="snippet">
        
        <!-- Slides -->
        <div class="carousel-responsivo__slides" 
             role="region" 
             aria-label="Carrossel de imagens"
             aria-roledescription="carrossel">
            {% for slide_block in value.slides %}
                {% if slide_block.block_type == 'slide' %}
                    {% with slide=slide_block.value %}
                    <div class="carousel-responsivo__slide carousel-responsivo__slide--{{ slide.posicao_texto }} carousel-responsivo__slide--{{ slide.cor_tema }}"
                         {% if forloop.first %}data-active="true" aria-hidden="false"{% else %}aria-hidden="true"{% endif %}
                         role="group"
                         aria-roledescription="slide"
                         aria-label="Slide {{ forloop.counter }} de {{ value.slides|length }}">
                        
                        <!-- Imagem Responsiva -->
                        {% if slide.imagem_desktop and slide.imagem_mobile %}
                            {% image slide.imagem_desktop fill-1920x600 as img_desktop %}
                            {% image slide.imagem_mobile fill-768x600 as img_mobile %}
                            <picture class="carousel-responsivo__picture">
                                <source media="(min-width: 768px)" srcset="{{ img_desktop.url }}">
                                <img src="{{ img_mobile.url }}" 
                                     alt="{% if slide.titulo %}{{ slide.titulo }}{% else %}Imagem do slide {{ forloop.counter }}{% endif %}" 
                                     class="carousel-responsivo__image"
                                     loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
                                     decoding="{% if forloop.first %}sync{% else %}async{% endif %}">
                            </picture>
                        {% elif slide.imagem_desktop %}
                            {% image slide.imagem_desktop fill-1920x600 as img_desktop %}
                            <img src="{{ img_desktop.url }}" 
                                 alt="{% if slide.titulo %}{{ slide.titulo }}{% else %}Imagem do slide {{ forloop.counter }}{% endif %}" 
                                 class="carousel-responsivo__image"
                                 loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
                                 decoding="{% if forloop.first %}sync{% else %}async{% endif %}">
                        {% endif %}
                    
                        
                        <!-- Conteúdo -->
                        <div class="carousel-responsivo__content">
                            <div class="container-out">
                                <div class="carousel-responsivo__text-wrapper">
                                    {% if slide.titulo %}
                                    <h3 class="carousel-responsivo__slide-title">{{ slide.titulo }}</h3>
                                    {% endif %}
                                    
                                    {% if slide.subtitulo %}
                                    <p class="carousel-responsivo__slide-subtitle">{{ slide.subtitulo }}</p>
                                    {% endif %}
                                    
                                    {% if slide.texto %}
                                    <div class="carousel-responsivo__slide-text">
                                        {{ slide.texto|richtext }}
                                    </div>
                                    {% endif %}
                                    
                                    {% if slide.link_texto %}
                                            {% if slide.link_interno %}
                                                {% with link_url=slide.link_interno.url %}
                                                    <div class="carousel-responsivo__slide-actions">
                                                        <a href="{{ link_url }}" 
                                                        class="carousel-responsivo__slide-button"
                                                        aria-label="{{ slide.link_texto }}">
                                                            {{ slide.link_texto }}
                                                            <span class="carousel-responsivo__slide-button-icon" aria-hidden="true">→</span>
                                                        </a>
                                                    </div>
                                                {% endwith %}
                                            {% elif slide.link_url %}
                                                {% with link_url=slide.link_url %}
                                                    <div class="carousel-responsivo__slide-actions">
                                                        <a href="{{ link_url }}" 
                                                        class="carousel-responsivo__slide-button"
                                                        target="_blank" rel="noopener noreferrer"
                                                        aria-label="{{ slide.link_texto }} (abre em nova aba)">
                                                            {{ slide.link_texto }}
                                                            <span class="carousel-responsivo__slide-button-icon" aria-hidden="true">→</span>
                                                        </a>
                                                    </div>
                                                {% endwith %}
                                            {% endif %}
                                        {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endwith %}
                {% endif %}
            {% endfor %}
        </div>
        
        <!-- Navegação com melhor acessibilidade -->
        {% if value.mostrar_navegacao and value.slides|length > 1 %}
        <button class="carousel-responsivo__nav carousel-responsivo__nav--prev" 
                type="button"
                aria-label="Ir para o slide anterior"
                aria-controls="{{ carousel_id }}">
            <span aria-hidden="true">‹</span>
        </button>
        <button class="carousel-responsivo__nav carousel-responsivo__nav--next" 
                type="button"
                aria-label="Ir para o próximo slide"
                aria-controls="{{ carousel_id }}">
            <span aria-hidden="true">›</span>
        </button>
        {% endif %}
        
        <!-- Indicadores com IDs únicos -->
        {% if value.mostrar_indicators and value.slides|length > 1 %}
        <div class="carousel-responsivo__indicators" 
             role="tablist"
             aria-label="Slides do carrossel">
            {% for slide in value.slides %}
            <button class="carousel-responsivo__indicator"
                    type="button"
                    role="tab"
                    id="{{ carousel_id }}-tab-{{ forloop.counter }}"
                    aria-label="Ir para slide {{ forloop.counter }}{% if slide.block_type == 'slide' and slide.value.titulo %}: {{ slide.value.titulo }}{% endif %}"
                    aria-controls="{{ carousel_id }}"
                    data-slide="{{ forloop.counter0 }}"
                    {% if forloop.first %}aria-selected="true" tabindex="0"{% else %}aria-selected="false" tabindex="-1"{% endif %}>
                <span class="sr-only">Slide {{ forloop.counter }}{% if slide.block_type == 'slide' and slide.value.titulo %}: {{ slide.value.titulo }}{% endif %}</span>
            </button>
            {% endfor %}
        </div>
        {% endif %}
        
        <!-- Live region para anúncios -->
        <div class="sr-only" 
             aria-live="polite" 
             aria-atomic="true" 
             id="{{ carousel_id }}-status">
            Slide 1 de {{ value.slides|length }}{% if value.slides.0.block_type == 'slide' and value.slides.0.value.titulo %}: {{ value.slides.0.value.titulo }}{% endif %}
        </div>
    </div>
</section>

<style>
    .carousel-responsivo--limitado {
        max-width: 1142px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px;
    }
    
    .carousel-responsivo--limitado .carousel-responsivo__container {
        width: 100%;
        border-radius: 20px;
    }

    .container-out{
        max-width: 1142px;
        margin: 0 auto;
        padding: 0 5rem;
    }
.carousel-responsivo__title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--enap-primary-color, #024248);
}

.carousel-responsivo__container {
    position: relative;
    width: 100%;
    height: var(--carousel-height-mobile);
    overflow: hidden;
}

@media (min-width: 768px) {
    .carousel-responsivo__container {
        height: var(--carousel-height-desktop);
    }
}


.carousel-responsivo__slide[data-active="true"] {
    opacity: 1;
}

/* Efeito Fade */
.carousel-responsivo[data-efeito="fade"] .carousel-responsivo__slide {
    transition: opacity 0.8s ease-in-out;
}

/* Efeito Slide */
.carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide {
    transform: translateX(100%);
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.carousel-responsivo[data-efeito="slide"] .carousel-responsivo__slide[data-active="true"] {
    transform: translateX(0);
}

.carousel-responsivo__slide-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--enap-primary-color, #024248);
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.carousel-responsivo__slide-button:hover,
.carousel-responsivo__slide-button:focus {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    outline: 2px solid var(--enap-primary-color, #024248);
    outline-offset: 2px;
}

.carousel-responsivo__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #006969;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px solid white;
}

.carousel-responsivo__nav:hover {
    background: #025257;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Estado de foco (selecionado com tab) */
.carousel-responsivo__nav:focus {
    background: #006969;
}

/* Estado de pressing (botão sendo pressionado) */
.carousel-responsivo__nav:active {
    background: #024248;
}

/* Temas de cores */
.carousel-responsivo__slide--primary {
    --theme-color: var(--enap-primary-color, #024248);
}

.carousel-responsivo__slide--secondary {
    --theme-color: var(--enap-secondary-color, #424242);
}

.carousel-responsivo__slide--light {
    --theme-color: #ffffff;
}

.carousel-responsivo__slide--dark {
    --theme-color: #1a1a1a;
}
@media (max-width: 480px) {
    .container-out {
        padding: 0 2rem;
    }

    .carousel-responsivo__nav {
        top: 90%;
    }
}

</style>


<script>
document.addEventListener('DOMContentLoaded', function() {
    // CORREÇÃO: Buscar especificamente carousels do tipo snippet
    const carousels = document.querySelectorAll('[data-carousel-type="snippet"]');
    
    carousels.forEach(function(carousel) {
        const slides = carousel.querySelectorAll('.carousel-responsivo__slide');
        const indicators = carousel.querySelectorAll('.carousel-responsivo__indicator');
        const prevBtn = carousel.querySelector('.carousel-responsivo__nav--prev');
        const nextBtn = carousel.querySelector('.carousel-responsivo__nav--next');
        const carouselSection = carousel.closest('.carousel-responsivo');
        const statusElement = carousel.querySelector('[aria-live]');
        
        if (slides.length <= 1) return;
        
        let currentSlide = 0;
        let autoplayTimer = null;
        
        const autoplay = carouselSection.dataset.autoplay === 'true';
        const interval = parseInt(carouselSection.dataset.interval) * 1000 || 5000;
        const efeito = carouselSection.dataset.efeito || 'slide';
        
        function updateStatus() {
            if (statusElement) {
                const currentSlideElement = slides[currentSlide];
                const title = currentSlideElement.querySelector('.carousel-responsivo__slide-title');
                const titleText = title ? title.textContent : 'Slide sem título';
                statusElement.textContent = `Slide ${currentSlide + 1} de ${slides.length}: ${titleText}`;
            }
        }
        
        function showSlide(index) {
            // Remove active state from current slide
            slides[currentSlide].setAttribute('data-active', 'false');
            slides[currentSlide].setAttribute('aria-hidden', 'true');
            if (indicators[currentSlide]) {
                indicators[currentSlide].setAttribute('aria-selected', 'false');
                indicators[currentSlide].setAttribute('tabindex', '-1');
            }
            
            // Set new current slide
            currentSlide = index;
            
            // Add active state to new slide
            slides[currentSlide].setAttribute('data-active', 'true');
            slides[currentSlide].setAttribute('aria-hidden', 'false');
            if (indicators[currentSlide]) {
                indicators[currentSlide].setAttribute('aria-selected', 'true');
                indicators[currentSlide].setAttribute('tabindex', '0');
            }
            
            // Update screen reader status
            updateStatus();
        }
        
        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);
                autoplayTimer = null;
            }
        }
        
        // Event listeners para navegação
        if (nextBtn) {
            nextBtn.addEventListener('click', function() {
                stopAutoplay();
                nextSlide();
                startAutoplay();
            });
        }
        
        if (prevBtn) {
            prevBtn.addEventListener('click', function() {
                stopAutoplay();
                prevSlide();
                startAutoplay();
            });
        }
        
        // Event listeners para indicadores
        indicators.forEach(function(indicator, index) {
            indicator.addEventListener('click', function() {
                stopAutoplay();
                showSlide(index);
                startAutoplay();
                indicator.focus();
            });
        });
        
        // Pause autoplay on hover
        carousel.addEventListener('mouseenter', stopAutoplay);
        carousel.addEventListener('mouseleave', startAutoplay);
        
        // CORREÇÃO #7: Navegação por teclado melhorada
        carousel.addEventListener('keydown', function(e) {
            const focusedElement = document.activeElement;
            
            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                stopAutoplay();
                prevSlide();
                startAutoplay();
            } else if (e.key === 'ArrowRight') {
                e.preventDefault();
                stopAutoplay();
                nextSlide();
                startAutoplay();
            } else if (e.key === 'Home' && focusedElement.classList.contains('carousel-responsivo__indicator')) {
                e.preventDefault();
                stopAutoplay();
                showSlide(0);
                indicators[0].focus();
                startAutoplay();
            } else if (e.key === 'End' && focusedElement.classList.contains('carousel-responsivo__indicator')) {
                e.preventDefault();
                stopAutoplay();
                showSlide(slides.length - 1);
                indicators[slides.length - 1].focus();
                startAutoplay();
            }
        });
        
        // CORREÇÃO #8: Touch/Swipe support melhorado
        let startX = 0;
        let endX = 0;
        let startY = 0;
        let endY = 0;
        
        carousel.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        });
        
        carousel.addEventListener('touchend', function(e) {
            endX = e.changedTouches[0].clientX;
            endY = e.changedTouches[0].clientY;
            handleSwipe();
        });
        
        function handleSwipe() {
            const swipeThreshold = 50;
            const diffX = startX - endX;
            const diffY = startY - endY;
            
            // Verificar se é um swipe horizontal (não vertical)
            if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > swipeThreshold) {
                stopAutoplay();
                if (diffX > 0) {
                    nextSlide();
                } else {
                    prevSlide();
                }
                startAutoplay();
            }
        }
        
        // Inicializar status
        updateStatus();
        
        // Start autoplay
        startAutoplay();
    });
});
</script>
{% endwith %}