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

{% block title-section %}{% trans "Author Information" %}{% endblock %}
{% block css %}
    <link href="{% static 'admin/css/timeline.css' %}" rel="stylesheet">{% endblock %}

{% block body %}
    <article>

    <form method="POST">
    <div class="row box expanded">
        {% csrf_token %}
        {% include "submission/timeline.html" with data=article %}
        <div class="large-7 columns">
            <div class="title-area">
                <h2>{% trans "Search for Existing Authors" %}</h2>
            </div>

            <form method="POST">
                {% csrf_token %}
                <div class="row">
                    <div class="large-12 columns">
                        <p>{% trans "Search for a user using email address or ORCiD. If a user is matched, they will be automatically added as an author. This search only returns exact matches." %}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="large-8 columns">
                        <input class="form-control" name="author_search_text" style="width: 100%;" value=""
                               placeholder="{% trans "Search by email address or ORCiD" %}." required>
                    </div>
                    <div class="large-4 columns">
                        <button class="tiny success button" name="search_authors"><i class="fa fa-search">
                            &nbsp;</i>{% trans "Search" %}</button>
                    </div>
                </div>
            </form>
            <div class="title-area">
                <h2>{% trans 'Add Authors' %}</h2>
            </div>

            {% if not user in article.authors.all %}
                <p>{% trans "By default, your account is the owner of this submission, but is not an Author on record. You can add yourself using the button below." %}</p>
                <a class="small success button"
                   href="{% url 'submit_authors' article.id %}?add_self=True">{% trans "Add Self as Author" %}</a>
            {% endif %}
            <p>{% trans "If you cannot find the author record by searching, and you are not the only author, you can add one by clicking the button below. This will open a popup modal for you to complete their details." %}</p>
            <a href="#" data-open="author" class="small success button">{% trans "Add New Author" %}</a>
            {% include "admin/elements/submit/author.html" %}
        </div>

        <div class="large-5 columns">
            <div class="title-area">
                <h2>{% trans 'Current Authors' %}</h2>
            </div>
            <p>{% trans 'Drag and drop an author to re-order them.' %}</p>
            <div class="row">
                <div class="large-12 columns">
                    <table class="small scroll">
                        <thead>
                        <tr>
                            <th></th>
                            <th>{% trans "Name" %}</th>
                            <th>{% trans "Email" %}</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody id="sortable">
                        {% for order in article.articleauthororder_set.all %}
                            <tr id="authors-{{ order.author.pk }}">
                                <td><i class="fa fa-sort"></i></td>
                                <td>{{ order.author.full_name }}</td>
                                <td>{{ order.author.email }}</td>
                                <td><a href="{% url 'delete_author' article.pk order.author.pk %}"><i
                                        class="fa fa-trash">
                                    &nbsp;</i></a></td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3">{% trans "No authors yet, add one!" %}</td>
                            </tr>
                        {% endfor %}
                    </table>
                    <hr/>
                    <form method="POST">
                        {% csrf_token %}
                        <p>{% trans "You are required to select a main author, this author will receive the communications regarding your articles process through our systems. This does not have to be you." %}</p>
                        <label for="main-author">{% trans "Select main author" %}:</label>
                        <select class="form-control" id="main-author" name="main-author">
                            <option value="None">---------</option>
                            {% for author in article.authors.all %}
                                <option value="{{ author.pk }}"
                                        {% if article.correspondence_author.pk == author.pk %}selected{% endif %}>{{ author.full_name }}</option>
                            {% endfor %}
                        </select>
                        <br/>
                        <button class="success button pull-right" type="submit" name="start_submission"><i
                                class="fa fa-check">&nbsp;</i>{% trans "Save and Continue" %}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}

{% block js %}
    {% if modal %}
        {% include "admin/elements/open_modal.html" with target=modal %}
    {% endif %}
    <script src="{% static "admin/js/csrf.js" %}"></script>
    <link type='text/css' href="{% static "common/css/jq-ui.css" %}" rel="stylesheet">
    <script type="text/javascript" src="{% static "common/js/jq-ui.min.js" %}"></script>
    <script>
        $("#sortable").sortable({
            update: function (event, ui) {
                var data = $(this).sortable('serialize');
                console.log(data);
                // POST to server using $.post or $.ajax
                $.ajax({
                    data: data,
                    type: 'POST',
                    url: '{% url 'submit_authors' article.pk %}'
                });
            }
        });
        $("#sortable").disableSelection();
    </script>
{% endblock %}