{% extends base_template %}
{% load debusine %}
{% block head %}
    {{ block.super }}
    <script type="module">
    import { DebusineWorkspaceInheritanceEditor } from "debusine";
    DebusineWorkspaceInheritanceEditor.setup_all();
    </script>
{% endblock %}
{% block content %}
    <p>
        Configure the list of workspaces inherited
        {% help "workspace_inheritance" %} by workspace <b>{{ object.name }}</b>.
    </p>
    <p>
        You can edit the inheritance chain on the left by dragging and dropping
        workspaces in their desired position. Parent workspaces are looked up
        in order starting from the top of the list.
        To add a new workspace in the chain, drag a workspace from the
        "Available workspaces" list into the "Inheritance chain" list. To
        remove one, do the opposite move.
    </p>
    <div class="container mt-4">
        <form method="post">
            {% csrf_token %}
            <noscript>
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Parent workspace</th>
                            <td>Order</td>
                            <td>Delete</td>
                        </tr>
                    </thead>
                    <tbody>
                        {% for f in form %}
                            <tr>
                                <td>
                                    {{ f.parent }}
                                    {% if f.parent.errors %}
                                        <ul class="form-text list-unstyled">
                                            {% for error in f.parent.errors %}<li class="text-danger">{{ error }}</li>{% endfor %}
                                        </ul>
                                    {% endif %}
                                </td>
                                <td>{{ f.ORDER }}</td>
                                <td>{{ f.DELETE }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div class="mt-3">
                    <button class="btn btn-primary btn-sm"
                            type="submit"
                            name="save"
                            value="continue">Save</button>
                    <a class="btn btn-secondary btn-sm" href="{{ object.get_absolute_url }}">Return to workspace</a>
                </div>
            </noscript>
            <div class="debusine-workspace-inheritance-editor d-none">
                {{ form.management_form }}
                <script data-type="current" type="application/json">{{current|safe}}</script>
                <script data-type="available" type="application/json">{{available|safe}}</script>
                <div class="container">
                    <div class="row">
                        <div class="col-6 card" data-type="current">
                            <div class="card-header">
                                <h5 class="card-title">Inheritance chain</h5>
                            </div>
                            <ul class="list-group list-group-flush">
                            </ul>
                        </div>
                        <div class="col-6 card" data-type="available">
                            <div class="card-header">
                                <h5 class="card-title">Available workspaces</h5>
                            </div>
                            <ul class="list-group list-group-flush">
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary btn-sm" type="submit" name="save" value="done">Save</button>
                    <a class="btn btn-secondary btn-sm" href="{{ object.get_absolute_url }}">Cancel</a>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
