{% extends "enap_designsystem/base.html" %}
{% load static %}
{% load wagtailcore_tags wagtailimages_tags %}


{% block metadata %}
    {% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
{% 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="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
            </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 %}
<div class="acessibilidade-container-page">
    <div class="acessibilidade-container-white">
    <div class="hearder-search">
        <!-- Na sua página -->
        {% include "enap_designsystem/blocks/auto_breadcrumb_block.html" with value=breadcrumb_config %}
        <div class="">
            <div class="space-header">
            <div>
                <h2 class="title-large-green">
                    {% if query %}
                        "{{ query }}"
                    {% else %}
                        Todos os resultados disponíveis
                    {% endif %}
                </h2>
                
            </div>
        
        </div>
        </div>
    </div>
    </div>
    <div class="acessibilidade-conteudo-container">
        
        {# ============================================ #}
        {# SIDEBAR DE BUSCA E FILTROS #}
        {# ============================================ #}
        <aside class="filtros-lateral" role="complementary" aria-label="Busca e filtros">
            
            {# Campo de busca #}
        
            
            {# Filtros avançados #}
            <div class="opcoes-filtragem">
             
                <div id="filtragem-conteudo" class="filtragem-conteudo">
                    <form method="get" id="filtros-form">
                        
                        {# TIPO DE DEFICIÊNCIA - DROPDOWN #}
                        <fieldset class="categoria-filtro">
                            <div class="categoria-dropdown" id="dropdown-deficiencia">
                                <button type="button" 
                                        class="categoria-cabecalho" 
                                        aria-expanded="false"
                                        onclick="toggleDropdown('deficiencia')">
                                    <span class="categoria-titulo">
                                        Tipo de Deficiência
                                        <span class="contador-badge" id="count-deficiencia">0</span>
                                    </span>
                                    <svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <div class="categoria-opcoes" id="opcoes-deficiencia">
                                    {% for value, label in opcoes_filtros.tipos_deficiencia %}
                                        <label class="selecao-checkbox">
                                            <input type="checkbox" 
                                                   name="tipo_deficiencia" 
                                                   value="{{ value }}"
                                                   {% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}
                                                   onchange="updateCount('deficiencia'); this.form.submit()">
                                            <span class="texto-checkbox">{{ label }}</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </fieldset>
                        
                        {# FORMATO DE AÇÃO - DROPDOWN #}
                        <fieldset class="categoria-filtro">
                            <div class="categoria-dropdown" id="dropdown-formato">
                                <button type="button" 
                                        class="categoria-cabecalho" 
                                        aria-expanded="false"
                                        onclick="toggleDropdown('formato')">
                                    <span class="categoria-titulo">
                                        Formato de Ação
                                        <span class="contador-badge" id="count-formato">0</span>
                                    </span>
                                    <svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <div class="categoria-opcoes" id="opcoes-formato">
                                    {% for value, label in opcoes_filtros.formatos_acao %}
                                        <label class="selecao-checkbox">
                                            <input type="checkbox" 
                                                   name="formato_acao" 
                                                   value="{{ value }}"
                                                   {% if value in filtros_ativos.formato_acao %}checked{% endif %}
                                                   onchange="updateCount('formato'); this.form.submit()">
                                            <span class="texto-checkbox">{{ label }}</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </fieldset>
                        
                        {# TIPO DE RECURSO - DROPDOWN #}
                        <fieldset class="categoria-filtro">
                            <div class="categoria-dropdown" id="dropdown-recurso">
                                <button type="button" 
                                        class="categoria-cabecalho" 
                                        aria-expanded="false"
                                        onclick="toggleDropdown('recurso')">
                                    <span class="categoria-titulo">
                                        Tipo de Recurso
                                        <span class="contador-badge" id="count-recurso">0</span>
                                    </span>
                                    <svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                                <div class="categoria-opcoes" id="opcoes-recurso">
                                    {% for value, label in opcoes_filtros.tipos_recurso %}
                                        <label class="selecao-checkbox">
                                            <input type="checkbox" 
                                                   name="tipo_recurso" 
                                                   value="{{ value }}"
                                                   {% if value in filtros_ativos.tipo_recurso %}checked{% endif %}
                                                   onchange="updateCount('recurso'); this.form.submit()">
                                            <span class="texto-checkbox">{{ label }}</span>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </fieldset>
                        
                    </form>
                </div>
            </div>
            
        </aside>
        
        {# ============================================ #}
        {# ÁREA DE RESULTADOS #}
        {# ============================================ #}
        <main class="conteudo-principal" role="main">
            
            <div class="conteudo-cabecalho">
             
                
                <div class="conteudo-ordenacao">
                    <label for="sort-select" class="ordenacao-texto">Ordenar por:</label>
                    <select id="sort-select" class="ordenacao-select">
                        <option value="relevancia">Relevância</option>
                        <option value="recente">Mais recentes</option>
                        <option value="titulo">A-Z</option>
                    </select>
                </div>
            </div>
            
            {% if capsulas %}
                <div class="recursos-grid">
                    {% for capsula in capsulas %}
                            <article class="recurso-card">
                                <!-- Link principal que envolve todo o card -->
                                <a href="{% pageurl capsula %}" class="recurso-card-link" aria-labelledby="card-titulo-{{ forloop.counter }}">
                                    <span class="sr-only">Acessar cápsula: {{ capsula.title }}</span>
                                
                                
                                <div class="recurso-card-icone">
                                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                    </svg>
                                </div>
                                
                                <h2 class="recurso-card-titulo" id="card-titulo-{{ forloop.counter }}">
                                    {{ capsula.title }}
                                </h2>
                                
                                <p class="recurso-card-descricao">
                                    {{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
                                </p>
                                
                                {# Tags de deficiência #}
                                {% if capsula.tipos_deficiencia %}
                                    <div class="recurso-tags-categoria" aria-label="Tipos de deficiência abordados">
                                        {% for tipo in capsula.get_tipos_deficiencia_display|slice:":2" %}
                                            <span class="tag-categoria">
                                                <svg class="tag-categoria-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                    <circle cx="10" cy="10" r="4"></circle>
                                                </svg>
                                                {{ tipo }}
                                            </span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                
                                {# Badge de prioridade #}
                                {% if capsula.prioridade %}
                                    <div class="recurso-badge recurso-badge-{{ capsula.prioridade }}" aria-label="Nível de prioridade">
                                        <svg class="badge-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                        </svg>
                                        {{ capsula.get_prioridade_display }}
                                    </div>
                                {% endif %}
                                
                                {# Tags de recurso #}
                                {% if capsula.tipos_recurso %}
                                    <div class="recurso-tags-tipo" aria-label="Tipos de recurso">
                                        {% for recurso in capsula.get_tipos_recurso_display|slice:":3" %}
                                            <span class="tag-tipo">
                                                <svg class="tag-tipo-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                    <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
                                                </svg>
                                                {{ recurso }}
                                            </span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                
                                <div class="recurso-card-botao-wrapper">
                                    <span class="recurso-card-botao">
                                        Acessar Cápsula
                                    </span>
                                </div>
                            </a>
                            </article>
                        {% endfor %}
                </div>
                
            {% else %}
                <div class="conteudo-vazio">
                    <svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h2>Nenhuma cápsula encontrada</h2>
                    <p>Tente ajustar os filtros ou <a href="{{ page.url }}">limpe os filtros</a> para ver todas as cápsulas.</p>
                </div>
            {% endif %}
            
        </main>
        
    </div>
</div>
{% endblock %}

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

{% block scriptinline %}
<script>
    // Toggle dos dropdowns individuais
    function toggleDropdown(tipo) {
        const header = document.querySelector(`#dropdown-${tipo} .categoria-cabecalho`);
        const opcoes = document.getElementById(`opcoes-${tipo}`);
        const dropdown = document.getElementById(`dropdown-${tipo}`);
        const expanded = header.getAttribute('aria-expanded') === 'true';
        
        // Fecha outros dropdowns
        document.querySelectorAll('.categoria-dropdown').forEach(dd => {
            if (dd.id !== `dropdown-${tipo}`) {
                dd.classList.remove('active');
                const h = dd.querySelector('.categoria-cabecalho');
                const o = dd.querySelector('.categoria-opcoes');
                h.setAttribute('aria-expanded', 'false');
                o.classList.remove('open');
            }
        });
        
        // Toggle do dropdown atual
        header.setAttribute('aria-expanded', !expanded);
        opcoes.classList.toggle('open');
        dropdown.classList.toggle('active');
    }

    // Atualiza o contador de filtros selecionados
    function updateCount(tipo) {
        const checkboxes = document.querySelectorAll(`#opcoes-${tipo} input[type="checkbox"]:checked`);
        const badge = document.getElementById(`count-${tipo}`);
        const count = checkboxes.length;
        
        badge.textContent = count;
        badge.style.display = count > 0 ? 'inline-flex' : 'none';
    }

    // Inicializa os contadores ao carregar a página
    document.addEventListener('DOMContentLoaded', function() {
        updateCount('deficiencia');
        updateCount('formato');
        updateCount('recurso');
        
        // Esconde badges com contador 0
        document.querySelectorAll('.contador-badge').forEach(badge => {
            if (badge.textContent === '0') {
                badge.style.display = 'none';
            }
        });
    });

    // Fecha dropdowns ao clicar fora
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.categoria-dropdown')) {
            document.querySelectorAll('.categoria-dropdown').forEach(dropdown => {
                dropdown.classList.remove('active');
                const header = dropdown.querySelector('.categoria-cabecalho');
                const opcoes = dropdown.querySelector('.categoria-opcoes');
                header.setAttribute('aria-expanded', 'false');
                opcoes.classList.remove('open');
            });
        }
    });
</script>
{% endblock %}