@php
    $isMine = $message->sender_id === auth()->id();
    $type = $message->type ?? 'text';
@endphp
<div class="message {{ $isMine ? 'sent' : 'received' }} group-message" data-id="{{ $message->id }}" data-sender-id="{{ $message->sender_id }}" data-created-at="{{ \App\Support\DateFormat::utcIso($message->created_at) }}">
    @if(!$isMine && $message->sender)
        <span class="group-msg-sender">{{ $message->sender->name }}</span>
    @endif
    <div class="message-bubble">
        @if($type === 'image' && $message->media_path)
            <a href="{{ $message->mediaUrl() }}" target="_blank" rel="noopener">
                <img src="{{ $message->mediaUrl() }}" alt="" class="msg-media-image" loading="lazy">
            </a>
        @elseif($type === 'video' && $message->media_path)
            <video src="{{ $message->mediaUrl() }}" controls playsinline class="msg-media-video"></video>
        @elseif($type === 'audio' && $message->media_path)
            <audio src="{{ $message->mediaUrl() }}" controls class="msg-media-audio"></audio>
        @elseif(in_array($type, ['document', 'file']) && $message->media_path)
            <a href="{{ $message->mediaUrl() }}" target="_blank" rel="noopener" class="msg-document">
                <i class="fa-solid fa-file"></i> {{ $message->body ?: 'Document' }}
            </a>
        @else
            <p class="msg-text">{!! nl2br(e($message->body)) !!}</p>
        @endif
        <time class="msg-time" datetime="{{ \App\Support\DateFormat::utcIso($message->created_at) }}"></time>
    </div>
</div>