@php($isOwn = $message->user_id === auth()->id())

<div class="flex items-start gap-3" id="message-{{ $message->id }}" data-message-id="{{ $message->id }}" data-user-id="{{ $message->user_id }}">
    <x-avatar :name="$message->user->name" size="sm" />

    <div class="min-w-0 flex-1">
        <div class="flex items-baseline gap-2">
            <p class="text-sm font-semibold text-gray-700">{{ $message->user->name }}</p>
            <p class="text-xs text-gray-400" title="{{ $message->created_at->format('d/m/Y H:i') }}">
                {{ $message->created_at->diffForHumans() }}
            </p>

            @if ($isOwn || auth()->user()->isAdmin())
                <button
                    type="button"
                    class="ml-auto text-xs text-gray-300 hover:text-red-500 message-delete"
                    data-message-id="{{ $message->id }}"
                >
                    Eliminar
                </button>
            @endif
        </div>
        <p class="mt-0.5 whitespace-pre-line break-words text-sm text-gray-600">{{ $message->body }}</p>
    </div>
</div>