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

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

{% block wide_page_content %}
<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>

{% if notices %}
<table id="notices-table">
    <thead>
    <tr>
        <th width="7%"></th>
        <th width="73%">{% trans "Message"%}</th>
        <th width="20%">{% trans "Time"%}</th>
    </tr>
    </thead>
    <tbody>
    {% include "notifications/user_notification_tr.html" %}
    </tbody>
</table>
{% if notices_more %}
<div id="notices-more">
    <div id="notices-loading" class="hide"><span class="loading-icon"></span></div>
    <button id="notices-more-btn" class="full-width-btn">{% trans 'More' %}</button>
    <p id="notices-error" class="error hide"></p>
</div>
{% endif %}
{% endif %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('#clear').on('click', function() {
    location.href = "{% url 'user_notification_remove' %}";
});

$('#mark-all-read').on('click', function() {
    var unread_items = $('#notices-table .unread');
    if (unread_items.length > 0) {
        $.ajax({
            url: "{% url 'api-v2.1-notifications' %}",
            type: 'PUT',
            dataType: 'json',
            beforeSend: prepareCSRFToken,
            success: function() {
                unread_items.removeClass('unread').addClass('read');
            },
            error: ajaxErrorHandler
        });
    }
});

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

var start = {{start}}, limit = {{limit}};
$('#notices-more-btn').on('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']);

            $('#notices-table .detail').off().on('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 %}
