Chat List

@props([
    'title' => 'Messages',
])

{{--
    Chat List 01 — Conversation inbox / chat-list sidebar.
    Interactive: Alpine x-data with search filter, active conversation tracking,
    and per-row presence + unread badge. Each row composes <x-ui.avatar>, with
    the initials bound via x-text so Alpine can render them from the client-side
    conversation list.
--}}
<x-ui.section
    data-slot="block-chat-list"
    aria-label="{{ __($title) }}"
    space="lg" {{ $attributes }}
>
    <div class="mx-auto flex max-w-sm flex-col px-4">
        <div
            x-data="{
                q: '',
                active: 1,
                conversations: [
                    { id: 1, name: 'Alice Martin',    initials: 'AM', preview: 'Sounds good, I\'ll send the file over.',   time: '2m',  unread: 3, online: true  },
                    { id: 2, name: 'Bob Chen',         initials: 'BC', preview: 'Can we reschedule the call tomorrow?',     time: '14m', unread: 1, online: false },
                    { id: 3, name: 'Design Team',      initials: 'DT', preview: 'Final mockups are ready for review 🎉',    time: '1h',  unread: 0, online: true  },
                    { id: 4, name: 'Carlos Rivera',    initials: 'CR', preview: 'Thanks for the update!',                  time: '3h',  unread: 0, online: false },
                    { id: 5, name: 'Engineering Guild', initials: 'EG', preview: 'Deploy is scheduled for Friday morning.',  time: '5h',  unread: 7, online: true  },
                    { id: 6, name: 'Priya Sharma',     initials: 'PS', preview: 'Loved the presentation — well done.',     time: '1d',  unread: 0, online: false },
                ],
                get filtered() {
                    const s = this.q.toLowerCase();
                    return this.conversations.filter(c =>
                        c.name.toLowerCase().includes(s) || c.preview.toLowerCase().includes(s)
                    );
                },
                init() {},
                destroy() {},
            }"
            class="overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm"
        >
            {{-- Header --}}
            <header class="flex items-center justify-between gap-4 border-b border-border px-4 py-4">
                <div class="flex items-center gap-2">
                    <h2 class="text-base font-semibold text-foreground">{{ __($title) }}</h2>
                </div>
                <x-ui.button size="icon" variant="ghost" aria-label="{{ __('New chat') }}">
                    {{-- Pencil-square icon --}}
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                    </svg>
                </x-ui.button>
            </header>

            {{-- Search --}}
            <div class="px-4 py-4">
                <x-ui.input-group>
                    <x-ui.input-group.addon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg></x-ui.input-group.addon>
                    <x-ui.input-group.input
                        type="search"
                        x-model="q"
                        placeholder="{{ __('Search…') }}"
                        aria-label="{{ __('Search conversations') }}"
                    />
                </x-ui.input-group>
            </div>

            {{-- Conversation list --}}
            <ul
                role="list"
                class="max-h-[26rem] overflow-y-auto divide-y divide-border"
                aria-label="{{ __('Conversations') }}"
            >
                <template x-for="c in filtered" :key="c.id">
                    <li role="listitem">
                        <button
                            type="button"
                            class="w-full px-4 py-4 text-start transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            :class="active === c.id ? 'bg-accent' : 'hover:bg-accent/50'"
                            x-on:click="active = c.id"
                            :aria-pressed="active === c.id"
                            :aria-label="c.name"
                        >
                            <div class="flex items-center gap-4">
                                <div class="relative shrink-0">
                                    <x-ui.avatar>
                                        <span x-text="c.initials"></span>
                                    </x-ui.avatar>
                                    {{-- Presence dot --}}
                                    <span
                                        x-show="c.online"
                                        class="absolute bottom-0 end-0 size-2 rounded-full bg-success ring-2 ring-card"
                                        aria-hidden="true"
                                    ></span>
                                </div>

                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-2">
                                        <span class="flex-1 truncate text-sm font-medium text-foreground" x-text="c.name"></span>
                                        <span class="ms-auto shrink-0 text-xs text-muted-foreground" x-text="c.time"></span>
                                    </div>
                                    <div class="mt-0.5 flex items-center gap-2">
                                        <span class="flex-1 truncate text-xs text-muted-foreground" x-text="c.preview"></span>
                                        {{-- Unread badge --}}
                                        <span
                                            x-show="c.unread > 0"
                                            x-text="c.unread"
                                            class="ms-auto inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground"
                                            aria-label="{{ __('unread messages') }}"
                                        ></span>
                                    </div>
                                </div>
                            </div>
                        </button>
                    </li>
                </template>

                {{-- Empty state --}}
                <li x-show="filtered.length === 0" class="px-4 py-8 text-center text-sm text-muted-foreground">
                    {{ __('No conversations found.') }}
                </li>
            </ul>
        </div>
    </div>
</x-ui.section>