@php
    $isMine = $message->user_id === auth()->id();
@endphp
<div class="club-message {{ $isMine ? 'mine' : 'theirs' }}" data-message-id="{{ $message->id }}">
    <div class="club-message-bubble">
        <div class="club-message-author">{{ $message->user?->name ?? 'Unknown' }}</div>
        @if ($message->body)
            <div class="club-message-body">{!! nl2br(e($message->body)) !!}</div>
        @endif
        @foreach ($message->attachments as $attachment)
            <div class="club-message-attachment">
                @if ($attachment->isImage())
                    <a href="{{ $attachment->url() }}" target="_blank"><img src="{{ $attachment->url() }}" alt="{{ $attachment->file_name }}" class="club-image-preview"></a>
                @else
                    <a href="{{ $attachment->url() }}" target="_blank" class="club-doc-link">📄 {{ $attachment->file_name }}</a>
                @endif
            </div>
        @endforeach
        <div class="club-message-time">{{ $message->created_at?->format('d M Y H:i') }}</div>
    </div>
    <div class="club-message-reactions">
        @foreach ($message->reactions->groupBy('emoji') as $emoji => $group)
            <span class="club-reaction-pill" title="{{ $group->pluck('user.name')->implode(', ') }}">{{ $emoji }} {{ $group->count() }}</span>
        @endforeach
        <div class="club-react-buttons">
            @foreach ($allowedEmojis as $emoji)
                <button type="button" class="club-react-btn" data-message-id="{{ $message->id }}" data-emoji="{{ $emoji }}">{{ $emoji }}</button>
            @endforeach
        </div>
    </div>
</div>
