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

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

{% block content %}

  <div class="mb-4">
    <h2>Exemplos de Headers do Design System do Governo Brasileiro</h2>
    <h4 class="mt-2">Veja como usar os componentes de Header do Design System.</h4>
    <ul class="mt-3 text-start" style="display: inline-block;">
        <li>O Header é um componente importante para a navegação e identidade visual do site.</li>
        <li>Ele é dividido em duas partes: Topo e Inferior.</li>
        <li>O Topo contém o logo, ações, links de acesso rápido, funcionalidades do sistema, busca e login.</li>
        <li>O Inferior contém o menu do Header, título e subtítulo, além da busca.</li>
        <li>Você pode customizar o Header usando classes e estilos extras.</li>
        <li>Veja os exemplos abaixo:</li>
    </ul>
</div>

  {# HEADER 1: Header padrão, fundo claro, sem customização de cor #}
  <li class="mb-4">Esse primeiro header usa o tamanho padrão e o fundo branco, que são as configurações originais do componente.</li>

  {% br_header %}
    {# Bloco Superior: Logo, Ações, Links, Funções, Busca e Login #}
    {% br_header_top %}
      {% br_header_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="logo" signature="Assinatura" %}

      {% br_header_actions %}
        {% br_header_links %}
          {% br_list %}
            {% br_list_header %}Acesso Rápido{% end_br_list_header %}
            {% br_header_link_item href="#" %}Link de acesso 1{% end_br_header_link_item %}
            {% br_header_link_item href="#" %}Link de acesso 2{% end_br_header_link_item %}
            {% br_header_link_item href="#" %}Link de acesso 3{% end_br_header_link_item %}
          {% end_br_list %}
        {% end_br_header_links %}

        {% br_header_functions %}
          {% br_list %}
            {% br_list_header %}Funcionalidades do Sistema{% end_br_list_header %}
            {% br_function_item icon_class="fa-chart-bar" label="Funcionalidade 1" %}
            {% br_function_item icon_class="fa-headset" label="Funcionalidade 2" %}
            {% br_function_item icon_class="fa-comment" label="Funcionalidade 3" %}
            {% br_function_item icon_class="fa-adjust" label="Funcionalidade 4" %}
          {% end_br_list %}
        {% end_br_header_functions %}

        {% br_header_search_trigger %}

        {% br_header_login %}
          {% br_header_signin_button %}
          {% br_header_avatar %}
        {% end_br_header_login %}
      {% end_br_header_actions %}
    {% end_br_header_top %}

    {# Bloco Inferior: Menu principal e Título #}
    {% br_header_bottom %}
      {% br_header_menu %}
        {% br_header_title %}Título do Header{% end_br_header_title %}
        {% br_header_subtitle %}Subtítulo do Header{% end_br_header_subtitle %}
      {% end_br_header_menu %}

      {# Mova a tag de busca para DENTRO do header_bottom #}
      {% br_header_search placeholder="O que você procura?" %}
    {% end_br_header_bottom %}
  {% end_br_header %}

  <br><br><br><br>

  {# HEADER 2: Header customizado, fundo azul escuro, textos e ícones brancos, usando classes e estilos extras #}
  <li>Esse segundo header é o header customizado, com fundo azul escuro e textos e ícones brancos. Ele usa classes e estilos extras para personalização.</p>
  {% br_header class="bg-blue-warm-vivid-90" %}
  {# Bloco Superior: Logo, Ações, Links, Funções, Busca e Login #}
  {% br_header_top %}
    {% br_header_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-negative.png" alt="logo" signature="Assinatura" signature_style="color: white;" %}

    {% br_header_actions %}
      {% br_header_links icon_style="color: white;" %}
        {# ESTRUTURA CORRIGIDA: br_list agora envolve o header e os itens #}
        {% br_list %}
          {% br_list_header style="color: white;" %}Acesso Rápido{% end_br_list_header %}
          {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 1{% end_br_header_link_item %}
          {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 2{% end_br_header_link_item %}
          {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 3{% end_br_header_link_item %}
          {% br_header_link_item href="#" extra_classes="bg-blue-warm-vivid-90" style="color: white;" %}Link de acesso 4{% end_br_header_link_item %}
        {% end_br_list %}
      {% end_br_header_links %}

      {% br_header_functions icon_style="color: white;" %}
        {# ESTRUTURA CORRIGIDA: br_list agora envolve o header e os itens #}
        {% br_list %}
          {% br_list_header style="color: white;" %}Funcionalidades do Sistema{% end_br_list_header %}
          {% br_function_item icon_class="fa-chart-bar" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 1" label_style="color: white;" aria_label="Acessível" %}
          {% br_function_item icon_class="fa-headset" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 2" label_style="color: white;" aria_label="Acessível" %}
          {% br_function_item icon_class="fa-comment" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 3" label_style="color: white;" aria_label="Acessível" %}
          {% br_function_item icon_class="fa-adjust" extra_classes="bg-blue-warm-vivid-90" icon_style="color: white;" label="Funcionalidade 4" label_style="color: white;" aria_label="Acessível" %}
        {% end_br_list %}
      {% end_br_header_functions %}

      {% br_header_search_trigger icon_style="color: white;" %}
      
      {% br_header_login %}
        {% br_header_signin_button %}
        {% br_header_avatar %}
      {% end_br_header_login %}
    {% end_br_header_actions %}
  {% end_br_header_top %}

  {# Bloco Inferior: Agora contém o menu E a chamada da busca #}
  {% br_header_bottom %}
    {% br_header_menu icon_style="color: white;" %}
      {% br_header_title style="color: white;" %}Título do Header{% end_br_header_title %}
      {% br_header_subtitle style="color: white;" %}Subtítulo do Header{% end_br_header_subtitle %}
    {% end_br_header_menu %}

    {% br_header_search placeholder="O que você procura?" icon_style="color: white;" %}
  {% end_br_header_bottom %}
{% end_br_header %}

  <br><br><br><br>

{% endblock %}