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

{% block title %}Manage Guest Editors{% endblock title %}
{% block title-section %}Manage Guest Editors{% endblock title-section %}

{% block breadcrumbs %}
    {{ block.super }}
    {% include "elements/breadcrumbs/issue_management.html" %}
    <li>Add Guest Editor</li>
{% endblock breadcrumbs %}


{% block body %}
    <div class="large-12 columns">
        <div class="box">
            <div class="title-area">
                <h2>Issue</h2>
                <a class="button" href="{% url 'manage_issues_id' issue.pk %}">Back</a>
            </div>
            <div class="content">
                <table class="scroll">
                    <tr>
                        <th>Title</th>
                        <th>Volume</th>
                        <th>Number</th>
                        <th>Date</th>
                        <th>No. Articles</th>
                    </tr>
                    <tr>
                        <td>{{ issue.issue_title }}</td>
                        <td>{{ issue.volume }}</td>
                        <td>{{ issue.issue }}</td>
                        <td>{{ issue.date|date:"Y-m-d" }}</td>
                        <td>{{ issue.manage_issue_list|length }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div class="large-12 columns">
        <div class="box">
            <div class="title-area">
                <h2>Guest Editors</h2>
            </div>
            <div class="content">
                <form method="POST" action="{% url 'manage_remove_issue_editor' issue.pk %}">
                    {% csrf_token %}
                    <table class="small scroll">
                        <thead>
                        <tr>
                            <td></td>
                            <th>ID</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody id="sortable">
                        {% for editor in editors %}
                            <tr id="guesteditors-{{ editor.pk }}">
                                <td><span class="fa fa-sort"></span></td>
                                <td>{{ editor.account.id }}</td>
                                <td>{{ editor.account.first_name }}</td>
                                <td>{{ editor.account.last_name }}</td>
                                <td>{{ editor.account.email }}</td>
                                <td>
                                    {{ editor.role }}
                                </td>
                                <td>
                                    <button type="submit"
                                            name="user_remove"
                                            value="{{ editor.pk }}"
                                            class="tiny button warning">
                                        <i class="fa fa-chain-broken">&nbsp;</i>Remove
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <div class="large-12 columns">
        <div class="box">
            <div class="title-area">
                <h2>Journal Users</h2>
            </div>
            <div class="content">
                <table class="small scroll" id="guest-editor-users">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Role</th>
                    </tr>
                    </thead>
                    <tbody id="sortable">
                    {% for user in users %}
                        <tr id="articles-{{ dict.article.pk }}">
                            <td>{{ user.id }}</td>
                            <td>{{ user.first_name }}</td>
                            <td>{{ user.last_name }}</td>
                            <td>{{ user.email }}</td>
                            <td>
                                <form method="POST">
                                    {% csrf_token %}
                                    <input name="role" value="Guest Editor">

                                    <button type="submit" name="user"
                                            value="{{ user.pk }}"
                                            class="tiny button">
                                        <i class="fa fa-plus">&nbsp;</i>Add
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock body %}

{% block js %}
    {% include "elements/datatables.html" with target="#guest-editor-users" page_length=10 %}
    <script src="{% static "admin/js/csrf.js" %}"></script>
    <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 'manage_add_guest_editor' issue.pk %}'
                });
            }
        });
        $("#sortable").disableSelection();
    </script>
{% endblock js %}