{% extends "reviews/base.html" %}

{% load i18n %}

{% block extra_style %}
    <style type="text/css">
        .table-striped tbody tr.selected td {
            background-color: #F7F4E6;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>Result Notification</h1>
    
    <span class="action-counter">0</span> selected
    
    <table class="table table-striped table-bordered">
        <thead>
            <th><input type="checkbox" id="action-toggle"></th>
            <th>#</th>
            <th>{% trans "Speaker / Title" %}</th>
            <th>{% trans "Category" %}</th>
            <th>{% trans "Status" %}</th>
            <th>{% trans "Notified?" %}</th>
        </thead>
        
        <tbody>
            {% for proposal in proposals %}
                <tr>
                    <td><input class="action-select" type="checkbox" name="_selected_action" value="{{ proposal.pk }}"></td>
                    <td>{{ proposal.number }}</td>
                    <td>
                        <a href="{% url review_detail proposal.pk %}">
                            <small><strong>{{ proposal.speaker }}</strong></small>
                            <br />
                            {{ proposal.title }}
                        </a>
                    </td>
                    <td>{{ proposal.track }}</td>
                    <td>
                        {% with proposal.result.status as status %}
                            <div class="{{ status }}">
                                {% if status != "undecided" %}
                                    <span>{{ status }}</span>
                                {% endif %}
                            </div>
                        {% endwith %}
                    </td>
                    <td>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}

{% block extra_script %}
    <script type="text/javascript">
        (function($) {
            $.fn.actions = function(opts) {
                var options = $.extend({}, $.fn.actions.defaults, opts);
                var actionCheckboxes = $(this);
                checker = function(checked) {
                    $(actionCheckboxes).prop("checked", checked)
                        .parent().parent().toggleClass(options.selectedClass, checked);
                }
                updateCounter = function() {
                    var sel = $(actionCheckboxes).filter(":checked").length;
                    $(options.counterContainer).html(sel);
                    $(options.allToggle).prop("checked", function() {
                        if (sel == actionCheckboxes.length) {
                            value = true;
                        } else {
                            value = false;
                        }
                        return value;
                    });
                }
                // Check state of checkboxes and reinit state if needed
                $(this).filter(":checked").each(function(i) {
                    $(this).parent().parent().toggleClass(options.selectedClass);
                    updateCounter();
                });
                $(options.allToggle).click(function() {
                    checker($(this).prop("checked"));
                    updateCounter();
                });
                lastChecked = null;
                $(actionCheckboxes).click(function(event) {
                    if (!event) { var event = window.event; }
                    var target = event.target ? event.target : event.srcElement;
                    if (lastChecked && $.data(lastChecked) != $.data(target) && event.shiftKey == true) {
                        var inrange = false;
                        $(lastChecked).prop("checked", target.checked)
                            .parent().parent().toggleClass(options.selectedClass, target.checked);
                        $(actionCheckboxes).each(function() {
                            if ($.data(this) == $.data(lastChecked) || $.data(this) == $.data(target)) {
                                inrange = (inrange) ? false : true;
                            }
                            if (inrange) {
                                $(this).prop("checked", target.checked)
                                    .parent().parent().toggleClass(options.selectedClass, target.checked);
                            }
                        });
                    }
                    $(target).parent().parent().toggleClass(options.selectedClass, target.checked);
                    lastChecked = target;
                    updateCounter();
                });
            }
            /* Setup plugin defaults */
            $.fn.actions.defaults = {
                counterContainer: "span.action-counter",
                allToggle: "#action-toggle",
                selectedClass: "selected"
            }
        })($);
        $(function() {
            $("tr input.action-select").actions();
        });
    </script>
{% endblock %}