<x-app-layout title="Messages">
    <div class="mx-auto max-w-2xl">
        <h1 class="text-xl font-semibold text-slate-900">Direct messages</h1>
        <p class="mt-1 text-sm text-slate-600">Private conversations in {{ $organization->name }}</p>

        <form method="POST" action="{{ route('meet.messages.start') }}" class="mt-6 flex gap-2 rounded-2xl border border-slate-200 bg-white p-4">
            @csrf
            <select name="user_ref" required class="flex-1 rounded-lg border-slate-300 text-sm">
                <option value="">Start a conversation…</option>
                @foreach ($members as $member)
                    <option value="{{ $member->user_ref }}">{{ $member->user_ref }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn-primary">Open</button>
        </form>

        <ul class="mt-6 divide-y divide-slate-100 rounded-2xl border border-slate-200 bg-white">
            @forelse ($conversations as $conversation)
                <li>
                    <a href="{{ route('meet.messages.show', $conversation) }}" class="block px-6 py-4 hover:bg-slate-50">
                        <p class="font-medium text-slate-900">
                            {{ $conversation->type === 'dm' ? 'Direct message' : ($conversation->title ?? 'Group') }}
                        </p>
                        @if ($conversation->messages->first())
                            <p class="truncate text-sm text-slate-500">{{ $conversation->messages->first()->body }}</p>
                        @endif
                    </a>
                </li>
            @empty
                <li class="px-6 py-8 text-center text-slate-500">No conversations yet.</li>
            @endforelse
        </ul>
    </div>
</x-app-layout>
