{% extends "myhome_base.html" %}
{% load avatar_tags i18n seahub_tags %}

{% block sub_title %}{% trans "Notices" %} - {% endblock %}

{% block title_panel %}
<div class="tabnav">
    <ul class="tabnav-tabs">
        <li class="tabnav-tab tabnav-tab-cur"><a href="{% url 'user_notification_list' %}">{% trans "Notices" %}</a></li>
    </ul>
    <button id="clear" class="fright">{% trans "Clear" %}</button>

</div>
{% endblock %}

{% block main_panel %}
{% if notices %}
<table id="notices-table">
    <tr>
        <th width="80%">{% trans "Message"%}</th>
        <th width="20%">{% trans "Time"%}</th>
    </tr>
    {% include "notifications/user_notification_tr.html" %}
</table>
<div id="notices-more">
  <div id="notices-loading" class="hide"><img src="{{MEDIA_URL}}img/loading-icon.gif" alt="{% trans 'Loading...' %}" /></div>
  <button id="notices-more-btn" class="{% if not notices_more %}hide{% endif %}">{% trans 'More' %}</button>
  <p id="notices-error" class="error hide"></p>
</div>    

{% endif %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$(function(){       
    $('tr[data-href]').click(function() {
        location.href = $(this).data('href');
    });
});

$('#clear').click(function() {
    location.href = "{% url 'user_notification_remove' %}";
});

var start = {{start}}, limit = {{limit}};
$('#notices-more-btn').click(function() {
    $(this).addClass('hide');
    $('#notices-loading').removeClass('hide');
    $.ajax({
        url:'{% url "user_notification_more" %}' + '?start=' + start + '&limit=' + limit,
        dataType: 'json',
        cache: false,
        success: function(data) {
            $('#notices-loading').addClass('hide');
            $('#notices-table').append(data['html']);
            start = data['new_start'];

            if (data['notices_more']) {
                $('#notices-more-btn').removeClass('hide');
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $('#notices-loading').addClass('hide');
            if (!jqXHR.responseText && textStatus != 'abort') {
                $('#notices-error').html("{% trans "Failed. Please check the network." %}").removeClass('hide');  
            }   
        }
    });
});

</script>
{% endblock %}
