{% load i18n %}
{% if messages %}
<style>
    ul.user-messages {
        padding: 5px 5px 5px 5px;
        border: solid thin #ccc;
        background: #eee;
        position: absolute;
        top: 10px;
        left: 300px;
        right: 300px;
    }
    ul.user-messages li {
        list-style: none;
        margin-left: 0;
    }
    ul.user-messages a.close-message{
        float: right;
    }
    ul.user-messages .error {
        color: red;
        font-weight: bold;
    }
    
</style>
<ul class="user-messages">
    <a href="" class="close-message">{% trans "close" %}</a>
    {% for m in messages %}
      <li>
        <span class="text-message {{m.tags}}">{{m}}</a>
      </li>
    {% endfor %}
</ul>
<script>
    $(function() {
        $('a.close-message').live('click', function() {
            $(this).parent().hide('slow');
            return false;
        })
        setTimeout(function() {$('.user-messages').hide('slow')}, 2000);
    });
</script>
{% endif %}