{% extends "base.html" %}

{% load i18n %}
{% load inventree_extras %}

{% block breadcrumb_list %}
{% endblock %}

{% block page_title %}
{% inventree_title %} | {% trans "Notifications" %}
{% endblock %}

{% block sidebar %}
    {% include "InvenTree/notifications/sidebar.html" %}
{% endblock %}

{% block content %}
    {% include "InvenTree/notifications/inbox.html" %}
    {% include "InvenTree/notifications/history.html" %}
{% endblock %}

{% block js_ready %}
{{ block.super }}

function updateNotificationTables() {
    $("#inbox-table").bootstrapTable('refresh');
    $("#history-table").bootstrapTable('refresh');
}
// this allows the global notification panel to update the tables
window.updateNotifications = updateNotificationTables

function loadNotificationTable(table, options={}, enableDelete=false) {

    var params = options.params || {};
    var read = typeof(params.read) === 'undefined' ? true : params.read;

    $(table).inventreeTable({
        url: options.url,
        name: options.name,
        groupBy: false,
        search: true,
        queryParams: {
            ordering: 'age',
            read: read,
        },
        paginationVAlign: 'bottom',
        formatNoMatches: options.no_matches,
        columns: [
            {
                field: 'pk',
                title: '{% trans "ID" %}',
                visible: false,
                switchable: false,
            },
            {
                field: 'age',
                title: '{% trans "Age" %}',
                sortable: 'true',
                formatter: function(value, row) {
                    return row.age_human
                }
            },
            {
                field: 'category',
                title: '{% trans "Category" %}',
                sortable: 'true',
            },
            {
                field: 'target',
                title: '{% trans "Item" %}',
                sortable: 'true',
                formatter: function(value, row, index, field) {
                    if (value == null) {
                        return '';
                    }

                    var html = `${value.model}: ${value.name}`;
                    if (value.link ) {html = `<a href='${value.link}'>${html}</a>`;}
                    return html;
                }
            },
            {
                field: 'name',
                title: '{% trans "Name" %}',
            },
            {
                field: 'message',
                title: '{% trans "Message" %}',
            },
            {
                formatter: function(value, row, index, field) {
                    var bRead = getReadEditButton(row.pk, row.read)
                    if (enableDelete) {
                        var bDel = "<button title='{% trans "Delete Notification" %}' class='notification-delete btn btn-outline-secondary' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
                    } else {
                        var bDel = '';
                    }
                    var html = "<div class='btn-group float-right' role='group'>" + bRead + bDel + "</div>";
                    return html;
                }
            }
        ]
    });

    $(table).on('click', '.notification-read', function() {
        updateNotificationReadState($(this));
    });
}

loadNotificationTable("#inbox-table", {
    name: 'inbox',
    url: '{% url 'api-notifications-list' %}',
    params: {
        read: false,
    },
    no_matches: function() { return '{% trans "No unread notifications found" %}'; },
});

$("#inbox-refresh").on('click', function() {
    $("#inbox-table").bootstrapTable('refresh');
});

$("#mark-all").on('click', function() {
    inventreeGet(
        '{% url "api-notifications-readall" %}',
        {
            read: false,
        },
        {
            success: function(response) {
                updateNotificationTables();
            }
        }
    );
});

loadNotificationTable("#history-table", {
    name: 'history',
    url: '{% url 'api-notifications-list' %}',
    no_matches: function() { return '{% trans "No notification history found" %}'; },
}, true);

$("#history-refresh").on('click', function() {
    $("#history-table").bootstrapTable('refresh');
});

$("#history-table").on('click', '.notification-delete', function() {
    constructForm(`/api/notifications/${$(this).attr('pk')}/`, {
        method: 'DELETE',
        title: '{% trans "Delete Notification" %}',
        onSuccess: function(data) {
            updateNotificationTables();
        }
    });
});

enableSidebar('notifications');
{% endblock %}
