@if(auth()->user())
    <div class="dropdown relative">
        <a class="dropdown-toggle flex items-center hidden-arrow pl-2 ml-2" href="#" id="dropdownMenuButton2" role="button"
           data-bs-toggle="dropdown" aria-expanded="false">
            <img src="{{ auth()->user()->picture }}" class="rounded-full w-8 h-8 md:w-10 md:h-10"
                 alt="" loading="lazy" />
        </a>
        <ul class="
    dropdown-menu
    min-w-max
    absolute
    hidden
    bg-white
    text-base
    z-50
    float-left
    py-2
    list-none
    text-left
    rounded-lg
    shadow-lg
    mt-1
    hidden
    m-0
    bg-clip-padding
    border-none
    left-auto
    right-0
  " aria-labelledby="dropdownMenuButton2">
            <li>
                <a class="
        dropdown-item
        text-sm
        py-2
        px-4
        font-normal
        block
        w-full
        whitespace-nowrap
        bg-transparent
        text-gray-700
        hover:bg-gray-100
      " href="{{ route('site.user.profile') }}"> <i class="fa fa-user"></i> Perfil</a>
            </li>
            <li>
                <a class="
        dropdown-item
        text-sm
        py-2
        px-4
        font-normal
        block
        w-full
        whitespace-nowrap
        bg-transparent
        text-gray-700
        hover:bg-gray-100
      " href="{{ route('site.user.favorites') }}"> <i class="fa fa-heart"></i> Favoritos</a>
            </li>
            @hasanyrole('Speaker|Admin')
            <li>
                <a class="
        dropdown-item
        text-sm
        py-2
        px-4
        font-normal
        block
        w-full
        whitespace-nowrap
        bg-transparent
        text-gray-700
        hover:bg-gray-100
      " href="{{ route('admin.dashboard') }}"> <i class="fa-solid fa-table-columns"></i> Mi Panel</a>
            </li>
            @endrole
            <li>
                <a href="#" class=" text-gray-700">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button class="w-full hover:bg-gray-200 text-left block rounded py-[10px] px-4 text-sm " type="submit">
                            <i class="fa-solid fa-arrow-right-from-bracket"></i> Cerrar sesión
                        </button>
                    </form>
                </a>
            </li>

        </ul>
    </div>
@else
    <div class="flex flex-wrap">
        <a href="{{ route('register') }}"
           class="font-bold py-2 px-4 capitalize hidden md:inline ">
            Log In</a>
        <a href="{{ route('register') }}"
           class="font-bold py-2 px-4 capitalize text-primary bg-white hover:bg-gray-100 rounded-lg md:shadow hover:shadow-md active:shadow-none">
            <i class="md:hidden fa-regular fa-user"></i> <span class="hidden md:inline">Register</span>
        </a>
    </div>
@endif