<div class="container">
    <div class="ma-header__inner">
        <div class="ma-header__logos">
            <a href="{{ route('paginas.home') }}" class="ma-header__logo ma-header__logo--angra"
                title="{{ __('Prefeitura de Angra dos Reis') }}">
                <img src="{{ asset('pmar/assets/img/logo-pmar.png') }}" class="ma-header__logo-img"
                    alt="{{ __('Prefeitura de Angra, Construindo oportunidades') }}" width="200" height="54"
                    decoding="async">
            </a>
            <span class="ma-header__separator" aria-hidden="true"></span>
            <a href="https://www.angra.rj.gov.br/secretarias/secretaria-de-seguranca-publica/executivas/secretaria-executiva-de-ordem-publica-e-mobilidade-urbana"
                target="_blank" rel="noopener noreferrer" class="ma-header__logo ma-header__logo--ssp"
                title="{{ __('Secretaria Executiva de Ordem Pública e Mobilidade Urbana') }}">
                <img src="{{ asset('pmar/assets/img/ssp.png') }}" class="ma-header__logo-img"
                    alt="{{ __('Secretaria de Segurança Pública') }}" width="40" height="46" decoding="async">
            </a>
            <a href="{{ route('mobiangra.index') }}" class="ma-header__logo ma-header__logo--mobiangra"
                aria-label="{{ __('MobiAngra - início') }}">
                <img src="{{ asset('mobiangra-assets/images/logo_mobiangra_1.png') }}" class="ma-header__logo-img"
                    alt="{{ __('MobiAngra') }}" width="270" height="54" decoding="async">
            </a>
        </div>

        <button class="ma-header__toggler d-xl-none" type="button" data-bs-toggle="collapse"
            data-bs-target="#maMainNav" aria-controls="maMainNav" aria-expanded="false"
            aria-label="{{ __('Abrir menu de navegação') }}">
            <i class="fa-solid fa-bars" aria-hidden="true"></i>
        </button>

        <nav class="ma-header__nav collapse d-xl-block" id="maMainNav" aria-label="{{ __('Navegação principal') }}">
            <ul class="ma-header__menu">
                <li>
                    <a href="{{ route('mobiangra.index') }}"
                        @class(['ma-header__menu-link', 'ma-header__menu-link--active' => request()->routeIs('mobiangra.index')])>
                        {{ __('Transporte Coletivo') }}
                    </a>
                </li>
                <li>
                    <a href="{{ route('mobiangra.horarios') }}"
                        @class(['ma-header__menu-link', 'ma-header__menu-link--active' => request()->routeIs('mobiangra.horarios')])>
                        {{ __('Horários') }}
                    </a>
                </li>
                <li>
                    <a href="{{ route('mobiangra.passageiro_cidadao') }}"
                        @class(['ma-header__menu-link', 'ma-header__menu-link--active' => request()->routeIs('mobiangra.passageiro_cidadao')])>
                        {{ __('Passageiro Cidadão') }}
                    </a>
                </li>
                <li>
                    <a href="{{ route('mobiangra.informacoes') }}"
                        @class(['ma-header__menu-link', 'ma-header__menu-link--active' => request()->routeIs('mobiangra.informacoes')])>
                        {{ __('Informações') }}
                    </a>
                </li>
                <li>
                    <a href="{{ route('mobiangra.fale_conosco') }}"
                        @class(['ma-header__menu-link', 'ma-header__menu-link--active' => request()->routeIs('mobiangra.fale_conosco*')])>
                        {{ __('Fale conosco') }}
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
