{% extends "base.html" %}

{% block content %}
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
  <div class="container">
    <div class="row">
    <ul class="nav">
      <li><a href="/">Pulsar-Django chat</a></li>
      <li><a href="/admin/">admin</a></li>
    </ul>
  </div>
 </div>
 </div>
</div>
<div class="main">
<div class="container">
   <div class="row">
    <div class="span4">
        <div id="input" class="layout">
          <textarea id="message" class='span4' rows="3" placeholder='Write your message'></textarea>
          <button id="publish" class="btn btn-success">publish</button>
        </div>
        <h4>In the chatroom</h4>
        <div id="users" class="layout panel"></div>
    </div>
    <div class="span8">
        <div id="messages" class="layout panel"></div>
    </div>
   </div>
    <footer></footer>
</div>
</div>
{% endblock content %}

{% block script %}
<script>
(function($) {
    $(document).ready(function() {
        $.wschat(new WebSocket("ws://{{ HOST }}/message"));
    });
}(jQuery));
</script>
{% endblock %}
