@props(['user'])

@php
 $staffColor = $user->permission?->staff_color ?? '#eeb425';
 $rankName = $user->permission?->rank_name ?? 'Staff';
@endphp

<div class="relative rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg"
 style="background-color: var(--color-surface, #ffffff); border: 2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);">
 <div class="relative w-full p-4">
  <div class="absolute top-3 right-3 z-20 flex flex-col items-center gap-2">
   <div class="rounded-md overflow-hidden flex justify-center items-center"
    style="width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
    <img src="{{ asset('assets/images/country/default.png') }}" alt="Flag" class="object-cover w-full h-full" />
   </div>
   <div class="px-2 py-1 rounded-full flex items-center justify-center"
    style="background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
    @if($user->online)
    <span class="w-3 h-3 rounded-full bg-green-500 animate-pulse inline-block"></span>
    @else
    <span class="w-3 h-3 rounded-full bg-gray-400 inline-block"></span>
    @endif
   </div>
  </div>

  <div class="flex items-center gap-4">
   <div class="flex-shrink-0">
    <div class="relative"
     style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid {{ $staffColor }};">
     <img src="{{ setting('avatar_imager') }}{{ $user->look }}&headonly=0&direction=3&size=n&gesture=nrm"
      alt="{{ $user->username }}"
      class="object-cover object-top absolute inset-0"
      style="margin-top: -16px; margin-left: 5px;" />
    </div>
   </div>

   <div class="flex flex-col justify-center flex-1 min-w-0">
    <div class="flex items-center gap-2 mb-1">
     <a href="{{ route('profile.show', $user->username) }}"
      class="text-lg font-bold truncate transition hover:opacity-80"
      style="color: var(--color-text, #1f2937);">{{ $user->username }}</a>
     @if($user->permission?->job_description)
     <span class="px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap"
      style="background-color: color-mix(in srgb, {{ $staffColor }} 20%, transparent); color: {{ $staffColor }};">{{ $user->permission->job_description }}</span>
     @endif
    </div>
    <div class="flex gap-2 flex-wrap">
     @if($user->permission?->badge)
     <div class="rounded-md overflow-hidden flex justify-center items-center"
      style="width: 50px; height: 50px; border: 2px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); background-color: color-mix(in srgb, var(--color-surface) 80%, transparent);">
      <img src="{{ asset(setting('badges_path') . $user->permission->badge . '.gif') }}" alt="Staff Badge" class="object-cover" />
     </div>
     @endif
    </div>
   </div>
  </div>
 </div>
</div>