{{!
    This file is part of Moodle - https://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 local_amos/filter

    Render the AMOS translator filter.

    Selectors required for JS:
    * amosfilter - root element id
    * amosfilter_fcmp - component selector id
    * amosfilter_fcmp_counter - indicator of the number of selected components
    * amosfilter_fcmp_search - searchfilterinput field
    * amosfilter_flng_counter - indicator of the number of selected languages
    * amosfilter_flng_search - search/filter languages input field

    Data attributes required for JS:
    * data-region
    * data-action
    * data-level=advanced - region to be shown in advanced mode only
    * data-level-control=<elementid> - id of the element that controls forced visibility of an advanced setting in basic mode

    Context variables required for this template:
    * formaction
    * lazyformname
    * filterdata
    * flng
    * fcmp
    * fver

    Example context (json):
    {
        "formaction": "view.php",
        "lazyformname": "amosfilter",
        "filterdata": {
            "missing": true
        },
        "flng": {
            "options": [
                {
                    "value": "cs",
                    "text": "Czech / Čeština [cs]",
                    "selected": true
                }
            ]
        },
        "fcmp": {
            "options": {
                "core": [
                    {
                        "name": "core",
                        "label": "core",
                        "selected": true,
                        "type": "core",
                        "typename": "Core",
                        "since": "2.0+",
                        "app": "true"
                    }
                ],
                "standard": [
                    {
                        "name": "workshop",
                        "label": "mod_workshop",
                        "selected": false,
                        "type": "standard",
                        "typename": "Standard",
                        "since": "2.0+",
                        "app": "true"
                    }
                ],
                "contrib": [
                    {
                        "name": "theme_moove",
                        "label": "theme_move",
                        "selected": false,
                        "type": "contrib",
                        "typename": "Additional",
                        "since": "3.1+",
                        "app": "false"
                    }
                ]

            }
        },
        "fver": {
            "options": [
                {
                    "value": 39,
                    "text": "3.9",
                    "selected": true
                },
                {
                    "value": 310,
                    "text": "3.10",
                    "selected": false
                }
            ]
        }
    }
}}

