{% extends "enap_designsystem/base.html" %}
{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}
{% load wagtailcore_tags %}
{% block metadata %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'enap_designsystem/css/capsulas-design-v2.css' %}">
    <link rel="stylesheet" href="{% static 'enap_designsystem/css/acess-capsulas-custom.css' %}">
    <style>
        /* Estilos adicionais para o scroll spy */
        .capsulas-index-link {
            transition: color 0.3s ease, font-weight 0.3s ease;
        }
        
        /* Estilo para o botão voltar ao topo */
        .capsulas-back-to-top {
            display: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #071D41;
            color: white;
            border: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 1000;
            transition: background-color 0.3s, transform 0.3s;
        }
        
        .capsulas-back-to-top:hover {
            background-color: #0C3B83;
            transform: translateY(-3px);
        }

        /* Estilos para conteúdo indentado */
        .capsulas-detailed-content {
            margin-left: 2rem;
            padding-left: 1rem;
            border-left: 3px solid #e0e0e0;
            color: #555;
            line-height: 1.6;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .capsulas-section-content > .capsulas-detailed-content:first-of-type {
            margin-top: 1.5rem;
        }

        /* Sidebar sticky respeitando o container */
        .capsulas-sidebar-content {
            position: sticky;
            top: 120px;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            will-change: position;
        }

        /* Ocultar sidebar ao chegar no fim da página */
        .capsulas-sidebar {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .capsulas-sidebar.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Mobile menu do índice */
        .capsulas-mobile-menu-btn {
            display: none;
            width: 100%;
            padding: 0.75rem 1rem;
            background-color: #071D41;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .capsulas-mobile-nav {
            display: none;
            background: #fff;
            border: 1px solid #C8D1E0;
            border-radius: 8px;
            padding: 0.5rem 0;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .capsulas-mobile-nav.show {
            display: block;
        }

        .capsulas-mobile-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .capsulas-mobile-nav ul li a {
            display: block;
            padding: 0.65rem 1.25rem;
            color: #333;
            text-decoration: none;
            font-size: 0.9rem;
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.2s;
        }

        .capsulas-mobile-nav ul li:last-child a {
            border-bottom: none;
        }

        .capsulas-mobile-nav ul li a:hover,
        .capsulas-mobile-nav ul li a.active {
            background-color: #f0f5ff;
            color: #071D41;
            font-weight: 600;
        }

        /* Layout responsivo */
        @media (max-width: 900px) {
            .capsulas-layout {
                flex-direction: column;
            }

            .capsulas-sidebar {
                display: none;
            }

            .capsulas-mobile-menu-btn {
                display: flex;
            }
        }
    </style>
{% endblock %}

{% block title %}
    <title>{{ page.title }}</title>
{% endblock %}

{%block govnavbar %}
    <div style="background-color: #071E41;">
        <div class="menu">
            <div class="logo">
                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Logo GovBR">
            </div>
            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
            <div class="separator"></div>
            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
        </div>
    </div>
{% endblock %}

{% block navbar %}
    {% if page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% else %}
        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
    {% endif %}
{% endblock %}


{% block content %}


{% for block in page.menu %}
    {% include_block block %}
{% endfor %}
{% if page.breadcrumbs %}
{% include_block page.breadcrumbs %}
{% endif %}


<section class="wrapper-capsulas-page">

    <!-- Layout com sidebar -->
    <div class="capsulas-layout">
        <!-- Sidebar com índice fixo -->
        <div class="capsulas-sidebar" role="navigation" aria-label="Índice de navegação">
            <div class="capsulas-sidebar-content">
                <h2 class="capsulas-sidebar-title">Índice</h2>
                <nav class="capsulas-index" aria-label="Índice de seções">
                    <ul>
                        <li><a href="#section-what" class="capsulas-index-link active">O que é</a></li>
                        <li><a href="#section-why" class="capsulas-index-link">Por que é importante</a></li>
                        <li><a href="#section-when" class="capsulas-index-link">Quando utilizar</a></li>
                        <li><a href="#section-how" class="capsulas-index-link">Como aplicar</a></li>
                        <li><a href="#section-check" class="capsulas-index-link">Método de verificação</a></li>
                        <li><a href="#section-examples" class="capsulas-index-link">Exemplos</a></li>
                        <li><a href="#section-dont" class="capsulas-index-link">O que não fazer</a></li>
                        <li><a href="#section-norms" class="capsulas-index-link">Normas</a></li>
                        {% if page.saiba_mais_resumo or page.saiba_mais_detalhado %}
                        <li><a href="#section-more" class="capsulas-index-link">Saiba mais</a></li>
                        {% endif %}
                        {% if capsulas_relacionadas %}
                        <li><a href="#section-related" class="capsulas-index-link">Cápsulas relacionadas</a></li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>

        <!-- Conteúdo principal -->
        <div id="content" class="capsulas-main-content">

            <!-- Cabeçalho da cápsula -->
            <header class="capsulas-page-header">
                <h2 id="top">{{ page.title }}</h2>
                {% if page.resumo_card %}
                <p class="capsulas-summary">{{ page.resumo_card }}</p>
                {% endif %}
            </header>

            <!-- O que é? -->
            <section id="section-what" class="capsulas-section">
                <h2>O que é?</h2>
                <div class="capsulas-section-content">
                    {{ page.o_que_e_resumo|safe }}
                    {% if page.o_que_e_detalhado %}
                    <div class="capsulas-detailed-content" role="region" aria-label="Detalhes sobre o que é">
                        {{ page.o_que_e_detalhado|safe }}
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Por que é importante? -->
            <section id="section-why" class="capsulas-section">
                <h2>Por que é importante?</h2>
                <div class="capsulas-section-content">
                    {{ page.por_que_importante_resumo|safe }}
                    {% if page.por_que_importante_detalhado %}
                    <div class="capsulas-detailed-content" role="region" aria-label="Detalhes sobre importância">
                        {{ page.por_que_importante_detalhado|safe }}
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Quando utilizar? -->
            <section id="section-when" class="capsulas-section">
                <h2>Quando utilizar?</h2>
                <div class="capsulas-section-content">
                    {{ page.quando_utilizar_resumo|safe }}
                    {% if page.quando_utilizar_cards %}
                        {% for grid_block in page.quando_utilizar_cards %}
                            {% include_block grid_block %}
                        {% endfor %}
                    {% endif %}
                </div>
            </section>

            <!-- Como aplicar? -->
            <section id="section-how" class="capsulas-section">
                <h2>Como aplicar?</h2>
                <div class="capsulas-section-content">
                    {{ page.como_aplicar_resumo|safe }}
                    {% if page.como_aplicar_detalhado %}
                    <div class="capsulas-detailed-content" role="region" aria-label="Guia completo de como aplicar">
                        {{ page.como_aplicar_detalhado|safe }}
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Método de verificação -->
            <section id="section-check" class="capsulas-section">
                <h2>Método de verificação</h2>
                <div class="capsulas-section-content">
                    {{ page.metodo_verificacao_resumo|safe }}
                    {% if page.quando_utilizar_cards %}
                        {% for grid_block in page.quando_utilizar_cards %}
                            {% include_block grid_block %}
                        {% endfor %}
                    {% endif %}
                </div>
            </section>

            <!-- Exemplos -->
            <section id="section-examples" class="capsulas-section">
                <h2>Exemplos</h2>
                <div class="capsulas-section-content">
                    {{ page.exemplos_resumo|safe }}
                    {% if page.exemplos_detalhado %}
                    <div class="capsulas-detailed-content" role="region" aria-label="Exemplos detalhados">
                        {{ page.exemplos_detalhado|safe }}
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- O que não fazer? -->
            <section id="section-dont" class="capsulas-section">
                <h2>O que não fazer?</h2>
                <div class="capsulas-section-content">
                    {{ page.o_que_nao_fazer_resumo|safe }}
                    {% if page.o_que_nao_fazer_detalhado %}
                    <div class="capsulas-detailed-content" role="region" aria-label="Análise completa do que não fazer">
                        {{ page.o_que_nao_fazer_detalhado|safe }}
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Normas de referência -->
            <section id="section-norms" class="capsulas-section">
                <h2>Normas de referência</h2>
                <div class="capsulas-section-content">
                    {% if page.normas_referencia %}
                        {{ page.normas_referencia|safe }}
                    {% else %}
                        <p>Nenhuma norma de referência foi especificada.</p>
                    {% endif %}
                </div>
            </section>

            <!-- Saiba mais -->
            {% if page.saiba_mais_resumo or page.saiba_mais_detalhado %}
            <section id="section-more" class="capsulas-section">
                <h2>Saiba mais</h2>
                <div class="capsulas-section-content">
                    {{ page.saiba_mais_resumo|safe }}
                    {% if page.saiba_mais_detalhado %}
                        {{ page.saiba_mais_detalhado|safe }}
                    {% endif %}
                </div>
            </section>
            {% endif %}

            <!-- Cápsulas Relacionadas -->
            {% if capsulas_relacionadas %}
            <section id="section-related" class="capsulas-section">
                <h2>Cápsulas relacionadas</h2>
                <div class="capsulas-section-content">
                    <ul class="capsulas-related-list">
                        {% for capsula in capsulas_relacionadas %}
                        <li style="padding: 0;" class="acess-capsula-link">
                            <a href="{% pageurl capsula %}">
                                <div class="acess-capsula-card_cap">
                                    <div class="acess-capsula-content">
                                        <div class="acess-capsula-icon">
                                            <i class="icon-class {{ capsula.icone }}"></i>
                                        </div>
                                        <h2 class="step-title">{{ capsula.title }}</h2>
                                        <p class="acess-capsula-descricao">{{ capsula.resumo_card }}</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </section>
            {% endif %}
        </div>
    </div>

    <!-- Botão voltar ao topo -->
    <button id="back-to-top" class="capsulas-back-to-top" aria-label="Voltar ao topo da página" title="Voltar ao topo">
        <i class="fas fa-arrow-up" aria-hidden="true"></i>
    </button>
</section>

<!-- Seção ENAP -->
<section>
    {% include_block page.cards %}
    </section>
{% endblock %}



{% block footer %}
    {% include "enap_designsystem/includes/footer.html" %}
{% endblock %}


{% block scriptinline %}
<script>
    // Toggle mobile menu do índice
    const capsulasMenuBtn = document.getElementById('capsulasMenuBtn');
    const capsulasMenuNav = document.getElementById('capsulasMenuNav');
    const capsulasMenuIcon = capsulasMenuBtn ? capsulasMenuBtn.querySelector('i') : null;

    if (capsulasMenuBtn) {
        capsulasMenuBtn.addEventListener('click', function() {
            const expanded = capsulasMenuNav.classList.toggle('show');
            capsulasMenuBtn.setAttribute('aria-expanded', expanded ? 'true' : 'false');

            if (expanded) {
                capsulasMenuIcon.classList.remove('fa-bars');
                capsulasMenuIcon.classList.add('fa-times');
            } else {
                capsulasMenuIcon.classList.remove('fa-times');
                capsulasMenuIcon.classList.add('fa-bars');
            }
        });
    }

    // Fecha menu mobile ao clicar em um link
    const capsulaMobileLinks = capsulasMenuNav ? capsulasMenuNav.querySelectorAll('.capsulas-mobile-link') : [];
    capsulaMobileLinks.forEach(link => {
        link.addEventListener('click', function() {
            capsulasMenuNav.classList.remove('show');
            if (capsulasMenuBtn) capsulasMenuBtn.setAttribute('aria-expanded', 'false');
            if (capsulasMenuIcon) {
                capsulasMenuIcon.classList.remove('fa-times');
                capsulasMenuIcon.classList.add('fa-bars');
            }
        });
    });


    // SCROLL SPY FUNCTIONALITY
    document.addEventListener('DOMContentLoaded', function() {
        // Get all section elements
        const sections = document.querySelectorAll('.capsulas-section');
        // Get all index links
        const navLinks = document.querySelectorAll('.capsulas-index-link');
        
        // Options for the Intersection Observer
        const observerOptions = {
            root: null, // Use the viewport as the root
            rootMargin: '-100px 0px -70% 0px', // Adjust margin to trigger earlier/later
            threshold: 0 // Trigger as soon as the element enters the viewport
        };
        
        // Function to handle when a section is intersecting
        const handleIntersection = (entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Remove active class from all links
                    navLinks.forEach(link => {
                        link.classList.remove('active');
                    });
                    
                    // Get the ID of the intersecting section
                    const id = entry.target.getAttribute('id');
                    
                    // Find the corresponding navigation link and add the active class
                    const correspondingLink = document.querySelector(`.capsulas-index-link[href="#${id}"]`);
                    if (correspondingLink) {
                        correspondingLink.classList.add('active');
                    }
                }
            });
        };
        
        // Create a new Intersection Observer
        const observer = new IntersectionObserver(handleIntersection, observerOptions);
        
        // Observe each section
        sections.forEach(section => {
            observer.observe(section);
        });
        
        // Smooth scrolling when clicking on index links
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                const targetSection = document.querySelector(targetId);

                if (targetSection) {
                    // Scroll to the section smoothly
                    targetSection.scrollIntoView({
                        behavior: 'smooth'
                    });

                    // Update URL hash without jumping
                    history.pushState(null, null, targetId);

                    // Remove active class from all links
                    navLinks.forEach(link => {
                        link.classList.remove('active');
                    });

                    // Add active class to the clicked link
                    this.classList.add('active');
                }
            });
        });

        // Back to top button functionality
        const backToTopButton = document.getElementById('back-to-top');
        
        if (backToTopButton) {
            // Show button when page is scrolled down
            window.addEventListener('scroll', () => {
                if (window.pageYOffset > 300) {
                    backToTopButton.style.display = 'flex';
                } else {
                    backToTopButton.style.display = 'none';
                }
            });
            
            // Scroll to top when button is clicked
            backToTopButton.addEventListener('click', () => {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }

        // Sticky sidebar com limite do container
        const sidebar = document.querySelector('.capsulas-sidebar');
        const sidebarContent = document.querySelector('.capsulas-sidebar-content');
        const layout = document.querySelector('.capsulas-layout');

        if (sidebar && sidebarContent && layout) {
            window.addEventListener('scroll', () => {
                const layoutRect = layout.getBoundingClientRect();
                const sidebarRect = sidebar.getBoundingClientRect();
                const sidebarContentHeight = sidebarContent.offsetHeight;

                // Esconde o índice quando o fim do layout estiver visível na viewport
                if (layoutRect.bottom <= window.innerHeight + 100) {
                    sidebar.classList.add('hidden');
                } else {
                    sidebar.classList.remove('hidden');
                }

                // Se a sidebar sair do topo da viewport, ela fica grudada
                if (sidebarRect.top <= 20) {
                    sidebarContent.style.position = 'fixed';
                    sidebarContent.style.top = '100px';
                    sidebarContent.style.left = sidebarRect.left + 'px';
                    sidebarContent.style.width = sidebarRect.width + 'px';

                    // Se a sidebar bater no final do layout, ela volta a ser estática
                    const fixedBottom = 20 + sidebarContentHeight;

                    if (window.scrollY + fixedBottom >= layout.offsetTop + layout.offsetHeight) {
                        sidebarContent.style.position = 'absolute';
                        sidebarContent.style.top = 'auto';
                        sidebarContent.style.bottom = '0';
                        sidebarContent.style.left = 'auto';
                        sidebarContent.style.width = 'auto';
                    }
                } else {
                    // Volta para o fluxo normal
                    sidebarContent.style.position = 'static';
                    sidebarContent.style.top = 'auto';
                    sidebarContent.style.left = 'auto';
                    sidebarContent.style.width = 'auto';
                    sidebarContent.style.bottom = 'auto';
                }
            }, { passive: true });
        }
    });
</script>
{% endblock %}