{% include "includes/menu-mobile.twig" %}
<div id="fixado-topo" class="sticky-top">
    <header class="header-menu">
        <div class="container">
            <nav id="nav-cabecalho" class="navbar navbar-expand-xs navbar-dark">
                <div class="grupo-botoes-topo">
                    <a href="#conteudoPrincipal" class="ocultaVisualmente">Pular para conteúdo principal</a>
                    <div id="dropdownMenu">
                        <button id="btnDropNav" class="navbar-toggler" name="menuServicos" type="button">
                            <svg role="img" class="svg">
                                <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#lines-menu"></use>
                            </svg>
                            <span class="d-sm-none d-md-block">MENU</span>
                        </button>
                        <nav id="menuNavDrop">
                            <div class="nav flex-column nav-pills float-left" id="nav-1" role="tablist"
                                 aria-orientation="vertical">
                                <a class="nav-link active font-weight-bold" id="nav-item-noticia" data-toggle="tab"
                                   href="#nav-sub-editorias" role="tab" aria-controls="v-pills-home"
                                   aria-selected="true">
                                <span>
                                    <svg role="img" class="svg">
                                         <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#jornal"></use>
                                    </svg>
                                </span> Editorias</a>
                                <a class="nav-link font-weight-bold" id="nav-item-servicos" data-toggle="tab"
                                   href="#nav-sub-servicos" role="tab" aria-controls="v-pills-profile"
                                   aria-selected="false">
                                <span>
                                    <svg role="img" class="svg">
                                         <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#world"></use>
                                    </svg>
                                </span> Internet </a>
                                <a class="nav-link font-weight-bold" id="nav-item-contato" data-toggle="tab"
                                   href="#nav-sub-contato" role="tab" aria-controls="v-pills-messages"
                                   aria-selected="false">
                                <span>
                                    <svg role="img" class="svg">
                                         <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#computer"></use>
                                    </svg>
                                </span> Data Center </a>
                                <a class="nav-link font-weight-bold" id="nav-item-cliente" data-toggle="tab"
                                   href="#nav-sub-cliente" role="tab" aria-controls="v-pills-settings"
                                   aria-selected="false">
                                <span>
                                    <svg role="img" class="svg">
                                         <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#pessoa"></use>
                                    </svg>
                                </span> Assinante </a>
                                <a class="nav-link font-weight-bold" id="nav-item-trabalhe" data-toggle="tab"
                                   href="#nav-sub-trabalhe-conosco" role="tab" aria-controls="v-pills-settings"
                                   aria-selected="false">
                                <span>
                                    <svg role="img" class="svg">
                                         <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#telefone"></use>
                                    </svg>
                                </span> Contato </a>
                            </div>

                            <div class="tab-content float-left border-left" id="nav-2">
                                <div class="tab-pane active py-2 pb-0" id="nav-sub-editorias" role="tabpanel"
                                     aria-labelledby="v-pills-home-tab">
                                    <div class="w-100">
                                        <span class="ml-3">
                                           <svg role="img" class="svg">
                                               <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#jornal"></use>
                                            </svg>
                                        </span>
                                        <span class="titulo-menu">Editorias</span>
                                    </div>
                                    <ul class="my-1 w-100 nav-pills nav flex-column">
                                        {% for editoria in editorias %}
                                            <li class="nav-item border-top">
                                                <a class="nav-link" href="{{ editoria.link }}"
                                                   title="Acesse a editoria {{ editoria.nome }}">{{ editoria.nome }}</a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="tab-pane py-2" id="nav-sub-servicos" role="tabpanel"
                                     aria-labelledby="v-pills-home-tab">
                                    <div class="w-100">
                                        <span class="ml-3"><svg role="img" class="svg">
                                             <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#world"></use>
                                        </svg>
                                        </span>
                                        <span class="titulo-menu">Internet</span>
                                    </div>
                                    {% for servico in principaisServicos.internet.relacionados %}
                                        <ul class="my-1 w-100 float-left nav-pills nav flex-column">
                                            <li class="nav-item border-top">
                                                <a target="_blank" class="nav-link"
                                                   href="{{ servico.link }}">
                                                    {{ servico.nome }}
                                                </a>
                                            </li>
                                        </ul>
                                    {% endfor %}
                                </div>
                                <div class="tab-pane py-2" id="nav-sub-contato" role="tabpanel"
                                     aria-labelledby="v-pills-home-tab">
                                    <div class="w-100">
                                        <span class="ml-3">
                                            <svg role="img" class="svg">
                                                 <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#computer"></use>
                                            </svg>
                                        </span>
                                        <span class="titulo-menu"> Data Center </span>
                                    </div>
                                    <ul class="my-1 w-100 float-left nav-pills nav flex-column">
                                        {% for servico in principaisServicos.dataCenter.relacionados %}
                                            <ul class="my-1 w-100 float-left nav-pills nav flex-column">
                                                <li class="nav-item border-top">
                                                    <a target="_blank" class="nav-link"
                                                       href="{{ servico.link }}">
                                                        {{ servico.nome }}
                                                    </a>
                                                </li>
                                            </ul>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="tab-pane py-2" id="nav-sub-cliente" role="tabpanel"
                                     aria-labelledby="v-pills-home-tab">
                                    <span class="ml-3">
                                        <svg role="img" class="svg">
                                             <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#pessoa"></use>
                                        </svg>
                                    </span>
                                    <span class="titulo-menu">Assinante</span>
                                    <ul class="my-1 nav-pills nav flex-column">
                                        {% for servico in principaisServicos.centralDoAssinante.relacionados %}
                                            <ul class="my-1 w-100 float-left nav-pills nav flex-column">
                                                <li class="nav-item border-top">
                                                    <a target="_blank" class="nav-link"
                                                       href="{{ servico.link }}">
                                                        {{ servico.nome }}
                                                    </a>
                                                </li>
                                            </ul>
                                        {% endfor %}
                                    </ul>
                                </div>

                                <div class="tab-pane py-2" id="nav-sub-trabalhe-conosco" role="tabpanel"
                                     aria-labelledby="v-pills-home-tab">
                                    <span class="ml-3">
                                        <svg role="img" class="svg">
                                             <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#telefone"></use>
                                        </svg>
                                    </span>
                                    <span class="titulo-menu">Contato</span>
                                    <ul class="my-1 nav-pills nav flex-column">
                                        <ul class="my-1 w-100 h-100 float-left nav-pills nav flex-column">
                                            <li class="nav-item border-top">
                                                <a target="_blank" class="nav-link"
                                                   href="{{ url }}trabalhe-conosco">
                                                    Trabalhe conosco
                                                </a>
                                            </li>
                                            <li class="nav-item border-top">
                                                <a target="_blank" class="nav-link"
                                                   href="{{ url }}fale-conosco">
                                                    Fale conosco
                                                </a>
                                            </li>
                                            <li class="nav-item border-top">
                                                <a target="_blank" class="nav-link"
                                                   href="//www.engeplus.com.br/anuncie">
                                                    Anuncie
                                                </a>
                                            </li>
                                            <li class="nav-item border-top">
                                                <a target="_blank" class="nav-link"
                                                   href="{{ url }}circuito-pet">
                                                    Circuito Pet
                                                </a>
                                            </li>
                                        </ul>
                                    </ul>
                                </div>
                            </div>

                        </nav>
                    </div>
                    <div class="d-none d-md-block searchShow">
                        <span class="d-sm-none d-md-block">BUSCAR</span>
                        <svg role="img" class="svg">
                            <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#icon-busca"></use>
                        </svg>
                    </div>

                    {% include "includes/notificacao.twig" %}
                </div>
                <a href="{{ url }}" class="navbar-brand">
                        <h1>
                            <img class="logo"
                                 src="{{ url }}arquivos/img/logo-engeplus-flat-branco-208x62.png"
                                 alt="Logo Engeplus">
                        </h1>
                </a>
                <div class="d-block d-md-none searchShow">
                    <span class="d-sm-none d-md-block">BUSCAR</span>
                    <svg role="img" class="svg">
                        <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#icon-busca"></use>
                    </svg>
                </div>
                <div id="menu-servicos" class="d-none d-md-block">
                    <ul class="list-inline">
                        {% for servico in principaisServicos %}
                            <li class="list-inline-item">
                                <a href="{{ servico.link }}" title="{{ servico.chamada }}"
                                   target="_blank">{{ servico.nome }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="form-pesquisa">
                    <form class="input-group" id="campo-pesquisa" action="{{ url }}busca">
                        <input type="text" class="form-control border-right-0" id="input-pesquisa" name="q"
                               aria-label="Campo de busca" placeholder="O que deseja procurar?">
                        <div class="input-group-append">
                        <span class="input-group-text" id="search">
                            <button type="submit">
                                <svg role="img" class="svg">
                            <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#icon-busca"></use>
                        </svg>
                            </button>
                        </span>
                            <span class="input-group-text" id="close-pesquisa">
                            <svg role="img" class="svg">
                            <use xlink:href="{{ url }}arquivos/svg/svg-symbols.svg#cancel"></use>
                        </svg>
                        </span>
                        </div>
                    </form>
                </div>
            </nav>
        </div>
    </header>
    <div class="servicos-engeplus-mobile d-flex d-md-none">
        {% for servico in principaisServicos %}
            <a href="{{ servico.link }}" title="{{ servico.chamada }}" target="_blank">{{ servico.nome }}</a>
        {% endfor %}
    </div>
</div>