@extends('layouts.account')

@section('title', __('Messages'))
@section('heading', __('Messages'))
@section('subheading', __('Your conversations with buyers and sellers.'))

@section('account')
    @if ($conversations->isEmpty())
        <x-empty-state icon="inbox"
                       :title="__('No conversations yet')"
                       :message="__('When you enquire about a listing — or somebody enquires about yours — the thread appears here.')" />
    @else
        <div class="divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface">
            @foreach ($conversations as $conversation)
                @php($other = $conversation->otherParty($user))
                @php($unread = $conversation->unreadFor($user))

                <a href="{{ route('account.messages.show', $conversation) }}"
                   class="flex items-start gap-4 p-4 transition hover:bg-surface-muted">
                    @if ($conversation->listing?->cover_image)
                        <img src="{{ thumb_url($conversation->listing->cover_image) }}" alt=""
                             class="hidden size-14 shrink-0 rounded-lg object-cover xs:block">
                    @endif

                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-baseline justify-between gap-2">
                            <p @class(['truncate text-sm text-text', 'font-semibold' => $unread])>
                                {{ $other?->name ?? __('Deleted account') }}
                            </p>

                            <span class="shrink-0 text-xs text-text-muted">
                                {{ $conversation->last_message_at?->diffForHumans() }}
                            </span>
                        </div>

                        @if ($conversation->listing)
                            <p class="truncate text-xs text-text-muted">{{ $conversation->listing->title }}</p>
                        @endif

                        <p @class([
                            'mt-1 truncate text-sm',
                            'text-text' => $unread,
                            'text-text-secondary' => ! $unread,
                        ])>{{ $conversation->last_message }}</p>
                    </div>

                    @if ($unread)
                        <span class="pill pill-brand shrink-0">{{ $unread }}</span>
                    @endif

                    @if ($conversation->isBlocked())
                        <span class="pill pill-muted shrink-0">{{ __('Blocked') }}</span>
                    @endif
                </a>
            @endforeach
        </div>

        <div class="mt-8">{{ $conversations->links() }}</div>
    @endif
@endsection