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


{% block title %}Replacing Article File for {{ revision_request.article.title }}{% endblock title %}
{% block title-section %}Replacing Article File for {{ revision_request.article.safe_title }}{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    {% include "elements/breadcrumbs/review_base.html" with subpage="yes" %}
    <li><a href="{% url 'do_revisions' revision_request.article.pk revision_request.pk %}">Revisions
        for {{ revision_request.article.safe_title }}</a></li>
    <li>Replace File</li>
{% endblock breadcrumbs %}

{% block body %}
    {% csrf_token %}
    <div class="large-12 columns">
        <div class="box">
            <div class="row expanded">
                <div class="large-12 columns">
                    <div class="title-area">
                        <h2>Upload Guidelines</h2>
                    </div>
                    <div class="content">
                        <p>You are revising article #{{ article.pk }}, {{ article.safe_title }}. </p><p>Add a label, select a file and use the Upload and Continue button to upload the file</p>
                        {% if error %}
                            <div class="alert alert-warning" role="alert">{{ error }}</div>
                        {% endif %}
                    </div>
                </div>

                <div class="large-6 columns">
                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="title-area">
                            <h2>Upload Revised File</h2>
                        </div>
                        <input name="label" type="text" value="Revised Manuscript">
                        <input name="replacement-file" type="file" class="filestyle" data-placeholder="No file"
                               data-buttonName="btn-primary">
                        <br/>
                        <button type="submit" class="button success" name="replacement"><i class="fa fa-upload">
                            &nbsp;</i>Upload and Continue
                        </button>
                    </form>
                </div>
                <div class="large-6 columns">
                    <div class="title-area">
                        <h2>Current File</h2>
                    </div>
                    <table class="scroll small">
                        <tr>
                            <th>Label</th>
                            <th>File Name</th>
                        </tr>
                        <tr>
                            <td>{{ file.label }}</td>
                            <td><a href="?download=true"><i
                                    class="fa fa-download">&nbsp;{{ file }}</i></a></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock body %}

{% block js %}
    <script type="text/javascript" src="{% static "js/bootstrap-filestyle.min.js" %}"></script>
    <script type="text/javascript">
        $(":file").filestyle({
            placeholder: "No file",
            buttonName: "btn-primary",
            buttonBefore: true,
            buttonText: "&nbsp; Choose file"
        });
    </script>
{% endblock %}