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


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

{% block breadcrumbs %}
    {{ block.super }}
    {% include "elements/breadcrumbs/copyeditor_base.html" %}
{% endblock breadcrumbs %}

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

                    <div class="large-6 columns">
                        <div class="title-area">
                            <h2>Upload Replacement File</h2>
                        </div>
                        <form method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            <input name="label" type="text" placeholder="Add a file label">
                            <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="?file_id={{ file.id }}"><i
                                        class="fa fa-download">&nbsp;{{ file }}</i></a></td>
                            </tr>
                        </table>
                    </div>
                </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 %}