{% extends 'chat/base.html' %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Chat</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold">Send a Message</h3>
        <form method="post" class="mt-2">
            {% csrf_token %}
            <select name="recipient" class="border p-2 rounded w-full mb-2">
                {% for user in users %}
                    <option value="{{ user.id }}">{{ user.username }}</option>
                {% endfor %}
            </select>
            <textarea name="content" class="border p-2 rounded w-full mb-2" placeholder="Type your message..." required></textarea>
            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Send</button>
        </form>
    </div>
    <div>
        <h3 class="text-lg font-semibold">Conversations</h3>
        <ul class="mt-2">
            {% for user in users %}
                <li class="border-b py-2">
                    <a href="{% url 'messages' user.id %}" class="text-blue-500 hover:underline">{{ user.username }}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}