@extends('web.layouts.app', ['title' => 'Direct Messages'])
@section('content')
<div class="split">
    <aside class="card">
        <h3>Start DM</h3>
        <form method="post" action="{{ route('web.dm.conversations.store') }}">
            @csrf
            <label>User
                <select name="member_ids[]" required>
                    @foreach($users as $user)
                        <option value="{{ $user->id }}">{{ $user->username }} - {{ $user->name }}</option>
                    @endforeach
                </select>
            </label><br>
            <button class="btn primary">Open</button>
        </form>
    </aside>
    <section class="grid">
        @forelse($conversations as $conversation)
            <div class="card">
                <h3>{{ $conversation->members->where('id', '!=', auth()->id())->pluck('username')->join(', ') ?: 'Conversation' }}</h3>
                <div class="messages">
                    @foreach($conversation->messages->take(-8) as $message)
                        <div class="message {{ $message->user_id === auth()->id() ? 'me' : '' }}"><strong>{{ $message->user?->username }}</strong><p>{{ $message->body }}</p></div>
                    @endforeach
                </div>
                <form method="post" action="{{ route('web.dm.messages.store', $conversation) }}" class="row">
                    @csrf
                    <input name="body" required aria-label="Direct message">
                    <button class="btn primary">Send</button>
                </form>
            </div>
        @empty <div class="card muted">DM yok.</div> @endforelse
    </section>
</div>
@endsection