@extends('layouts.account')

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

@section('content')
<h1 class="mb-4 text-[22px] font-extrabold tracking-[-0.5px] text-[var(--color-ink)] sm:text-[24px]">Сообщения</h1>

@if ($rows->isEmpty())
    <div class="rounded-[var(--radius-lg)] border border-[var(--color-line)] p-10 text-center text-[13.5px] text-[var(--color-muted)]">
        У вас пока нет диалогов. Напишите продавцу с карточки товара.
    </div>
@else
    <div class="divide-y divide-[var(--color-canvas)] overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white">
        @foreach ($rows as $row)
            <a href="{{ $row['url'] }}" class="flex items-center gap-3 px-4 py-[13px] transition hover:bg-[#F8F9FB] sm:px-[18px]">
                <div class="grid h-[38px] w-[38px] shrink-0 place-items-center rounded-full bg-[var(--color-primary-soft)] text-[15px] font-extrabold text-[var(--color-primary)]">
                    {{ mb_strtoupper(mb_substr($row['name'], 0, 1)) }}
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between gap-2">
                        <span class="truncate text-sm font-bold text-[var(--color-ink)]">{{ $row['name'] }}</span>
                        <span class="shrink-0 text-xs text-[var(--color-disabled)]">{{ $row['time'] }}</span>
                    </div>
                    <div class="mt-px truncate text-[12.5px] text-[var(--color-muted)]">{{ $row['last'] ?? 'Нет сообщений' }}</div>
                </div>
                @if ($row['unread'] > 0)
                    <span class="grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-[var(--color-primary)] px-1.5 text-xs font-bold text-white">{{ $row['unread'] }}</span>
                @endif
            </a>
        @endforeach
    </div>
@endif
@endsection