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

{% block content %}
    <header class="br-header {{ extra_classes }}">
        <div class="container-lg">
            <div class="header-top">
            <div class="header-logo">
                <img src="{{ logo_url }}" alt="logo"/>
                <span class="br-divider vertical"></span>
                <div class="header-sign" style="{{ header_sign_style }}">{{ title_extra }}</div>
            </div>
            <div class="header-actions">
                <div class="header-links dropdown">
                    <button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Acesso Rápido"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                    </button>
                    <div class="br-list">
                        <div class="header">
                            <div class="title">Acesso Rápido</div>
                        </div>
                        {% for link in links %}
                            <a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">{{ link.label }}</a>
                        {% endfor %}
                    </div>
                </div>
                <span class="br-divider vertical mx-half mx-sm-1"></span>
                <div class="header-functions dropdown">
                    <button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Funcionalidades do Sistema"><i class="fas fa-th" aria-hidden="true"></i>
                    </button>
                    <div class="br-list">
                        <div class="header">
                            <div class="title">Funcionalidades do Sistema</div>
                            </div>
                        <div class="br-item {{ extra_classes }}">
                            <button class="br-button circle small" type="button" aria-label="Funcionalidade 1"><i class="fas fa-chart-bar" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 1</span>
                            </button>
                        </div>
                        <div class="br-item {{ extra_classes }}">
                            <button class="br-button circle small" type="button" aria-label="Funcionalidade 2"><i class="fas fa-headset" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 2</span>
                            </button>
                        </div>
                        <div class="br-item {{ extra_classes }}">
                            <button class="br-button circle small" type="button" aria-label="Funcionalidade 3"><i class="fas fa-comment" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 3</span>
                            </button>
                        </div>
                        <div class="br-item {{ extra_classes }}">
                            <button class="br-button circle small" type="button" aria-label="Funcionalidade 4"><i class="fas fa-adjust" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 4</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="header-search-trigger">
                <button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search"><i class="fas fa-search" aria-hidden="true"></i>
                </button>
                </div>
                {% if show_login %}
                    <div class="header-login">
                        <div class="header-sign-in">
                        <button class="br-sign-in small" type="button" data-trigger="login">
                            <i class="fas fa-user" aria-hidden="true"></i>
                            <span class="d-sm-inline">{{ label_button_login }}</span>
                        </button>
                        </div>
                        <div class="header-avatar"></div>
                    </div>
                {% endif %}
            </div>
            </div>
            <div class="header-bottom">
            <div class="header-menu">
                <div class="header-menu-trigger">
                    <button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation"><i class="fas fa-bars" aria-hidden="true" style="color: #FFFFFF;"></i>
                    </button>
                </div>
                <div class="header-info">
                <div class="header-title" style="{{ title_style }}">{{ title }}</div>
                <div class="header-subtitle" style="{{ title_style }}">{{ subtitle }}</div>
                </div>
            </div>
            <div class="header-search">
                <div class="br-input has-icon">
                    <label for="searchbox-7548">Texto da pesquisa</label>
                    <input id="searchbox-7548" type="text" placeholder="{{ search_placeholder }}"/>
                    <button class="br-button circle small" type="button" aria-label="Pesquisar">
                        <i class="fas fa-search" aria-hidden="true"></i>
                    </button>
                </div>
                <button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search"><i class="fas fa-times" aria-hidden="true"></i>
                </button>
            </div>
            </div>
        </div>
    </header>
{% endblock %}