@php
  $u = $reply->user;
  $avatar = $u->avatar_url ?? asset('images/default-male-avatar.png');
@endphp

<div class="reply-item flex items-start gap-2 mr-10" data-reply-id="{{ $reply->id }}">
  <img src="{{ $avatar }}"
       class="w-7 h-7 rounded-full object-cover border border-slate-200 dark:border-slate-700"
       onerror="this.src='{{ asset('images/default-male-avatar.png') }}'">
  <div class="flex-1 min-w-0">
    <div class="rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-200/60 dark:border-slate-700/60 px-3 py-2">
      <div class="flex items-center justify-between gap-2">
        <div class="min-w-0">
          <div class="font-bold text-[12px] text-slate-900 dark:text-white truncate">
            {{ $u->name ?? $u->username ?? 'عضو' }}
          </div>
          <div class="text-[10px] text-slate-500 dark:text-slate-400">{{ optional($reply->created_at)->diffForHumans() }}</div>
        </div>

        @if((int)$reply->user_id === (int)auth()->id())
          <button type="button"
                  class="delete-btn p-2 rounded-xl text-slate-400 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/20 transition"
                  data-type="reply"
                  data-id="{{ $reply->id }}">
            <i class="fa-regular fa-trash-can"></i>
          </button>
        @endif
      </div>

      <div class="mt-1 text-[13px] text-slate-900 dark:text-slate-100 break-words">
        {{ $reply->content }}
      </div>
    </div>
  </div>
</div>