@php use App\Helpers\TranslationHelper; @endphp
@aware(['items', 'isMarcas'])
<div class="fixed bg-white h-screen left-0 px-4 top-0 w-screen z-10 flex flex-col" {{ $attributes }}>
    <div class="text-right pb-2">
        <button class="align-top mt-7 p-0" title="Botão de fechar o menu." @click="mobileOpen = false">
            <svg class="text-midnightblue-100" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"/>
            </svg>
        </button>
    </div>
    <div class="px-5">
        <a href="#" @click.prevent="open = false">
            <img class="inline-block mr-2 rotate-180" src="{{ asset('images/seta-direita-azul.svg') }}"/>
            <span class="text-midnightblue-100 text-lg font-semibold align-middle">
                {{ __('messages.voltar_menu') }}
            </span>
        </a>
    </div>
    <div class="border-b border-b-midnightblue-100/50 border-solid my-4">{{-- linha separadora --}}</div>
    <div class="flex-1 overflow-auto font-montserrat font-semibold text-midnightblue-100 leading-10">
        @foreach ($items as $arr)
            {{-- [$href, $label, $target] --}}
            <div class="px-5 {{ $loop->first ? '' : 'mt-2' }}">
                <a class="text-lg" target="{{ empty($arr[2]) ? '_self' : '_blank' }}" href="{{ $arr[0] }}">{{ $arr[1] }}</a>
            </div>
        @endforeach
        @if (!empty($isMarcas))
            <div class="px-5 mt-2">
                @php
                    $nossasMarcas = TranslationHelper::getPageUrl('nossas-marcas');
                @endphp
                <a class="text-lg inline-flex gap-2 items-center" href="{{ $nossasMarcas }}">
                    {{ __('messages.ver_todas') }}
                    <svg class="transform -rotate-90" xmlns="http://www.w3.org/2000/svg" width="11.987" height="6.339"><path d="M10.577 1.41 5.993 5.339 1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                </a>
            </div>
            @endif
    </div>
    <div class="border-b border-b-midnightblue-100/50 border-solid mt-4">{{-- linha separadora --}}</div>
    <div class="flex gap-x-8 items-center justify-center p-4">
        <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_facebook }}" target="_blank">
            <img class="align-middle" alt="Rede social facebook." src="{{ asset('images/icon-facebook-desktop.svg') }}">
        </a>
        <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_youtube }}" target="_blank">
            <img class="align-middle" alt="Canal do Youtube." src="{{ asset('images/icon-youtube-desktop.svg') }}"/>
        </a>
        <a href="{{app(\App\Settings\ConfiguracaoGeral::class)->rede_social_instagram }}" target="_blank">
            <img class="align-middle" alt="Rede social Instagram."
                 src="{{ asset('images/icon-instagram-desktop.svg') }}">
        </a>
        <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_linkedin }}" target="_blank">
            <img class="align-middle" alt="Rede social Linkedin." src="{{ asset('images/icon-linkedin-desktop.svg') }}">
        </a>
    </div>
</div>