{% extends "frontend/master.html" %}
{% load i18n pagination_tags common_tags frontend_notification_tags %}

{% block extra_header %}
<script type="text/javascript" language="javascript">

function toggleChecked(status) {
    $(".checkbox").each( function() {
        $(this).prop("checked", status);
    })
}

$(document).ready(function() {
    $('#ListFormNotification').submit(function(e) {
        var currentForm = this;
        e.preventDefault();
        var $fields = $(this).find('input[name="select"]:checked');
        if (!$fields.length) {
            msg = '{% trans "you must check at least one box!"|capfirst %}';
            bootbox.alert(msg);
            return false; // The form will *not* submit
        } else {
            var confirm_string;
            if (document.location.href.search("/user_notification/") != -1) {
                confirm_string = $fields.length + '{% trans " notification(s) are going to be deleted?" %}';

                if (document.getElementById('id_mark_read') && document.getElementById('id_mark_read').value == 'true') {
                    confirm_string = $fields.length + '{% trans " notification(s) are going to be marked as read?" %}';
                }
            }
            bootbox.confirm(confirm_string, function(result) {
                if (result) {
                    currentForm.submit();
                }
            });
            return false;
        }
    });
});
</script>
{% endblock %}

{% block content_header %}
    <h1>{% trans "notifications"|capfirst %} <small></small></h1>
{% endblock %}

{% block content %}
{% if msg_note %}
    <div class="alert alert-success">
        <strong>{% trans "alert"|title %} : </strong>  {{ msg_note|capfirst }}
    </div>
{% endif %}


<div class="row">
    <div class="col-md-10 col-xs-8">
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            {% trans "action"|capfirst %} <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" onclick="make_read_button()">{% trans "mark as read"|capfirst %}</a></li>
                <li><a href="#" onclick="delete_button()">{% trans "delete notifications"|capfirst %}</a></li>
            </ul>
        </div>
        <a class="btn btn-info" href="#" onclick="mark_read_all_button()">{% trans "mark all as read"|capfirst %}</a>
    </div>
    <div class="col-md-2 col-xs-4">
        <form role="form" method="post" action="." enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.notification_list }}
        </form>
    </div>
</div>
<br/>
<div class="row">
    <div class="col-md-12">
        <form method="POST" action="/notification_del_read/0/" enctype="multipart/form-data" id="ListFormNotification">
            {% csrf_token %}
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th><input type="checkbox" onclick="toggleChecked(this.checked)"></th>
                        <th>{% sort_link coltitle.description col_name_with_order.description %}</th>
                        <th>{% sort_link coltitle.verb col_name_with_order.verb %}</th>
                        <th>{% sort_link coltitle.level col_name_with_order.level %}</th>
                        <th>{% sort_link coltitle.timestamp col_name_with_order.timestamp %}</th>
                        <th>{% trans "action"|capfirst %}</th>
                    </tr>
                    </thead>
                    {% if all_user_notification %}
                        {% autopaginate all_user_notification 10 %}
                        {% for row in user_notification %}
                            <tr>
                                <td><input type="checkbox" name="select" class="checkbox" value="{{ row.id }}" /></td>
                                <td>{{ row.description }}</td>
                                <td>{{ row.verb }}</td>
                                <td>{{ row.level }}</td>
                                <td>{{ row.timestamp }}</td>
                                <td>
                                    <button class="btn btn-default btn-xs" type="button" onclick="change_status({{ row.id }})">
                                        <span class="glyphicon {% if row.unread %}glyphicon-star{% else %}glyphicon-ok{% endif %}"></span> {{ row.unread|notification_status }}
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="6" align="center">
                                {% trans "no records found"|title %}
                            </td>
                        </tr>
                    {% endif %}
                </table>
            </div>
            {% if all_user_notification %}
                {% paginate %}
            {% endif %}
            <div class="text-right">
                {% trans "total"|capfirst %} : {{ user_notification_count }}
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    function change_status(id){
        window.location.replace("../update_notification/" + String(id) + "/");
    }
    function make_read_button()
    {
        $('<input>').attr({
            type: 'hidden',
            id: 'id_mark_read',
            name: 'mark_read',
            value: 'true',
        }).appendTo('#ListFormNotification');

        $('#ListFormNotification').submit();
    }
    function delete_button()
    {
        $('<input>').attr({
            type: 'hidden',
            id: 'id_mark_read',
            name: 'mark_read',
            value: 'false',
        }).appendTo('#ListFormNotification');

        $('#ListFormNotification').submit();
    }
    function mark_read_all_button()
    {
        window.location.replace("/user_notification/?notification=mark_read_all");
    }
</script>

{% endblock %}