.table-striped tbody tr.selected td {

            background-color: #F7F4E6;

        }

    </style>

{% endblock %}

{% block body %}

    <h1>Result Notification</h1>

    <form method="post" action="{% url result_notification_prepare section_slug status %}">

        {% csrf_token %}

        <p>

            Select one or more proposals (<span class="action-counter">0</span> currently selected)

            <br/>

            then pick an email template

            <select name="notification_template">

                <option value="">[blank]</option>

                {% for template in notification_templates %}

                    <option value="{{ template.pk }}">{{ template.label }}</option>

                {% endfor %}

            </select>

            <br/>

        </p>

        <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>

    </form>

{% 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)

                            <br />

                            {{ proposal.title }}

                        </td>

                    </tr>

                {% endfor %}

            </table>

        </div>

        <div class="span6">

            <h2>Email</h2>

            <form method="post" action="{% url result_notification_send section_slug status %}">

                <label>Subject</label>

                <input type="text" name="subject" class="span5" value="{{ notification_template.subject }}" />

                <br/>

                <label>Body</label>

                <textarea class="span5" rows="10" name="body">{{ notification_template.body }}</textarea>

                <br/>

                <input type="hidden" name="notification_template" value="{{ notification_template.pk }}" />

                <input type="hidden" name="proposal_pks" value="{{ proposal_pks }}" />

                <p>

                    If the <b>Body</b> includes the string <code>{% templatetag openvariable %} proposal {% templatetag closevariable %}</code> then it will be

                    replaced with the title of the proposal when the email is sent.

                </p>

                <button type="submit" class="btn btn-primary">Send {{ proposals|length }} Email{{ proposals|length|pluralize }}</button>

            </form>

        </div>

    </form>

{% endblock %}