{% extends 'side_block.html' %}
{% load core_tags %}
{% load static from staticfiles %}
{% block block_title %}Shoutbox{% endblock %}
{% block block_content %}
<div id="shoutbox-shout-container">
   {% for shout in shouts reversed %}
      <p>
      <span class="shoutbox-user">{{ shout.user.username }}:</span>
      <span class="shoutbox-shout">{{ shout.html|safe }}</span><br />
      <span class="shoutbox-date">{{ shout.shout_date|elapsed }}</span>
      </p>
   {% endfor %}
</div>
<div class="centered">
   <button type="button" id="shoutbox-prev" title="Previous">&laquo;</button>
   <a href="{% url 'shoutbox-history' %}">Shout History</a>
   <button type="button" id="shoutbox-next" title="Next">&raquo;</button>
</div>
{% if user.is_authenticated %}
<div class="centered">
<form>
   <input type="text" maxlength="2048" name="msg" value="" id="shoutbox-smiley-input"
    style="width:98%;" />
   <br />
   <input id="shoutbox-submit" type="submit" value="Shout" />
   <input id="shoutbox-smilies" type="button" value="Smilies" />
</form>
<div id="shoutbox-smiley-frame" style="display:none;">
<img id="shoutbox-busy-icon" src="{% static "icons/ajax_busy.gif" %}" alt="Please wait" />
</div>
</div>
{% else %}
<p>
Please <a href="{% url 'accounts-login' %}">login</a> or
<a href="{% url 'accounts-register' %}">register</a> to shout.
</p>
{% endif %}
{% endblock %}