<div id="amosfilter" data-region="amosfilter" data-level-showadvanced="0" class="mb-3">
    <form class="form" action="{{formaction}}" method="post">
        <div style="display: none">
            <input type="hidden" name="__lazyform_{{lazyformname}}" value="1">
            <input type="hidden" name="sesskey" value="{{config.sesskey}}">
            <input type="hidden" name="fpg" id="amosfilter_fpg" value="{{filterdata.page}}">
        </div>

        <div class="form-group row" data-region="amosfilter_fcmp">
            <div class="col-md-2">
                <label class="mb-0">{{#str}} filtercmp, local_amos {{/str}}</label>
                <span class="badge badge-pill badge-info" id="amosfilter_fcmp_counter">{{fcmp.numselected}}</span>
                <small id="amosfilter_fcmp_desc" class="form-text text-muted">{{#str}} filtercmp_desc, local_amos {{/str}}</small>
            </div>

            <div class="col-md-10">
                <div class="form-control {{^fcmp.numselected}}is-invalid{{/fcmp.numselected}}" style="height: 7rem; overflow-y: scroll" id="amosfilter_fcmp">
                    <table id="amosfilter_fcmp_items_table">
                        <tr>
                            <th colspan="2">{{#str}} typecore, local_amos {{/str}}</th>
                        </tr>
                        {{#fcmp.options.core}}
                            {{>local_amos/filter_fcmp_option}}
                        {{/fcmp.options.core}}
                        <tr>
                            <th colspan="2">{{#str}} typestandard, local_amos {{/str}}</th>
                        </tr>
                        {{#fcmp.options.standard}}
                            {{>local_amos/filter_fcmp_option}}
                        {{/fcmp.options.standard}}
                        <tr>
                            <th colspan="2">{{#str}} typecontrib, local_amos {{/str}}</th>
                        </tr>
                        {{#fcmp.options.contrib}}
                            {{>local_amos/filter_fcmp_option}}
                        {{/fcmp.options.contrib}}
                    </table>
                </div>

                <div class="d-flex flex-column flex-md-row">
                    <div>
                        <input id="amosfilter_fcmp_search" type="text" size="15" maxlength="30" placeholder="{{#str}} filter, core {{/str}}" class="form-control form-control-sm" />
                    </div>

                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                        <label class="btn btn-light btn-sm">
                            <input data-action="selectstandard" type="radio" name="amosfilter_fcmp_actions"> {{#str}} componentsstandard, local_amos {{/str}}
                        </label>
                        <label class="btn btn-light btn-sm">
                            <input data-action="selectapp" type="radio" name="amosfilter_fcmp_actions"> {{#str}} componentsapp, local_amos {{/str}}
                        </label>
                        <label class="btn btn-light btn-sm">
                            <input data-action="selectworkplace" type="radio" name="amosfilter_fcmp_actions"> {{#str}} componentsworkplace, local_amos {{/str}}
                        </label>
                        <label class="btn btn-light btn-sm">
                            <input data-action="selectall" type="radio" name="amosfilter_fcmp_actions"> {{#str}} componentsall, local_amos {{/str}}
                        </label>
                        <label class="btn btn-light btn-sm">
                            <input data-action="selectnone" type="radio" name="amosfilter_fcmp_actions"> {{#str}} componentsnone, local_amos {{/str}}
                        </label>
                    </div>
                </div>

                <div id="amosfilter_fcmp_invalid_feedback" class="invalid-feedback {{#fcmp.numselected}} hidden {{/fcmp.numselected}}">
                    {{#str}} filtercmpnothingselected, local_amos {{/str}}
                </div>

            </div>
        </div>

        <div class="form-group row" data-region="amosfilter_flng" data-level="advanced" data-level-control="amosfilter_flng">
            <div class="col-md-2">
                <label for="amosfilter_flng" class="mb-0">{{#str}} filterlng, local_amos {{/str}}</label>
                <span class="badge badge-pill badge-info" id="amosfilter_flng_counter">{{flng.numselected}}</span>
                <small id="amosfilter_flng_desc" class="form-text text-muted">{{#str}} filterlng_desc, local_amos {{/str}}</small>
            </div>

            <div class="col-md-10">
                <select class="form-control {{^flng.numselected}}is-invalid{{/flng.numselected}}" id="amosfilter_flng"
                        name="flng[]" size="3" multiple="multiple" aria-describedby="amosfilter_flng_desc" data-default="{{flng.currentlanguage}}">
                    {{#flng.options}}
                        <option value="{{value}}" {{#selected}} selected {{/selected}}>{{text}}</option>
                    {{/flng.options}}
                </select>

                <div class="d-flex flex-column flex-md-row">
                    <div>
                        <input id="amosfilter_flng_search" type="text" size="15" maxlength="30" placeholder="{{#str}} filter, core {{/str}}" class="form-control form-control-sm" />
                    </div>
                </div>

                <div id="amosfilter_flng_invalid_feedback" class="invalid-feedback {{#flng.numselected}} hidden {{/flng.numselected}}">
                    {{#str}} filterlngnothingselected, local_amos {{/str}}
                </div>
            </div>
        </div>

        <div class="form-group row">
            <div class="col-md-2">
                <div data-level="advanced" data-level-control="amosfilter_misc">
                    <label>{{#str}} filtermis, local_amos {{/str}}</label>
                    <small class="form-text text-muted">{{#str}} filtermis_desc, local_amos {{/str}}</small>
                </div>
            </div>

            <div class="col-md-10">
                <fieldset id="amosfilter_misc">
                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fmis">
                        <input class="form-check-input" {{#filterdata.missing}} checked {{/filterdata.missing}} type="checkbox" name="fmis" id="amosfilter_fmis" value="1">
                        <label class="form-check-label" for="amosfilter_fmis">{{#str}} filtermisfmis, local_amos {{/str}}</label>
                    </div>

                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fout">
                        <input class="form-check-input" {{#filterdata.outdated}} checked {{/filterdata.outdated}} type="checkbox" name="fout" id="amosfilter_fout" value="1">
                        <label class="form-check-label" for="amosfilter_fout">{{#str}} filtermisfout, local_amos {{/str}}</label>
                    </div>

                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fhas">
                        <input class="form-check-input" {{#filterdata.has}} checked {{/filterdata.has}} type="checkbox" name="fhas" id="amosfilter_fhas" value="1">
                        <label class="form-check-label" for="amosfilter_fhas">{{#str}} filtermisfhas, local_amos {{/str}}</label>
                    </div>

                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fhlp">
                        <input class="form-check-input" {{#filterdata.helps}} checked {{/filterdata.helps}} type="checkbox" name="fhlp" id="amosfilter_fhlp" value="1">
                        <label class="form-check-label" for="amosfilter_fhlp">{{#str}} filtermisfhlp, local_amos {{/str}}</label>
                    </div>

                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fstg">
                        <input class="form-check-input" {{#filterdata.stagedonly}} checked {{/filterdata.stagedonly}} type="checkbox" name="fstg" id="amosfilter_fstg" value="1">
                        <label class="form-check-label" for="amosfilter_fstg">{{#str}} filtermisfstg, local_amos {{/str}}</label>
                    </div>

                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fapp">
                        <input class="form-check-input" {{#filterdata.app}} checked {{/filterdata.app}} type="checkbox" name="fapp" id="amosfilter_fapp" value="1">
                        <label class="form-check-label" for="amosfilter_fapp">{{#str}} filtermisfapp, local_amos {{/str}}</label>
                    </div>

                    <div class="form-check" data-level="advanced" data-level-control="amosfilter_fworkplace">
                        <input class="form-check-input" {{#filterdata.workplace}} checked {{/filterdata.workplace}} type="checkbox" name="fworkplace" id="amosfilter_fworkplace" value="1">
                        <label class="form-check-label" for="amosfilter_fworkplace">{{#str}} filtermisfworkplace, local_amos {{/str}}</label>
                    </div>
                </fieldset>
            </div>
        </div>

        <div class="form-group row" data-level="advanced" data-level-control="amosfilter_ftxt">
            <div class="col-md-2">
                <label for="amosfilter_ftxt">{{#str}} filtertxt, local_amos {{/str}}</label>
                <small id="amosfilter_ftxt_desc" class="form-text text-muted">{{#str}} filtertxt_desc, local_amos {{/str}}</small>
            </div>

            <div class="col-md-10">
                <input type="text" class="form-control" id="amosfilter_ftxt" name="ftxt" aria-describedby="amosfilter_ftxt_desc" value="{{filterdata.substring}}">

                <div class="form-check form-check-inline">
                    <input class="form-check-input" {{#filterdata.substringregex}} checked {{/filterdata.substringregex}} type="checkbox" name="ftxr" id="amosfilter_ftxr" value="1">
                    <label class="form-check-label" for="amosfilter_ftxr">{{#str}} filtertxtregex, local_amos {{/str}}</label>
                </div>

                <div class="form-check form-check-inline">
                    <input class="form-check-input" {{#filterdata.substringcs}} checked {{/filterdata.substringcs}} type="checkbox" name="ftxs" id="amosfilter_ftxs" value="1">
                    <label class="form-check-label" for="amosfilter_ftxs">{{#str}} filtertxtcasesensitive, local_amos {{/str}}</label>
                </div>
            </div>
        </div>

        <div class="form-group row" data-level="advanced" data-level-control="amosfilter_fsid">
            <div class="col-md-2">
                <label for="amosfilter_fsid">{{#str}} filtersid, local_amos {{/str}}</label>
                <small id="amosfilter_fsid_desc" class="form-text text-muted">{{#str}} filtersid_desc, local_amos {{/str}}</small>
            </div>

            <div class="col-md-10">
                <input type="text" class="form-control" id="amosfilter_fsid" name="fsid" aria-describedby="amosfilter_fsid_desc" value="{{filterdata.stringid}}">

                <div class="form-check form-check-inline">
                    <input class="form-check-input" {{#filterdata.stringidpartial}} checked {{/filterdata.stringidpartial}} type="checkbox" name="fsix" id="amosfilter_fsix" value="1">
                    <label class="form-check-label" for="amosfilter_fsix">{{#str}} filtersidpartial, local_amos {{/str}}</label>
                </div>
            </div>
        </div>

        <div class="form-group row" data-level="advanced" data-level-control="amosfilter_fver">
            <div class="col-md-2">
                <label for="amosfilter_fver">{{#str}} filterver, local_amos {{/str}}</label>
                <small id="amosfilter_fver_desc" class="form-text text-muted">{{#str}} filterver_desc, local_amos {{/str}}</small>
            </div>

            <div class="col-md-10">
                <div class="form-check">
                    <input class="form-check-input" {{#filterdata.last}} checked {{/filterdata.last}} type="checkbox" name="flast" id="amosfilter_flast" value="1">
                    <label class="form-check-label" for="amosfilter_flast">{{#str}} lastavailable, local_amos {{/str}}</label>
                </div>

                <select class="form-control" id="amosfilter_fver"
                        name="fver" aria-describedby="amosfilter_fver_desc" data-default="" {{#filterdata.last}} disabled {{/filterdata.last}} >
                    {{#fver.options}}
                        <option value="{{value}}" {{#selected}} selected {{/selected}}>{{text}}</option>
                    {{/fver.options}}
                </select>
            </div>
        </div>

        <div class="form-group row" data-region="amosfilter_buttons">
            <div class="col-md-10 offset-md-2">
                <button class="btn btn-primary" data-action="submit" type="submit">{{#str}} savefilter, local_amos {{/str}}</button>
                <button class="btn btn-secondary" data-level="advanced" type="submit" name="saveasmydefault" value="1">{{#str}} userdefaultsave, local_amos {{/str}}</button>
                <button class="btn btn-secondary" data-level="advanced" type="submit" name="resetmydefault" value="1">{{#str}} userdefaultreset, local_amos {{/str}}</button>
                <button class="btn btn-link" type="button" data-action="togglemoreoptions">{{#str}} morefilteringoptions, local_amos {{/str}}</button>
                <span id="amosfilter_loading_indicator" class="hidden badge badge-light">{{#str}} processing, local_amos {{/str}}</span>
            </div>
        </div>

    </form>
</div>

{{#js}}
    require(['local_amos/filter'], function(filterjs) {
        filterjs.init();
    });
{{/js}}
