{% extends "base.html" %}

{% block title %}{{ room }}{% endblock %}

{% block extra_js %}
<script type="text/javascript">
    window.room = "{{ room.id }}";
</script>
<script src="/static/js/chat.js"></script>
{% endblock %}

{% block content %}
<div id="chat">
    <div id="nickname">
        <form id="set-nickname" class="wrap">
            <p>Please type in your nickname and press enter.</p>
            <input id="nick">
            <p id="nickname-err">Nickname already in use</p>
        </form>
    </div>
    <div id="connecting">
        <div class="wrap">Connecting to socket.io server</div>
    </div>

    <div id="messages">
        <div id="nicknames"><span>Online:</span></div>
        <div id="lines"></div>
    </div>

    <form id="send-message">
        <input id="message">
        <button>Send</button>
    </form>
</div>
{% endblock %}
