@php
  $avatarUrl = $user->avatarUrl();
@endphp
<div class="dp">
  <div class="flex flex-col items-center text-center sm:flex-row sm:text-left sm:items-start gap-4">
    @if($avatarUrl)
      <img src="{{ $avatarUrl }}" alt="" class="w-20 h-20 rounded-xl object-cover border border-slate-200 shrink-0">
    @else
      <div class="w-20 h-20 rounded-xl bg-violet-600 flex items-center justify-center text-white text-xl font-bold shrink-0">{{ $user->initials() }}</div>
    @endif
    <div class="flex-1 min-w-0">
      <p class="font-bold text-slate-900 text-[16px] truncate">{{ $user->name }}</p>
      <p class="text-slate-500 text-[12px] truncate">{{ $user->email }}</p>
      @if($user->role)
        <span class="badge b mt-2">{{ $user->role }}</span>
      @endif
      @if($user->job_title)
        <p class="text-slate-600 text-[12px] mt-1"><i class="fa-solid fa-briefcase text-slate-400 mr-1"></i>{{ $user->job_title }}</p>
      @endif
      @if($user->department)
        <p class="text-slate-600 text-[12px]"><i class="fa-solid fa-building text-slate-400 mr-1"></i>{{ $user->department }}</p>
      @endif
    </div>
  </div>
</div>