{% extends "chatrooms/base.html" %}

{% block extra_headers %}
    <!-- <link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/room_page.css"> -->
    <script type="text/javascript">
        getContext = function(){
            return {
                "username": "{{ user.username }}",
                "room_id": {{ room.id }},
            }
        }
    </script>
    <script type="text/javascript" src="{{ STATIC_URL }}/js/room.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/css/room.css">
{% endblock %}


{% block content %}
    <div id="chatContent">
        <div id="chat">
            <div id="chatText"></div>
            <div id="chatInput">
                <input id="chatSendText" name="chatSendText" type="text" >
                <input id="chatSendButton" type="button" value="Send">
            </div>
        </div>
        <div id="connectedUsers">
            <p id="connectedUsersTitle">Connected users</p>
            <ol id="connectedUsersList">
            </ol>
        </div>
    </div>
{% endblock %}
