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

<div class="relative inline-flex" x-data="{ open: false }">
  <button
    class="group inline-flex items-center justify-center"
    aria-haspopup="true"
    @click.prevent="open = !open"
    :aria-expanded="open"
  >
    <img
      class="h-8 w-8 rounded-full"
      src="{{ Auth::user()->profile_photo_url }}"
      width="32"
      height="32"
      alt="{{ Auth::user()->name }}"
    />
    <div class="flex items-center truncate">
      <span
        class="ml-2 truncate text-sm font-medium group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-200"
      >
        {{ Auth::user()->name }}
      </span>
      <svg class="ml-1 h-3 w-3 shrink-0 fill-current text-slate-400" 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="{{ $align === 'right' ? 'right-0' : 'left-0' }} absolute top-full z-10 mt-1 min-w-44 origin-top-right overflow-hidden rounded border border-slate-200 bg-white py-1.5 shadow-lg dark:border-slate-700 dark:bg-slate-800"
    @click.outside="open = false"
    @keydown.escape.window="open = false"
    x-show="open"
    x-transition:enter="transform transition duration-200 ease-out"
    x-transition:enter-start="-translate-y-2 opacity-0"
    x-transition:enter-end="translate-y-0 opacity-100"
    x-transition:leave="transition duration-200 ease-out"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    x-cloak
  >
    <div class="mb-1 border-b border-slate-200 px-3 pb-2 pt-0.5 dark:border-slate-700">
      <div class="font-medium text-slate-800 dark:text-slate-100">{{ Auth::user()->name }}</div>
      <div class="text-xs italic text-slate-500 dark:text-slate-400">Administrator</div>
    </div>
    <ul>
      <li>
        <a
          class="flex items-center px-3 py-1 text-sm font-medium text-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400"
          href="{{ route('profile.show') }}"
          @click="open = false"
          @focus="open = true"
          @focusout="open = false"
        >
          Settings
        </a>
      </li>
      <li>
        <form method="POST" action="{{ route('logout') }}" x-data>
          @csrf

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