{% block content %}
    <h1>Chat with {{ receiver.id }}</h1>
    <div id="chat-messages">
        {% for message in messages %}
            <div class="message">
                <p>{{ message.message }}</p>
                <small>From {{ message.sender.id }} at {{ message.created_at }}</small>
            </div>
        {% endfor %}
    </div>
    <form id="chat-form" method="post">
        {% csrf_token %}
        <input type="text" id="message-input" name="message" placeholder="Type your message...">
        <input type="submit" value="Send">
    </form>

    <script>
        const chatSocket = new WebSocket(
            'ws://'
            + window.location.host
            + '/ws/chat/{{ sender.id }}/{{ receiver.id }}/'
        );

        chatSocket.onmessage = function(event) {
            const message = JSON.parse(event.data);
            const messageElement = document.createElement('div');
            messageElement.classList.add('message');
            messageElement.innerHTML = `
                <p>${message.message}</p>
                <small>From ${message.sender} at ${message.created_at}</small>
            `;
            document.querySelector('#chat-messages').appendChild(messageElement);
        };

        document.querySelector('#chat-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const messageInputDom = document.querySelector('#message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            messageInputDom.value = '';
        });
    </script>

{% endblock %}