@php($posUser = \App\Support\PosAuth::user())

<div class="flex items-center gap-2">
    @if ($posUser)
        <div class="flex items-center gap-2 rounded-xl bg-zinc-800 px-2 py-1.5 sm:px-3">
            @if ($posUser->avatar_path)
                <img src="{{ asset('storage/' . $posUser->avatar_path) }}" class="h-8 w-8 rounded-full object-cover">
            @else
                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-zinc-900 text-sm font-bold">
                    {{ strtoupper(substr($posUser->name, 0, 1)) }}
                </div>
            @endif
            <div class="hidden sm:block leading-tight max-w-[120px]">
                <div class="text-sm font-semibold truncate">{{ $posUser->name }}</div>
                <div class="text-[10px] uppercase tracking-wider text-zinc-400">{{ $posUser->role }}</div>
            </div>
        </div>
        <form method="POST" action="{{ route('pin.logout') }}">
            @csrf
            <button class="btn-touch flex items-center rounded-xl bg-zinc-800 px-3 sm:px-4 text-sm font-semibold hover:bg-rose-700">Sair</button>
        </form>
    @endif
</div>