{% extends "coderedcms/blocks/base_block.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block block_render %}
{% load static %}

<section class="news-section">
    <div class="news-header">
        <h2 class="h2-title">Notícias</h2>
        <h4 class="sub-title">Fique sabendo de tudo o que acontece na Enap</h4>
    </div>

    <!-- Desktop: Layout Original (COM LEGENDA HOME) -->
    <div class="news-grid-container desktop-only">
        {% for page in pages %}
            {% if forloop.first %}
                <!-- Notícia Principal (grande) -->
                <div class="news-grid-main">
                    <a href="{% pageurl page %}" class="news-main-link" title="{{ page.title }}">
                        <div class="news-main-image">
                            {% if page.specific.imagem_externa %}
                                {% image page.specific.imagem_externa original format-webp preserve-svg as main_img %}
                                <img class="img-fluid" src="{{ main_img.url }}" alt="{{ main_img.title }}">
                            {% elif page.specific.imagem_interna %}
                                {% image page.specific.imagem_interna original format-webp preserve-svg as main_img %}
                                <img class="img-fluid" src="{{ main_img.url }}" alt="{{ main_img.title }}">
                            {% elif page.cover_image %}
                                {% image page.cover_image original format-webp preserve-svg as main_img %}
                                <img class="img-fluid" src="{{ main_img.url }}" alt="{{ main_img.title }}">
                            {% else %}
                                <div class="no-image-placeholder main-placeholder">
                                    <i class="fa fa-image"></i>
                                    <span>Sem imagem</span>
                                </div>
                            {% endif %}
                            <div class="news-main-overlay">
                                <h3 class="news-main-title">{{ page.title }}</h3>
                                
                                {# NOVO: Usa legenda_home com fallbacks inteligentes #}
                                {% if page.specific.legenda_home %}
                                    <p class="news-main-text">{{ page.specific.legenda_home|truncatewords:25 }}</p>
                                {% elif page.specific.subtitulo %}
                                    <p class="news-main-text">{{ page.specific.subtitulo|truncatewords:25 }}</p>
                                {% elif page.specific.descricao_html %}
                                    <p class="news-main-text">{{ page.specific.descricao_html|striptags|truncatewords:25 }}</p>
                                {% else %}
                                    <p class="news-main-text">{{ page.body_preview|truncatewords:25 }}</p>
                                {% endif %}

                                <div class="news-main-date">
                                    <i class="fa fa-calendar"></i>
                                    {{ page.first_published_at|date:"d/m/Y" }}
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            {% else %}
                <!-- Primeira iteração das notícias secundárias -->
                {% if forloop.counter == 2 %}
                    <div class="news-grid-secondary">
                {% endif %}
                
                <!-- Notícias Secundárias (pequenas) -->
                <div class="news-secondary-item">
                    <div class="news-secondary-image">
                        {% if page.specific.imagem_externa %}
                            {% image page.specific.imagem_externa original format-webp preserve-svg as sec_img %}
                            <a href="{% pageurl page %}" title="{{ page.title }}">
                                <img class="img-fluid" src="{{ sec_img.url }}" alt="{{ sec_img.title }}">
                            </a>
                        {% elif page.specific.imagem_interna %}
                            {% image page.specific.imagem_interna original format-webp preserve-svg as sec_img %}
                            <a href="{% pageurl page %}" title="{{ page.title }}">
                                <img class="img-fluid" src="{{ sec_img.url }}" alt="{{ sec_img.title }}">
                            </a>
                        {% elif page.cover_image %}
                            {% image page.cover_image original format-webp format-webp preserve-svg as sec_img %}
                            <a href="{% pageurl page %}" title="{{ page.title }}">
                                <img class="img-fluid" src="{{ sec_img.url }}" alt="{{ sec_img.title }}">
                            </a>
                        {% else %}
                            <a href="{% pageurl page %}" title="{{ page.title }}">
                                <div class="no-image-placeholder secondary-placeholder">
                                    <i class="fa fa-image"></i>
                                </div>
                            </a>
                        {% endif %}
                    </div>
                    <a href="{% pageurl page %}">
                        <div class="news-secondary-content">
                            <h4 class="news-secondary-title">
                                {{ page.title }}
                            </h4>
                            
                            {# NOVO: Usa legenda_home com fallbacks inteligentes #}
                            {% if page.specific.legenda_home %}
                                <p class="news-secondary-text">{{ page.specific.legenda_home|truncatewords:15 }}</p>
                            {% elif page.specific.subtitulo %}
                                <p class="news-secondary-text">{{ page.specific.subtitulo|truncatewords:15 }}</p>
                            {% elif page.specific.descricao_html %}
                                <p class="news-secondary-text">{{ page.specific.descricao_html|striptags|truncatewords:15 }}</p>
                            {% else %}
                                <p class="news-secondary-text">{{ page.body_preview|truncatewords:15 }}</p>
                            {% endif %}

                            <div class="news-secondary-date">
                                <i class="fa fa-calendar"></i>
                                {{ page.first_published_at|date:"d/m/Y" }}
                            </div>
                        </div>
                    </a>
                </div>
            {% endif %}
        {% empty %}
            <div class="news-grid-main">
                <div class="no-news-message">
                    <p>Nenhuma notícia disponível no momento.</p>
                </div>
            </div>
        {% endfor %}
        
        <!-- Fechar div das notícias secundárias se houver pelo menos 2 notícias -->
        {% if pages|length > 1 %}
            </div>
        {% endif %}
    </div>

    <!-- Mobile: Carrossel COM LEGENDA HOME -->
    <div class="news-carousel-container mobile-only">
        <div class="news-carousel" id="newsCarousel">
            <div class="news-carousel-track" id="carouselTrack">
                {% for page in pages %}
                    <div class="news-carousel-slide">
                        <a href="{% pageurl page %}" class="news-carousel-link" title="{{ page.title }}">
                            <div class="news-carousel-image">
                                {% if page.specific.imagem_externa %}
                                    {% image page.specific.imagem_externa original format-webp preserve-svg as carousel_img %}
                                    <img class="img-fluid" src="{{ carousel_img.url }}" alt="{{ carousel_img.title }}">
                                {% elif page.specific.imagem_interna %}
                                    {% image page.specific.imagem_interna original format-webp preserve-svg as carousel_img %}
                                    <img class="img-fluid" src="{{ carousel_img.url }}" alt="{{ carousel_img.title }}">
                                {% elif page.cover_image %}
                                    {% image page.cover_image original format-webp preserve-svg as carousel_img %}
                                    <img class="img-fluid" src="{{ carousel_img.url }}" alt="{{ carousel_img.title }}">
                                {% else %}
                                    <div class="no-image-placeholder carousel-placeholder">
                                        <i class="fa fa-image"></i>
                                        <span>Sem imagem</span>
                                    </div>
                                {% endif %}
                                <div class="news-carousel-overlay">
                                    <div class="news-carousel-date">
                                        <i class="fa fa-calendar"></i>
                                        {{ page.first_published_at|date:"d/m/Y" }}
                                    </div>
                                    <h3 class="news-carousel-title">{{ page.title }}</h3>
                                    
                                    {# NOVO: Usa legenda_home com fallbacks inteligentes #}
                                    {% if page.specific.legenda_home %}
                                        <p class="news-carousel-text">{{ page.specific.legenda_home|truncatewords:20 }}</p>
                                    {% elif page.specific.subtitulo %}
                                        <p class="news-carousel-text">{{ page.specific.subtitulo|truncatewords:20 }}</p>
                                    {% elif page.specific.descricao_html %}
                                        <p class="news-carousel-text">{{ page.specific.descricao_html|striptags|truncatewords:20 }}</p>
                                    {% else %}
                                        <p class="news-carousel-text">{{ page.body_preview|truncatewords:20 }}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </a>
                    </div>
                {% empty %}
                    <div class="news-carousel-slide">
                        <div class="no-news-message">
                            <p>Nenhuma notícia disponível no momento.</p>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        
        <!-- Controles do Carrossel -->
        <div class="carousel-controls" style="display: none;">
            <button class="carousel-btn carousel-prev" id="prevBtn" aria-label="Notícia anterior">
                <i class="fa fa-chevron-left"></i>
            </button>
            <button class="carousel-btn carousel-next" id="nextBtn" aria-label="Próxima notícia">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
        
        <!-- Indicadores -->
        <div class="carousel-indicators" id="carouselIndicators">
            {% for page in pages %}
                <button class="carousel-indicator {% if forloop.first %}active{% endif %}" 
                        data-slide="{{ forloop.counter0 }}" 
                        aria-label="Ir para notícia {{ forloop.counter }}"></button>
            {% endfor %}
        </div>
    </div>
    
    <div class="text-center mt-4">
        <a href="/busca/?q=&tipo=noticias&ordenacao=recentes" class="btn-todos">Ver todas as notícias</a>
    </div>
</section>


<style>
    /* === ESTILOS ORIGINAIS DO DESKTOP (INALTERADOS) === */
    .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;
        background-color: white;
        font-weight: 600;
        margin: 0 auto;
        width: fit-content;
    }

    .news-secondary-date{
        font-size: 12px;
        color: #525155;
    }
    
    .btn-todos:hover {
        color: white;
        background-color: #006969;
        border: 1px solid #006969;
    }

    .btn-todos:active {
        color: #025257;
        border: 1px solid #025257;
    }

    .sub-title {
        font-size: 20px;
        font-weight: 400;
        margin: 0;
        color: #525155;
    }

    .h2-title {
        margin: 0;
        font-size: 40px;
        font-weight: 600;
    }

    .news-section {
        max-width: 1142px;
        margin: auto;
        padding: 60px 15px;
    }

    .news-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .news-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    /* Notícia Principal */
    .news-grid-main {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }

    .news-grid-main:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .news-main-link {
        display: block;
        position: relative;
        text-decoration: none;
        color: inherit;
    }

    .news-main-image {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .news-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        min-width: 100%;
    }

    .news-grid-main:hover .news-main-image img {
        transform: scale(1.05);
    }

    .news-main-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
        padding: 40px 25px 25px;
        color: white;
    }

    .news-main-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 10px;
        line-height: 1.3;
        color: white;
    }

    .news-main-text {
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
        margin: 0;
        font-size: 16px;
    }

    /* Notícias Secundárias */
    .news-grid-secondary {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .news-secondary-item {
        display: flex;
        gap: 15px;
        background: white;
        border-radius: 8px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .news-secondary-item:hover {
        text-decoration: underline;
        color: #006969;
    }

    .news-secondary-item:hover img {
        transform: scale(1.1);
    }

    .news-secondary-image {
        width:150px;
        height: 100%;
        border-radius: 6px;
        overflow: hidden;
        flex-shrink: 0;
    }

    .news-secondary-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-width: 100%;
    }

    .news-secondary-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 5px;
    }

    .news-secondary-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        line-height: 1.3;
        color: #007D7A;
    }

    .news-secondary-title a {
        color: #007D7A;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .news-secondary-title p :hover {
        color: #006969;
    }

    .news-secondary-title a p h4 a:hover {
        color: #006969;
    }

    .news-secondary-text {
        font-size: 14px;
        color: #525155;
        line-height: 1.4;
        margin: 0;
    }

    /* Placeholders para imagens */
    .no-image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #f5f5f5;
        color: #999;
        text-decoration: none;
    }

    .main-placeholder {
        height: 400px;
        font-size: 48px;
        background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
        position: relative;
    }

    .main-placeholder span {
        font-size: 16px;
        margin-top: 10px;
    }

    .main-placeholder::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    }

    .secondary-placeholder {
        height: 100%;
        font-size: 24px;
    }

    .no-news-message {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: #525155;
        font-size: 18px;
    }

    /* === NOVOS ESTILOS PARA MOBILE CARROSSEL === */
    .news-carousel-container {
        position: relative;
        margin-bottom: 40px;
    }

    .news-carousel {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 0 ;
        height: 60vh; 
    }

    .news-carousel-track {
        display: flex;
        transition: transform 0.3s ease;
        will-change: transform;
        height: 100%;
    }

    .news-carousel-slide {
        flex: 0 0 70vw;
        position: relative;
        margin-right: 15px;
    }

    .news-carousel-link {
        display: block;
        position: relative;
        text-decoration: none;
        color: inherit;
    }

    .news-carousel-image {
        width: 100%;
        height: 250px;
        overflow: hidden;
        position: relative;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .news-carousel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .news-carousel-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        padding: 30px 20px 20px;
        color: white;
    }

    .news-carousel-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        line-height: 1.3;
        color: white;
    }

    .news-carousel-text {
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.5;
        margin: 0;
        font-size: 14px;
    }

    .carousel-placeholder {
        height: 250px;
        font-size: 32px;
        background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    }

    .carousel-placeholder span {
        font-size: 14px;
        margin-top: 8px;
    }

    /* Controles do Carrossel */
    .carousel-controls {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0 15px;
        pointer-events: none;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        border: none;
        color: #007D7A;
        font-size: 16px;
        cursor: pointer;
        pointer-events: all;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-btn:hover {
        background: white;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .carousel-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    /* Indicadores */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 15px;
    }

    .carousel-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: none;
        background: rgba(0, 125, 122, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .carousel-indicator.active {
        background: #007D7A;
        transform: scale(1.2);
    }

    /* === RESPONSIVIDADE === */
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: grid;
    }

    /* Força esconder carrossel no desktop */
    .news-carousel-container {
        display: none !important;
    }

    @media (max-width: 768px) {
        .mobile-only {
            display: block !important;
        }

        .desktop-only {
            display: none !important;
        }

        /* Força mostrar carrossel no mobile */
        .news-carousel-container.mobile-only {
            display: block !important;
            height: 60vh;
        }

        /* Força esconder grid no mobile */
        .news-grid-container.desktop-only {
            display: none !important;
        }

        .news-section {
            padding: 40px 0 40px 15px;
        }

        .news-header {
            text-align: left;
            margin-bottom: 30px;
        }

        .h2-title {
            font-size: 32px;
            text-align: left;
        }

        .sub-title {
            font-size: 18px;
            margin-top: 10px;
        }

        .news-carousel-image {
            height: 100%;
        }

        .news-carousel-title {
            font-size: 16px;
        }

        .news-carousel-text {
            font-size: 13px;
        }

        .carousel-btn {
            width: 35px;
            height: 35px;
            font-size: 14px;
        }
    }

    @media (max-width: 480px) {
        .news-section {
            padding: 30px 0 30px 15px;
        }

        .h2-title {
            font-size: 28px;
        }

        .news-carousel-image {
            height: 100%;
        }

        .carousel-controls {
            padding: 0 10px;
        }

        .carousel-btn {
            width: 32px;
            height: 32px;
            font-size: 12px;
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const carousel = document.getElementById('newsCarousel');
    const track = document.getElementById('carouselTrack');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const indicators = document.getElementById('carouselIndicators');
    
    if (!carousel || !track) return;

    const slides = track.children;
    const totalSlides = slides.length;
    let currentSlide = 0;
    let startX = 0;
    let currentX = 0;
    let isDragging = false;

    // Função para ir para um slide específico
    function goToSlide(slideIndex) {
        if (slideIndex < 0) slideIndex = 0;
        if (slideIndex >= totalSlides) slideIndex = totalSlides - 1;
        
        currentSlide = slideIndex;
        const slideWidth = 70; // 70vw
        const spacing = 4; // espaçamento aproximado em vw
        const translateX = -(slideIndex * (slideWidth + spacing));
        track.style.transform = `translateX(${translateX}vw)`;
        
        // Atualizar indicadores
        const indicatorButtons = indicators.querySelectorAll('.carousel-indicator');
        indicatorButtons.forEach((btn, index) => {
            btn.classList.toggle('active', index === currentSlide);
        });
    }

    // Event listeners para botões
    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            goToSlide(currentSlide - 1);
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            goToSlide(currentSlide + 1);
        });
    }

    // Event listeners para indicadores
    if (indicators) {
        indicators.addEventListener('click', (e) => {
            if (e.target.classList.contains('carousel-indicator')) {
                const slideIndex = parseInt(e.target.dataset.slide);
                goToSlide(slideIndex);
            }
        });
    }

    // Touch/swipe support
    track.addEventListener('touchstart', (e) => {
        startX = e.touches[0].clientX;
        isDragging = true;
        track.style.transition = 'none';
    });

    track.addEventListener('touchmove', (e) => {
        if (!isDragging) return;
        
        currentX = e.touches[0].clientX;
        const diffX = currentX - startX;
        const slideWidth = 70; // 70vw
        const spacing = 4; // espaçamento aproximado em vw
        const currentTranslate = -(currentSlide * (slideWidth + spacing));
        const newTranslate = currentTranslate + (diffX / window.innerWidth * 100);
        
        track.style.transform = `translateX(${newTranslate}vw)`;
    });

    track.addEventListener('touchend', (e) => {
        if (!isDragging) return;
        
        isDragging = false;
        track.style.transition = 'transform 0.3s ease';
        
        const diffX = currentX - startX;
        const threshold = 50; // pixels
        
        if (Math.abs(diffX) > threshold) {
            if (diffX > 0) {
                goToSlide(currentSlide - 1);
            } else {
                goToSlide(currentSlide + 1);
            }
        } else {
            goToSlide(currentSlide);
        }
    });

    // Auto-play (desabilitado para melhor UX com swipe)
    // Usuário controla totalmente com swipe

    // Inicializar
    goToSlide(0);
    
    // Remover autoplay - usuário controla com swipe

    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            goToSlide(currentSlide - 1);
        } else if (e.key === 'ArrowRight') {
            goToSlide(currentSlide + 1);
        }
    });
});
</script>

{% endblock %}