{% extends 'base.html' %}
{% load avatar_tags %}
{% load smiley_tags %}
{% block custom_css %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/shoutbox_app.css" />
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/pagination.css" />
{% endblock %}
{% block custom_js %}
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/shoutbox_app.js"></script>
{% endblock %}
{% block title %}Shout History{% endblock %}
{% block content %}
<h2>Shout History</h2>
{% if page.object_list %}
{% include 'core/pagination.html' %}

<div class="shoutbox-history">
<table>
{% for shout in page.object_list %}
    <tr>
    <th>
    <a href="{% url bio-view_profile username=shout.user.username %}">{% avatar shout.user %}</a>
    <a href="{% url bio-view_profile username=shout.user.username %}">{{ shout.user.username }}</a>
    </th>
    <td>
<div {% ifequal user shout.user %}class="edit" id="shout-{{ shout.id }}"{% endifequal %}>{{ shout.shout|smilify|urlize }}</div>
    </div>
    <br />
    <span class="date">{{ shout.shout_date|date:"D M d Y H:i:s" }}</span>
    {% ifequal user shout.user %}
        | <a href="#" class="shout-del" id="shout-del-{{ shout.id }}">Delete</a>
    {% endifequal %}
    </td>
    </tr>
{% endfor %}
</table>
</div>

{% include 'core/pagination.html' %}
{% else %}
<p>No shouts at this time.</p>
{% endif %}
{% endblock %}