@php
    $user = auth()->user();
@endphp

<details class="hd-account-menu hd-account-menu--legacy">
    <summary class="hd-account-button" data-test="sidebar-menu-button">
        <span class="hd-user-avatar hd-user-avatar--gravatar">
            <span class="hd-user-avatar-fallback">{{ $user->initials() }}</span>
            <img
                src="{{ $user->gravatarUrl(160) }}"
                alt="{{ $user->name }}"
                loading="lazy"
                referrerpolicy="no-referrer"
                onerror="this.style.display='none'"
            >
        </span>

        <span class="hd-account-copy">
            <strong>{{ $user->name }}</strong>
            <small>{{ $user->email }}</small>
        </span>

        <i class="fa-solid fa-chevron-down hd-account-chevron"></i>
    </summary>

    <div class="hd-account-dropdown" role="menu">
        <div class="hd-account-dropdown-user">
            <span class="hd-user-avatar hd-user-avatar--gravatar hd-user-avatar--large">
                <span class="hd-user-avatar-fallback">{{ $user->initials() }}</span>
                <img
                    src="{{ $user->gravatarUrl(160) }}"
                    alt="{{ $user->name }}"
                    loading="lazy"
                    referrerpolicy="no-referrer"
                    onerror="this.style.display='none'"
                >
            </span>

            <div class="hd-account-dropdown-copy">
                <strong>{{ $user->name }}</strong>
                <span>{{ $user->email }}</span>
            </div>
        </div>

        <div class="hd-account-dropdown-divider"></div>

        <nav class="hd-account-dropdown-nav" aria-label="Account">
            @if(Route::has('profile.edit'))
                <a href="{{ route('profile.edit') }}" wire:navigate role="menuitem">
                    <i class="fa-solid fa-gear"></i>
                    <span>Settings</span>
                </a>
            @endif
        </nav>

        <div class="hd-account-dropdown-divider"></div>

        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button class="hd-account-logout" type="submit" data-test="logout-button" role="menuitem">
                <i class="fa-solid fa-arrow-right-from-bracket"></i>
                <span>Log out</span>
            </button>
        </form>
    </div>
</details>