{{!
    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.

    Edwiser RemUI
    @package theme_remui
    @copyright (c) 2023 WisdmLabs (https://wisdmlabs.com/)
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

}}
{{!
    @template theme_remui/customizer/elements/radio
}}

<div id="fitem_id_{{ name }}" class="form-group row fitem">
    <div class="d-flex justify-content-between align-items-center w-100 mb-1 setting-title">
        <div class="d-flex align-items-center flex-gap-d5">
            <label class="col-form-label" for="id_{{name}}">
                {{label}}
            </label>
            {{{help}}}
        </div>
        <div class="reset-button htmleditor-reset btn p-0" title="{{#str}}resetdesc, theme_remui{{/str}}" data-default="{{default}}">
            <span class="edw-icon edw-icon-Refresh small"></span>
        </div>
    </div>
    <div class="col-md-9 form-inline felement" data-fieldtype="select">

        {{# hasselect }}
        <select id="radio_select_{{ name }}" {{# multiple }} multiple {{/ multiple }}>
                {{# options }}
                <option value="{{ name }}">{{name}}</option>
                {{/ options}}
            </select>
        {{/ hasselect }}
        {{# options }}
        <div class="{{ class }}">
            <label class="cust-sele" title="{{ name }}" id="radio_{{ name }}">
                <input name="radio_{{ groupname }}"
                        class="cust-sele-input {{# selected }}selected{{/ selected }}"
                        type="radio"
                        value="{{ name }}"
                        {{# data }}
                            data-{{ key }}="{{ value }}"
                        {{/ data }}
                >
                {{# label }}<label class="option-label mb-0 ">{{ label }}</label>{{/ label }}
                {{# content }} {{{ content }}} {{/ content }}
            </label>
        </div>
        {{/ options }}

        <div class="form-control-feedback invalid-feedback" id="id_error_{{name}}">

        </div>
    </div>
</div>
{{# js }}
require(['jquery'], function($) {
    $(document).ready(function() {
        let parent = $('#fitem_id_{{ name }}');
        $('#fitem_id_{{ name }} input').change(function() {
            parent.find('.cust-sele').removeClass('active')
            .find('input').each((index, input) => {
                if (input.checked) {
                    $(input).closest('.cust-sele').addClass('active');
                }
            });
            {{# hasselect }}
                parent.find('select').val($(this).val());
            {{/ hasselect }}
        });
    });
});
{{/ js }}