{% extends "admin/core/base.html" %}
{% load static %}

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

{% block title %}Article Document Management{% endblock title %}
{% block title-section %}Article Document Management{% endblock %}
{% block title-sub %}#{{ article.pk }} / {{ article.correspondence_author.last_name }} / {{ article.safe_title }}{% endblock %}

{% block body %}
    {% csrf_token %}
    <div class="row expanded box">
        <div class="large-12 columns">
            <div class="title-area">
                Article #{{ article.pk }} {{ article.safe_title }} Files
            </div>
            <table id="files" class="small files">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Label</th>
                    <th>Filename</th>
                    <th>Type</th>
                    <th>Uploaded</th>
                    <th>Modified</th>
                    <th>Download</th>
                    <th>History</th>
                    <th>Replace</th>
                    <th>Delete</th>
                    {% if request.user.is_admin %}
                    <th>Admin</th>
                    {% endif %}
                </tr>
                </thead>
                <tbody>
                {% for file in files %}
                    {% can_edit_file file article as can_edit_file_flag %}
                    {% can_view_file file as can_view_file_flag %}
                    {% can_view_file_history file article as can_view_file_history_flag %}
                    <tr>
                        <td>{{ file.pk }}</td>
                        <td class="wrap-long-text">{% if not file.label %}No Label{% endif %}{{ file.label }}</td>
                        <td class="wrap-long-text">{{ file }}</td>
                        <td>{% file_type article file %}</td>
                        <td>{{ file.date_uploaded|date:"Y-m-d G:i" }}</td>
                        <td>{{ file.last_modified|date:"Y-m-d G:i" }}</td>
                        <td>{% if can_view_file_flag %}
                            <a href="{% url 'article_file_download' 'id' article.pk 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 file.pk %}?return={{ request.path|urlencode }}"><i
                                    class="fa fa-history">
                                &nbsp;</i></a>{% endif %}
                        </td>
                        <td>{% if can_edit_file_flag %}
                            <a href="{% url 'article_file_replace' 'id' article.pk file.pk %}?return={{ request.path|urlencode }}%3Freturn%3D{{ request.GET.return|urlencode }}"><i
                                    class="fa fa-cloud-upload">&nbsp;</i></a>{% endif %}</td>
                        <td>{% if can_edit_file_flag %}
                            <a href="{% url 'file_delete' article.pk file.pk %}?return={{ request.path|urlencode }}%3Freturn%3D{{ request.GET.return|urlencode }}"><i
                                    class="fa fa-trash">
                                &nbsp;</i></a>{% endif %}</td>
                        {% if request.user.is_admin %}
                        <td>
                            <a target="_blank" href="{% url 'admin:core_file_change' file.pk %}"><span class="fa fa-cogs">&nbsp;</span>Edit</a>
                        </td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tbody>
            </table>

            <p>If required, you can upload new files to various sections of the workflow.</p>
            <a class="button success" data-open="uploadbox" aria-controls="uploadbox" aria-haspopup="true" tabindex="0"><i
                    class="fa fa-cloud-upload">
                &nbsp;</i>Upload File</a>

        </div>
    </div>



    <div class="large-12 columns">
        <form method="POST">
            {% csrf_token %}
            <a class="button success float-right" href="{{ return_url }}"><i class="fa fa-check">&nbsp;</i>Return
            </a>
        </form>
    </div>

    <div class="reveal" id="uploadbox" 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-upload">&nbsp;</i>Upload File</h4>
            </div>
        </div>
        <div class="card-section">
            <p>Add a label and then upload a file. You can only upload one file type at a time.</p>
            {% if error %}
                <div class="alert alert-warning" role="alert">{{ error }}</div>
            {% endif %}
            <button class="close-button" data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>

            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <label for="label">File Label*</label>
                <input type="text" maxlength="200" id="label" name="label" placeholder="Add file label here." required="required" />
                <input type="hidden" name="upload" value="upload">
                <h4>Manuscript File</h4>
                <div class="clearfix">
                    <div>
                        <p><small>Manuscript files hold the main text content of the
                        article while it is being finalized. They are used across review,
                        copyediting, and typesetting.</small></p>
                        <input name="manu-file" type="file" class="float-left" style="width:50%;"
                               data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <button type="submit" class="button success float-right" name="manu"><i
                                class="fa fa-upload">
                            &nbsp;</i>Upload
                        </button>
                    </div>
                </div>

                <h4>Figure/Data File</h4>
                <div class="clearfix">
                    <div>
                        <p><small>Figure files hold images that will be included
                        in the article. Data files hold any other other content
                        that is not an image or main text content
                        but that will be included in the published article.</small></p>
                        <input name="fig-file" type="file" class="float-left" style="width:50%;"
                               data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <button type="submit" class="button success float-right" name="fig"><i
                                class="fa fa-upload">
                            &nbsp;</i>Upload
                        </button>
                    </div>
                </div>

                <h4>Galley File</h4>
                <div class="clearfix">
                    <div>
                        <p><small>Galleys are files that have been typeset
                        or encoded, most often in XML, HTML, or PDF format,
                        so that they are ready for proofing and publication.</small></p>
                        <input name="galley-file" type="file" class="float-left" style="width:50%;"
                               data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <button type="submit" class="button success float-right" name="galley"><i
                                class="fa fa-upload">
                            &nbsp;</i>Upload
                        </button>
                    </div>
                </div>

                <h4>Proofing File</h4>
                <div class="clearfix">
                    <div>
                        <p><small>Proofing files are copies of galleys
                        that have been marked up to indicate corrections to be
                        made in subsequent rounds of typesetting.</small></p>
                        <input name="proofing-file" type="file" class="float-left" style="width:50%;"
                               data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <button type="submit" class="button success float-right" name="proofing"><i
                                class="fa fa-upload">
                            &nbsp;</i>Upload
                        </button>
                    </div>
                </div>

                <h4>Source File</h4>
                <div class="clearfix">
                    <div>
                        <p><small>Source files are files created in typesetting
                        while generating a galley. They are often in
                        specialized file formats used by graphic design and
                        document layout applications.</small></p>
                        <input name="source-file" type="file" class="float-left" style="width:50%;"
                               data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <button type="submit" class="button success float-right" name="source"><i
                                class="fa fa-upload">
                            &nbsp;</i>Upload
                        </button>
                    </div>
                </div>

                <h4>Supplementary File</h4>
                <div class="clearfix">
                    <div>
                        <p><small>Supplementary files are publication-ready
                        pieces of content to be published alongside the article,
                        often with their own DOIs.</small></p>
                        <input name="supp-file" type="file" class="float-left" style="width:50%;"
                               data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <button type="submit" class="button success float-right" name="supp"><i
                                class="fa fa-upload">
                            &nbsp;</i>Upload
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>



{% endblock body %}

{% block js %}
    {% include "admin/elements/datatables.html" with target="#files" %}
{% endblock js %}