{% 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>
    <div class="fright">
        <button id="mark-all-read">{% trans "Mark all read" %}</button>
        <button id="clear">{% trans "Clear" %}</button>
    </div>
</div>
{% endblock %}

{% block main_panel %}
{% if notices %}
<table id="notices-table">
    <tr>
        <th width="7%"></th>
        <th width="73%">{% 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">
$('#clear').click(function() {
    location.href = "{% url 'user_notification_remove' %}";
});

$('#mark-all-read').click(function() {
    var unread_items = $('#notices-table .unread');
    if (unread_items.length > 0) {
        $.ajax({
            url: '{% url 'set_notices_seen' %}',
            type: 'POST',
            dataType: 'json',
            beforeSend: prepareCSRFToken,
            success: function() {
                var msg_ct = $("#msg-count");
                $('.num', msg_ct).html(0).addClass('hide');
                document.title = msg_ct.data('orig_doc_title');
                unread_items.removeClass('unread').addClass('read');
            },
            error: ajaxErrorHandler
        });
    }
});

$('.detail', $('#notices-table')).click(function() {
    location.href = $('.brief a', $(this).parent()).attr('href');
});

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']);

            $('.detail', $('#notices-table')).unbind().click(function() {
                location.href = $('.brief a', $(this).parent()).attr('href');
            });

            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 %}