<?php

use App\Livewire\Actions\Logout;
use Livewire\Volt\Component;

new class extends Component
{
    /**
     * Log the current user out of the application.
     */
    public function logout(Logout $logout): void
    {
        $logout();

        $this->redirect('/', navigate: true);
    }
}; ?>

<nav x-data="{ open: false }" class="navbar navbar-expand-sm bg-white border-bottom">
    <div class="container-fluid px-4">
        <a class="navbar-brand" href="{{ route('dashboard') }}" wire:navigate>
            <x-application-logo style="height: 2.25rem; width: auto; color: #343a40;" />
        </a>

        <button class="navbar-toggler d-sm-none" type="button" @click="open = ! open">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="d-none d-sm-flex align-items-center">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                        {{ __('Dashboard') }}
                    </x-nav-link>
                </li>
                <li class="nav-item">
                    <x-nav-link :href="route('chat.show')" :active="request()->routeIs('chat.*')" wire:navigate>
                        {{ __('Campaign chat') }}
                    </x-nav-link>
                </li>
                <li class="nav-item">
                    <x-nav-link :href="route('creatives.index')" :active="request()->routeIs('creatives.*')" wire:navigate>
                        {{ __('Creatives') }}
                    </x-nav-link>
                </li>
            </ul>
        </div>

        <div class="d-none d-sm-flex align-items-center ms-auto">
            <x-dropdown align="right" width="48">
                <x-slot name="trigger">
                    <button class="btn btn-light btn-sm d-flex align-items-center">
                        <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
                        <span class="ms-1">&#9662;</span>
                    </button>
                </x-slot>

                <x-slot name="content">
                    <x-dropdown-link :href="route('profile')" wire:navigate>
                        {{ __('Profile') }}
                    </x-dropdown-link>

                    <!-- Authentication -->
                    <button wire:click="logout" class="w-100 text-start border-0 bg-transparent p-0">
                        <x-dropdown-link>
                            {{ __('Log Out') }}
                        </x-dropdown-link>
                    </button>
                </x-slot>
            </x-dropdown>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div x-show="open" style="display: none;" class="w-100 d-sm-none border-top mt-2 pt-2">
        <div class="px-3">
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                {{ __('Dashboard') }}
            </x-responsive-nav-link>
            <x-responsive-nav-link :href="route('creatives.index')" :active="request()->routeIs('creatives.*')" wire:navigate>
                {{ __('Creatives') }}
            </x-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="border-top mt-2 pt-3 px-3">
            <div class="fw-medium" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
            <div class="small text-muted">{{ auth()->user()->email }}</div>

            <div class="mt-2">
                <x-responsive-nav-link :href="route('profile')" wire:navigate>
                    {{ __('Profile') }}
                </x-responsive-nav-link>

                <!-- Authentication -->
                <button wire:click="logout" class="w-100 text-start border-0 bg-transparent p-0">
                    <x-responsive-nav-link>
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </button>
            </div>
        </div>
    </div>
</nav>
