@extends('layouts.cabinet')

@section('title', 'Сообщения — Placeo')

@section('cabinet')
<div>
    <h1 class="mb-6 text-2xl font-bold">Сообщения</h1>

    @forelse ($threads as $thread)
        @php
            $other = $thread->otherParticipant($userId);
            $last = $thread->messages->first();
            $unread = $thread->unreadCountFor($userId);
        @endphp
        <a href="{{ route('cabinet.chat.show', $thread) }}"
           class="card mb-2 flex items-center gap-3 p-3 transition hover:shadow-md">
            <div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-100 font-bold text-brand-700">
                @if ($thread->is_support) 🛟
                @elseif ($other->avatarUrl()) <img src="{{ $other->avatarUrl() }}" class="h-full w-full object-cover" alt="">
                @else {{ $other->initial() }} @endif
            </div>
            <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between gap-2">
                    <span class="truncate font-semibold text-gray-900">{{ $thread->is_support ? 'Поддержка Placeo' : $other->displayName() }}</span>
                    <span class="shrink-0 text-xs text-muted">{{ $thread->last_message_at?->isoFormat('D MMM') }}</span>
                </div>
                @if ($thread->ad)<div class="truncate text-xs text-brand-600">{{ $thread->ad->title }}</div>@endif
                <div class="truncate text-sm text-muted">{{ $last?->body ?? 'Нет сообщений' }}</div>
            </div>
            @if ($unread)
                <span class="grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-brand-500 px-1.5 text-xs font-bold text-white">{{ $unread }}</span>
            @endif
        </a>
    @empty
        <div class="card grid place-items-center p-12 text-center text-muted">
            <div><div class="mb-2 text-4xl">💬</div>Здесь будут ваши переписки с продавцами и покупателями.</div>
        </div>
    @endforelse
</div>
@endsection