@props(['user'])

<div class="relative flex items-center justify-between overflow-hidden rounded px-10 me-backdrop border-2"
 style="background: rgba(0, 0, 0, 0.3) url({{ setting('cms_me_backdrop') }}); border-color: var(--border-color);">
 <div>
 <a href="{{ route('profile.show', $user) }}"
 class="absolute -bottom-12 left-0 transition duration-300 ease-in-out hover:scale-105 group">
 <img style="image-rendering: pixelated;"
 src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
 alt="{{ $user->username }}"
 class="border-4 border-gray-800 group-hover:border-[var(--border-color)] transition-colors rounded-xl">
 </a>
 </div>

 <a data-turbolinks="false" href="{{ route('nitro-client') }}">
 <button
 class="font-bold py-2 px-4 rounded-lg shadow-lg transition-all duration-300 hover:scale-105 hover:opacity-90"
 style="background-color: var(--button-color); color: var(--button-text-color);">
 {{ __('Go to :hotel', ['hotel' => setting('hotel_name')]) }}
 </button>
 </a>
</div>