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

<div class="comment-card rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4"
     data-comment-id="{{ $comment->id }}">
  <div class="flex items-start gap-3">
    <img src="{{ $avatar }}"
         class="w-9 h-9 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="flex items-center justify-between gap-2">
        <div class="min-w-0">
          <div class="font-bold text-sm text-slate-900 dark:text-white truncate">
            {{ $u->name ?? $u->username ?? 'عضو' }}
          </div>
          <div class="text-[11px] text-slate-500 dark:text-slate-400">{{ $comment->formatted_time }}</div>
        </div>

        <div class="flex items-center gap-1">
          @if(!empty($comment->can_delete))
            <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="comment"
                    data-id="{{ $comment->id }}">
              <i class="fa-regular fa-trash-can"></i>
            </button>
          @endif
        </div>
      </div>

      <div class="mt-2 rounded-2xl bg-slate-50 dark:bg-slate-800/60 border border-slate-200/60 dark:border-slate-700/60 px-4 py-3 text-sm text-slate-900 dark:text-slate-100">
        {{ $comment->content }}
      </div>

      <div class="mt-2 flex items-center gap-3 text-[12px] text-slate-500 dark:text-slate-400">
        <button type="button" class="reply-btn font-semibold hover:text-sky-600 transition" data-comment-id="{{ $comment->id }}">
          <i class="fa-solid fa-reply text-[11px]"></i> رد
        </button>
      </div>

      {{-- Reply form --}}
      <div id="reply-form-{{ $comment->id }}" class="hidden mt-3">
        <div class="flex items-start gap-3">
          <img src="{{ auth()->user()->avatar_url ?? asset('images/default-male-avatar.png') }}"
               class="w-8 h-8 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">
            <textarea class="w-full resize-none rounded-2xl bg-white dark:bg-slate-900
                             border border-slate-200 dark:border-slate-700 px-4 py-3 text-sm"
                      rows="2"
                      placeholder="اكتب ردًا…"></textarea>
            <div class="mt-2 flex justify-end gap-2">
              <button type="button"
                      class="px-3 py-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-sm"
                      onclick="document.getElementById('reply-form-{{ $comment->id }}').classList.add('hidden')">
                إلغاء
              </button>
              <button type="button"
                      class="submit-reply-btn px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 text-white text-sm font-bold"
                      data-comment-id="{{ $comment->id }}">
                إرسال
              </button>
            </div>
          </div>
        </div>
      </div>

      {{-- Replies --}}
      <div id="replies-{{ $comment->id }}" class="mt-3 space-y-2">
        @foreach($comment->replies()->with('user')->latest()->take(10)->get() as $reply)
          @include('general.posts.partials.reply-item', ['reply'=>$reply])
        @endforeach
      </div>
    </div>
  </div>
</div>