{% extends "dsgov/base.html" %}
{% load br_footer_tags %}
{% load static %}

{% block title %}
    Exemplo de Footer
{% endblock %}

{% block content %}

    <br>
    <p><strong>Exemplo de Footer Principal (Cor azul):</strong></p>

    {# Exemplo de footer principal (Cor azul) #}
   {% br_footer %}
        {# O conteúdo principal fica dentro deste bloco de container #}
        {% br_footer_main %}

            {% br_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-negative.png" alt="Logo Negativo" %}
            
            {# Todas as colunas ficam dentro deste grupo #}
            {% br_footer_columns_group %}
                {# Coluna 1 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 1{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Ex qui laborum consectetur aute commodo{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 2 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 2{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Deserunt{% end_br_item %}
                        {% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 3 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 3{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
                        {% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
                        {% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 4 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 4{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
                        {% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
                        {% br_item '#' %}Qui esse{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 5 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 5{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 6 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 6{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
                        {% br_item '#' %}Qui esse{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}
            {% end_br_footer_columns_group %}
            
            {# Seção de Redes Sociais que organiza suas próprias colunas e linhas #}
            {% br_footer_social_section title="Nossas Redes" %}
                {% br_footer_rede_social href="#" icone="fa-facebook-f" aria_label="Facebook" %}
                {% br_footer_rede_social href="#" icone="fa-twitter" aria_label="Twitter" %}
                {% br_footer_rede_social href="#" icone="fa-linkedin-in" aria_label="LinkedIn" %}
                {% br_footer_rede_social href="#" icone="fa-whatsapp" aria_label="WhatsApp" %}
                
                {% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" alt="Logo 1" %}
                {% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" alt="Logo 2" %}
            {% end_br_footer_social_section %}

        {% end_br_footer_main %}

        {# O copyright fica fora do container principal #}
        {% br_footer_copyright %}
            Texto destinado a exibição de informações relacionadas à&nbsp;<strong>licença de uso.</strong>
        {% end_br_footer_copyright %}

    {% end_br_footer %}

    <br>
    <p><strong>Exemplo de Footer Invertido (Cor branca):</strong></p>

    {# Exemplo de footer invertido (Cor branca) #}
    {% br_footer class="inverted" %} <!-- A classe "inverted" aplica o estilo de fundo branco -->
        {# O conteúdo principal fica dentro deste bloco de container #}
        {% br_footer_main %}

            {% br_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="Logo Positivo" %}
            
            {# Todas as colunas ficam dentro deste grupo #}
            {% br_footer_columns_group %}
                {# Coluna 1 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 1{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Ex qui laborum consectetur aute commodo{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 2 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 2{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Deserunt{% end_br_item %}
                        {% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 3 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 3{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
                        {% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
                        {% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 4 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 4{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
                        {% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
                        {% br_item '#' %}Qui esse{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 5 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 5{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                        {% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}

                {# Coluna 6 #}
                {% br_footer_column %}
                    {% br_item_header %}Categoria 6{% end_br_item_header %}
                    {% br_footer_list %}
                        {% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
                        {% br_item '#' %}Qui esse{% end_br_item %}
                    {% end_br_footer_list %}
                {% end_br_footer_column %}
            {% end_br_footer_columns_group %}
            
            {# Seção de Redes Sociais que organiza suas próprias colunas e linhas #}
            {% br_footer_social_section title="Nossas Redes" %}
                {% br_footer_rede_social href="#" icone="fa-facebook-f" aria_label="Facebook" %}
                {% br_footer_rede_social href="#" icone="fa-twitter" aria_label="Twitter" %}
                {% br_footer_rede_social href="#" icone="fa-linkedin-in" aria_label="LinkedIn" %}
                {% br_footer_rede_social href="#" icone="fa-whatsapp" aria_label="WhatsApp" %}
                
                {% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-positive.png" alt="Logo 1" %}
                {% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-positive.png" alt="Logo 2" %}
            {% end_br_footer_social_section %}

        {% end_br_footer_main %}

        {# O copyright fica fora do container principal #}
        {% br_footer_copyright %}
            Texto destinado a exibição de informações relacionadas à&nbsp;<strong>licença de uso.</strong>
        {% end_br_footer_copyright %}

    {% end_br_footer %}
{% endblock %}