@props([
'align' => 'right'
])

<div class="relative inline-flex" x-data="{ open: false }">
    <button
        class="inline-flex justify-center items-center group"
        aria-haspopup="true"
        @click.prevent="open = !open"
        :aria-expanded="open">
        <div class="flex items-center gap-2 truncate">
            <span :class="scrollY > innerHeight || !['home'].includes(currentRoute) ? 'text-luxury-action-secondary' : 'text-white'"
            class="font-inter font-medium transition-colors hover:text-luxury-action!">{{ Auth::user()->name }}</span>
            <svg 
    :class="{
        'text-luxury-navy': scrollY > innerHeight || !['home'].includes(currentRoute),
        'text-white': !(scrollY > innerHeight || !['home'].includes(currentRoute)),
        'rotate-180': open,
        'rotate-0': !open
    }" 
    class="ml-2 w-8 h-10 mb-1 shrink-0 fill-current" 
    viewBox="0 0 12 12">
    <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
        </div>
    </button>
    <div
        class="origin-top-right z-10 absolute top-full min-w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1 {{$align === 'right' ? 'right-0' : 'left-0'}}"
        @click.outside="open = false"
        @keydown.escape.window="open = false"
        x-show="open"
        x-transition:enter="transition ease-out duration-200 transform"
        x-transition:enter-start="opacity-0 -translate-y-2"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-out duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        x-cloak>
        <div class="pt-0.5 pb-2 px-3 mb-1 border-b border-gray-200 dark:border-gray-700/60">
            <div class="font-medium text-gray-800 dark:text-gray-100">{{ Auth::user()->name }}</div>
            <div class="text-xs text-gray-500 dark:text-gray-400 italic">{{ Auth::user()->roles->first()->name ?? __("messages.royal guest") }}</div>
        </div>
        <ul>
            <li>
                <a class="font-medium text-sm text-luxury-action-secondary hover:text-luxury-action flex items-center py-1 px-3" href="{{ route('profile.show') }}" @click="open = false" @focus="open = true" @focusout="open = false">{{ __('messages.Profile') }}</a>
            </li>
            <li>
                <form method="POST" action="{{ route('logout') }}" x-data>
                    @csrf

                    <a class="font-medium  text-sm text-luxury-action-secondary hover:text-luxury-action flex items-center py-1 px-3"
                        href="{{ route('logout') }}"
                        @click.prevent="$root.submit();"
                        @focus="open = true"
                        @focusout="open = false">
                        {{ __('messages.Sign Out') }}
                    </a>
                </form>
            </li>
        </ul>
    </div>
</div>