{{!
    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/colorpicker
}}

<div id="fitem_id_{{name}}" class="form-group fitem color-picker">
    <div class="d-flex justify-content-between align-items-center w-100 mb-1">
        <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 color-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="color-input" data-fieldtype="color">
        <input type='hidden' id='id_{{name}}'
        name='{{name}}' class='site-colorpicker d-none'
        hidden style='display:none;'
        value='{{default}}'>
        <div class="form-control-feedback invalid-feedback" id="id_error_{{name}}">
        </div>
    </div>
</div>
{{#js}}
    require(['jquery', 'theme_remui/color-picker'], function($) {
        $('#id_{{name}}').spectrum({
            color: '{{default}}',
            cancelText: '{{#str}} cancel {{/str}}',
            chooseText: '{{#str}} choose {{/str}}',
            clickoutFiresChange: true,
            showInput: true,
            allowEmpty: {{#allowempty}}true{{/allowempty}}{{^allowempty}}false{{/allowempty}},
            containerClassName: 'border-secondary',
            replacerClassName: 'site-colorpicker-custom w-full bg-white border-0',
            showPalette: true,
            palette: [
                ['#0051F9', '#0FC8BC', '#F26440'],
                [ '#37BE71', '#EAC2B8', '#7766A7'],
                ['#28A745', '#DC3545', '#FFC107'],
                ['#9432b9', '#724242', '#17A2B8'],
                ['#FF7272', '3aa99e', '#343A40']
            ],
            {{#options}}
                {{key}}: {{{value}}},
            {{/options}}
            change: function(color) {
                $('#id_{{name}}').trigger('color.changed', color);
            },
            move: function(color) {
                $('#id_{{name}}').trigger('color.changed', color);
            },
            hide: function() {
                $('#id_{{name}}').trigger('color.changed');
            }
        });
    });
{{/js}}