{% load securitytags %}
{% load files %}
{% load foundation %}

<div class="reveal small" id="add_proofer" data-reveal data-animation-in="slide-in-up"
     data-animation-out="slide-out-down">
    <div class="card">
        <div class="card-divider">
            <h4><i class="fa fa-plus-circle">&nbsp;</i>Add New Proofreader</h4>
        </div>
        <div class="card-section">
            <form method="POST">
                {% csrf_token %}
                <small>
                    <p>The proofreader pool is made up of:</p>
                    <ul>
                        <li>Authors of this article</li>
                        <li>Editors of the Journal</li>
                        <li>Users with the Proofreader role</li>
                    </ul>
                    <p>Users will be provided with a selection of Galleys and asked to provide feedback on them. The
                        editor can then
                        either make changes to the Galleys themselves or request a Typesetter make changes.</p>
                </small>
                {% include "elements/forms/errors.html" %}
                <h5>Galleys</h5>
                <p>
                    <small>Select the Galleys for this proofing task.</small>
                </p>
                <table class="small scroll">
                    <tr style="text-align: left">
                        <th></th>
                        <th>ID</th>
                        <th>Label</th>
                        <th width="25%">Filename</th>
                        <th>Type</th>
                        <th>Download</th>
                        <th>History</th>
                    </tr>
                    {% for galley in article.galley_set.all %}
                        {% can_view_file galley.file as can_view_file_flag %}
                        {% can_view_file_history galley.file article as can_view_file_history_flag %}
                        <tr>
                            <td><input type="checkbox" name="galleys_for_proofing" value="{{ galley.id }}"
                                       {% if galley in galleys %}checked="checked"{% endif %}></td>
                            <td>{{ galley.pk }}</td>
                            <td>{{ galley.label }}</td>
                            <td>{{ galley.file.original_filename|truncatechars:40 }}</td>
                            <td>Galley</td>
                            <td>{% if can_view_file_flag %}
                                <a href="{% url 'article_file_download' 'id' article.pk galley.file.pk %}"><i
                                        class="fa fa-download">&nbsp;</i></a>{% endif %}
                            </td>
                            <td>{% if can_view_file_history_flag %}
                                <a href="{% url 'file_history' article.pk galley.file.pk %}?return={{ request.path|urlencode }}"><i
                                        class="fa fa-history">
                                    &nbsp;</i></a>{% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </table>

                <h5>Proofreader</h5>
                <a href="#" data-open="enrol" class="button">Enrol Users</a>
                <p>
                    <small>Select the proofreader for this proofing task.</small>
                </p>
                <table class="small scroll" id="proofreader">
                    <thead>
                    <tr>
                        <th>Select</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Role</th>
                    </tr>
                    </thead>

                    <tbody>
                    {% for proofreader in proofreaders %}
                        <tr>
                            <td><input type="radio" name="proofreader" value="{{ proofreader.user.id }}"
                                       {% if proofreader.user == user %}checked="checked"{% endif %}></td>
                            <td>{{ proofreader.user.first_name }}</td>
                            <td>{{ proofreader.user.last_name }}</td>
                            <td>{{ proofreader.role|capfirst }}</td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td>No suitable proofreaders.</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {{ form.task|foundation }}
                {{ form.due|foundation }}
                <button type="submit" class="button success" name="new-proofreader">Add Proofreader</button>
            </form>
        </div>
    </div>
    <button class="close-button" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>