{% 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).attr("checked", status);
            })
        }

        $(document).ready(function() {
            $('#ListForm').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!" %}';
                    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" %} <small></small></h1>
{% endblock %}

{% block content %}
{% if msg_note %}
    <div class="alert alert-success">
        <strong>{% trans "Alert" %} : </strong>  {{ msg_note }}
    </div>
{% endif %}
<div class="span12">
    <div class="row">
        <div class="btn-group">
            <button class="btn">{% trans "Action" %}</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#" onclick="make_read_button()">{% trans "Mark as read" %}</a></li>
                <li><a href="#" onclick="delete_button()">{% trans "Delete notifications" %}</a></li>
            </ul>
        </div>
        <a class="btn btn-info" href="#" onclick="mark_read_all_button()">{% trans "Mark all as read" %}</a>
    </div>
</div>
<br/><br/>
<div class="span12">
    <div class="row">
        <form method="POST" action="/notification_del_read/0/" enctype="multipart/form-data" id="ListForm">
            {% csrf_token %}

            <table class="table table-striped table-bordered table-condensed">
                <thead>
                <tr>
                    <th><input type="checkbox" onclick="toggleChecked(this.checked)"></th>
                    <th>{% sort_link NOTICE_COLUMN_NAME.message col_name_with_order.message %}</th>
                    <th>{% sort_link NOTICE_COLUMN_NAME.notice_type col_name_with_order.notice_type %}</th>
                    <th>{% sort_link NOTICE_COLUMN_NAME.sender col_name_with_order.sender %}</th>
                    <th>{% sort_link NOTICE_COLUMN_NAME.date_field col_name_with_order.added %}</th>
                    <th>{% trans "Action" %}</th>
                </tr>
                </thead>
                {% if user_notification %}
                    {% autopaginate user_notification PAGE_SIZE %}
                    {% for row in user_notification %}
                        <tr>
                            <td><input type="checkbox" name="select" class="checkbox" value="{{ row.id }}" /></td>
                            <td>{{ row.message }}</td>
                            <td>{{ row.notice_type }}</td>
                            <td>{{ row.sender }}</td>
                            <td>{{ row.added }}</td>
                            <td>
                                <a href="../update_notification/{{ row.id }}/">
                                    <span class="label {{ row.unseen|notification_style }}">{{ row.unseen|notification_status }}</span>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="6" align="center">
                            {% trans "no records found"|title %}
                        </td>
                    </tr>
                {% endif %}
            </table>
            {% if user_notification %}
                {% paginate %}
            {% endif %}
            <div align=right>
                {% trans "Total"%} : {{ user_notification_count }}
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    function make_read_button()
    {
        $('<input>').attr({
            type: 'hidden',
            id: 'id_mark_read',
            name: 'mark_read',
            value: 'true',
        }).appendTo('#ListForm');

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

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

{% endblock %}