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

{% block content %}
    <header class="br-header mb-4 {{ extra_classes }}" id="header" data-sticky="data-sticky">
        <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" style="{{ links_style }}"></i>
                        </button>
                        <div class="br-list">
                            <div class="header">
                                <div class="title" style="{{ links_style }}">Acesso Rápido</div>
                            </div>
                            <a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 1</a>
                            <a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 2</a>
                            <a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 3</a>
                            <a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 4</a>
                            <select class="bg-blue-warm-vivid-90 rounder-lg border-solid-none" name="languages" id="languages" style="{{ items_style }}" onchange="changeLanguage()">
                                <option value="pt-br" selected>PT</option>
                                <option value="en">EN</option>
                                <option value="es">ES</option>
                            </select>
                        </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" style="{{ links_style }}"></i>
                        </button>
                        <div class="br-list">
                            <div class="header">
                                <div class="title" style="{{ title_style }}">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" style="{{ title_style }}">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" style="{{ title_style }}">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" style="{{ title_style }}">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" style="{{ title_style }}">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" style="{{ items_style }}"></i>
                        </button>
                    </div>
                    <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>
                </div>
            </div>
            <div class="header-bottom">
                <div class="header-menu">
                    <div class="header-menu-trigger" id="header-navigation">
                        <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" id="main-searchbox">
                    <div class="br-input has-icon">
                        <label for="searchbox">Texto da pesquisa</label>
                        <input id="searchbox" 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" style="{{ links_style }}"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>
{% endblock %}
