{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template qbank_columnsortorder/column_sort_ui

    Display a list of enable columns with customisation controls, and a list of columns from disabled plugins, with a link to the
    question bank plugin management screen.

    Context variables required for this template:
    * contextid - Current context id.
    * formaction - The URL of the actions controller to submit the form to.
    * sesskey - The current sesskey.
    * previewurl - The URL of the question bank preview page.
    * addcolumn - The context for the qbank_columnsortorder/add_column template.
    * resetcolumns - The context for the qbank_columnsortorder/reset_columns template.
    * names - A list of the currently active columns
      * name - The display name of the column
      * tiptitle - The tooltip text for the move handle.
      * colname - The unique class name for the column from the plugin.
      * escapedclass - The class name with \ replaced by __.
      * widthlabel - The label text of for this column's width field.
      * minwidth - The minimum value for the width field.
      * width - The current value for the width field.
      * actionmenu - The context for core/action_menu, a list of actions for the column.
    * columnsdisabled - Are the any columns defined by disabled plugins?
    * disabled - A list of disabled column names.
      * disabledname - The disabled column's name.
    * urltomanageqbanks - Link to the page for managing qbank plugins.

    Example context (json):
    {
        "contextid": 1,
        "formaction": "https://example.com/question/bank/columnsortorder/actions.php",
        "sesskey": "12345abcde",
        "previewurl": "https://example.com/question/bank/columnsortorder/sortcolumns.php?preview=1",
        "addcolumn": {
            "hashiddencolumns": true,
            "hiddencolumns": [
                {
                    "name": "Column A",
                    "class": "class_name_A",
                    "addurl": "/question/bank/columnsortorder/actions.php?action=add&column=class_name_A"
                },
                {
                    "name": "Column B",
                    "class": "class_name_B",
                    "addurl": "/question/bank/columnsortorder/actions.php?action=add&column=class_name_B"
                }
            ]
        },
        "resetcolumns": {
            "reseturl": "https://example.com/question/bank/columnsortorder/actions.php?action=reset"
        },
        "names": [
            {
                "name": "Column A",
                "tiptitle": "Move Column A",
                "columnid": "qbank_example\\col_name_A-col_name_A",
                "escapedid": "qbank_example__col_name_A-col_name_A",
                "widthlabel": "Width of Column A",
                "minwidth": "10",
                "width": ""
            },
            {
                "name": "Column B",
                "tiptitle": "Move Column B",
                "columnid": "qbank_example\\col_name_B-col_name_B",
                "escapedid": "qbank_example__col_name_B-col_name_B",
                "minwidth": "10",
                "width": "200"
            }
        ],
        "columnsdisabled": true,
        "disabled": [
            {
                "disabledname": "disabled_1"
            },
            {
                "disabledname": "disabled_2"
            }
        ],
        "urltomanageqbanks": "<a href=\"https://example.com/admin/manageqbankplugins.php\">Manage qbank plugins</a>"
    }
}}
<div id="qbank_columnsortorder-{{uniqid}}" {{!
     }}class="container" {{!
     }}data-component="qbank_columnsortorder" {{!
     }}data-callback="column_sort_ui" {{!
     }}data-contextid="{{contextid}}">
    <p>
        {{#str}}qbanksortdescription, qbank_columnsortorder{{/str}}
    </p>
    <form class="has-validation" action="{{formaction}}" method="post">
        <input type="hidden" name="sesskey" value="{{sesskey}}">{{!
        }}<div class="d-grid gap-2 d-md-flex justify-content-between mb-2">
            <div>
                <a class="btn btn-primary" href="{{previewurl}}">
                    {{#str}}preview{{/str}}
                </a>
                {{#addcolumn}}
                    {{>qbank_columnsortorder/add_column}}
                {{/addcolumn}}
            </div>
            {{#resetcolumns}}
                {{>qbank_columnsortorder/reset_columns}}
            {{/resetcolumns}}
        </div>
        <table class="generaltable table table-fixed">
            <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col">{{#str}}name{{/str}}</th>
                    <th scope="col">{{#str}}plugin{{/str}}</th>
                    <th scope="col" class="w-25">{{#str}}columnwidth, qbank_columnsortorder{{/str}}</th>
                    <th scope="col">{{#str}}action{{/str}}</th>
                </tr>
            </thead>
            <tbody class="qbank-column-list">
            {{#names}}
                    <tr class="qbank-sortable-column" data-pluginname="{{class}}" data-name="{{name}}" data-columnid="{{columnid}}">
                        <td>{{>core/drag_handle}}</td>
                        <td>{{name}}</td>
                        <td>{{colname}}</td>
                        <td>
                            <div class="input-group">
                                <label class="sr-only" for="width_{{escapedid}}">{{widthlabel}}</label>
                                <input id="width_{{escapedid}}" {{!
                                   }}class="form-control width-input" {{!
                                   }}type="number" {{!
                                   }}min="{{minwidth}}" {{!
                                   }}name="width[{{escapedid}}]" {{!
                                   }}placeholder="{{#str}}auto, qbank_columnsortorder{{/str}}" {{!
                                   }}value="{{width}}">
                                <button class="btn btn-sm btn-outline-dark savewidths" type="submit" name="action" value="savewidths">
                                    {{#str}}save{{/str}}
                                </button>
                                <div class="invalid-feedback">
                                    {{#str}}invalidwidth, qbank_columnsortorder, {{minwidth}}{{/str}}
                                </div>
                            </div>
                        </td>
                        <td>{{#actionmenu}}{{>core/action_menu}}{{/actionmenu}}</td>
                    </tr>
                {{/names}}
            </tbody>
        </table>
    </form>
    <div>
        {{#columnsdisabled}}
            {{#str}}qbankcolumnsdisabled, qbank_columnsortorder{{/str}}
            <br>
        {{/columnsdisabled}}
        {{#disabled}}
            <div class="list-group-item disabled">
                {{disabledname}}
            </div>
        {{/disabled}}
    </div>
    <div>
        {{{urltomanageqbanks}}}
    </div>
    {{#js}}
        require(['qbank_columnsortorder/admin_actions'], function(AdminTable) {
        AdminTable.init("qbank_columnsortorder-{{uniqid}}");
        });
    {{/js}}
</div>