{{!
    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 core_customfield/list

  Moodle list template.

  The purpose of this template is to render a list.

  Classes required for JS:
  * none

  Data attributes required for JS:
  * data-component
  * data-area
  * data-itemid

  Context variables required for this template:
  * attributes Array of name / value pairs.

  Example context (json):
  {
      "component": "core_nonexisting",
      "area": "course",
      "itemid": 0,
      "usescategories": 1,
      "canmovecategories": 1,
      "canmovefields": 1,
      "categories": [
          { "id": "0",
            "name": "Other fields",
            "nameeditable": "Other fields",
            "addfieldmenu": "Add field",
            "canedit": true,
            "fields": [
                { "id": 0, "name": "Field name", "shortname": "shortname", "type": "Text" },
                { "id": 0, "name": "Another field", "shortname": "checkme", "type": "Checkbox" }
            ]
          },
          { "id": "00",
            "name": "Empty category",
            "nameeditable": "Empty category",
            "addfieldmenu": "Add field",
            "canedit": true,
            "fields": [] }
      ],
      "singleselect" : "select"
  }
}}

{{{alert}}}

<div data-region="list-page" id="customfield_catlist" data-component="{{component}}" data-area="{{area}}" data-itemid="{{itemid}}">
    <div class="row">
        <div class="col align-self-end">
            {{#usescategories}}
            <button type="button" class="btn btn-secondary float-end" data-role="addnewcategory">{{#str}}addnewcategory, core_customfield{{/str}}</button>
            {{/usescategories}}
        </div>
    </div>

    {{^categories}}
        {{{nocategories}}}
    {{/categories}}

    {{#categories}}
        {{#canedit}}<div class="categorieslist">{{/canedit}}
        <div data-category-id="{{id}}" data-category-name="{{name}}" id="category-{{id}}" class="mt-2">
        <div class="row justify-content-between align-items-end">
            <div class="col-6 categoryinstance d-flex align-items-center gap-3">
                {{#usescategories}}
                    <h3>
                        {{#canmovecategories}}
                            {{#canedit}}<span class="movecategory icon-size-3">{{> core/drag_handle}}</span>{{/canedit}}
                        {{/canmovecategories}}
                        {{{nameeditable}}}
                        {{#canedit}}
                            <button type="button" class="btn btn-link btn-icon icon-size-3" data-role="deletecategory" data-id="{{id}}" title="{{#str}} deletecategory, customfield, {{name}} {{/str}}" aria-label="{{#str}} deletecategory, customfield, {{name}} {{/str}}">
                                {{#pix}} t/delete, core {{/pix}}
                            </button>
                        {{/canedit}}
                    </h3>
                    {{#toggle}}
                        <div data-bs-toggle="tooltip" data-bs-placement="top" title="{{#str}} sharedcategoryhelptext, customfield {{/str}}">
                            {{{.}}}
                        </div>
                    {{/toggle}}
                {{/usescategories}}
            </div>
            <div class="col-auto text-end">
                {{{addfieldmenu}}}
            </div>
        </div>
        <div>
            <table class="table generaltable table-striped table-hover {{#canedit}}fieldslist{{/canedit}}">
                <thead>
                <tr>
                    <th scope="col" class="col-5">{{#str}} customfield, core_customfield {{/str}}</th>
                    <th scope="col" class="col-3">{{#str}} shortname, core_customfield {{/str}}</th>
                    <th scope="col" class="col-2">{{#str}} type, core_customfield {{/str}}</th>
                    <th scope="col" class="col-2 text-end">{{#str}} action, core_customfield {{/str}}</th>
                </tr>
                </thead>
                <tbody>
                {{#fields}}
                    <tr data-field-name="{{name}}" data-field-id="{{id}}"  class="field">
                        <td class="col-5">
                            {{#canmovefields}}
                                {{#canedit}}<span class="movefield">{{> core/drag_handle}}</span>{{/canedit}}
                            {{/canmovefields}}
                            {{{name}}}
                        </td>
                        <td class="col-3">{{{shortname}}}</td>
                        <td class="col-2">{{{type}}}</td>
                        <td class="col-2 text-end">
                            {{#canedit}}
                                <button type="button" class="btn btn-link btn-icon" data-role="editfield" data-name="{{name}}" data-id="{{id}}" title="{{#str}} editfield, customfield, {{name}} {{/str}}" aria-label="{{#str}} editfield, customfield, {{name}} {{/str}}">
                                    {{#pix}} t/edit, core {{/pix}}
                                </button>
                                <button type="button" class="btn btn-link btn-icon" data-id="{{id}}" data-role="deletefield" title="{{#str}} deletefield, customfield, {{name}} {{/str}}" aria-label="{{#str}} deletefield, customfield, {{name}} {{/str}}">
                                    {{#pix}} t/delete, core {{/pix}}
                                </button>
                            {{/canedit}}
                        </td>
                    </tr>
                {{/fields}}
                {{^fields}}
                    {{> core_customfield/nofields }}
                {{/fields}}
                </tbody>
            </table>
        </div>
        </div>
        {{#canedit}}</div>{{/canedit}}
    {{/categories}}
</div>

{{#js}}
    require(['core_customfield/form', 'core_customfield/toggle_shared'], function(s, toggle) {
        s.init();
        toggle.init();
    });
{{/js}}
