<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> @yield('title', 'Nexus') </title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon.png') }}" type="image/x-icon">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles

</head>
<header>
    <nav class="nav-bar" x-data="{ scrolled: false }" x-init="scrolled = (window.scrollY > 50)"
        @scroll.window="scrolled = (window.scrollY > 50)" :class="{ 'navbar-scrolled': scrolled }">
        @auth
        <div class="navbar-items">
            <a href="{{ route('dashboard') }}">Início</a>
            <div class="nav-bar-logo">
                <a href="{{ route('dashboard') }}">
                    <img src="{{ Vite::asset('resources/images/newlogo.png') }}" alt="Logo">
                </a>
            </div>

            <form action="{{ route('logout') }}" method="post">
                @csrf
                <button type="submit">
                    Sair
                </button>
            </form>
        </div>

        <div x-data="{open: false}" x-on:click.outside="open = false" class="profile-menu transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-100">

            <a x-on:click="open = !open" class="cursor-pointer rounded-full overflow-hidden">

                <img class="object-cover w-full h-full "
                    src="{{ Vite::asset('resources/images/avatar-nexus.svg') }}" alt="Avatar">
            </a>

            <ul class="profile-list-items" x-show="open" x-transition:enter.duration.300ms
                x-transition:leave.duration.300ms>
                <h2 class="font-bold text-center" x-show="open" x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-300"
                    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90">Nexus
                </h2>

                <li class="profile-items">
                    <a href="" class="profile-link">
                        Início
                    </a>
                </li>

                <li class="profile-items">
                    <a @click="$dispatch('show-users')" class="profile-link">
                        Administração
                    </a>
                </li>

                <li class="profile-items">
                    <a @click="$dispatch('open-create-user')" class="profile-link">
                        Criar novo usuário
                    </a>
                </li>


                <li class="profile-items">
                    <a @click="$dispatch('open-add-client')" class="profile-link">
                        Adicionar clientes
                    </a>
                </li>

                <li class="profile-items">
                    <a @click="$dispatch('vpn-show-links')" class="profile-link">
                        VPN's
                    </a>
                </li>

            </ul>
        </div>
        @endauth

        @guest
        <div>Bem vindo ao Nexus.</div>
        @endguest
    </nav>
</header>

<!--Apresenta mensagens em formato de toasts -->
<x-flash-messages />

<body>
    @yield('content')
    @livewireScripts
</body>


</html>