{% set wrapper_options =  [
        {'label': strings.color_picker.background,         'name': 'background',         'schemes': ['normal'],          'default': '' },
        {'label': strings.color_picker.border,             'name': 'border',             'schemes': ['normal'],          'default': '' },
    ]
%}

{% set options = [
        {'label': strings.color_picker.font_current,       'name': 'font_current',       'schemes': ['normal', 'hover'], 'default': '' },
        {'label': strings.color_picker.background_current, 'name': 'background_current', 'schemes': ['normal', 'hover'], 'default': '' },
        {'label': strings.color_picker.font_other,         'name': 'font_other',         'schemes': ['normal', 'hover'], 'default': '' },
        {'label': strings.color_picker.background_other,   'name': 'background_other',   'schemes': ['normal', 'hover'], 'default': '' },
    ]
%}

{% if slot_type != 'menus' %}
    {% set options = wrapper_options|merge(options) %}
{% endif %}

{% set css_class = css_class|default( 'js-wpml-ls-colorpicker' ) %}

<div class="js-wpml-ls-panel-colors wpml-ls-panel-colors">
    <h4>{{ strings.color_picker.panel_title }}</h4>

    <label for="wpml-ls-{{ id }}-colorpicker-preset">{{ strings.color_picker.label_color_preset }}</label>
    <select name="wpml-ls-{{ id }}-colorpicker-preset" class="js-wpml-ls-colorpicker-preset">
        <option value="">-- {{ strings.color_picker.select_option_choose }} --</option>
        {% for scheme_id, scheme in color_schemes %}
            <option value="{{ scheme_id }}">{{ scheme.label }}</option>
        {% endfor %}
    </select>

    <div>
        <table>
            <tr>
                <td>
                </td>
                <th>{{ strings.color_picker.label_normal_scheme }}</th>
                <th>{{ strings.color_picker.label_hover_scheme }}</th>
            </tr>
            {% for option in options %}
            <tr>
                <td>{{ option.label }}</td>
                <td class="js-wpml-ls-colorpicker-wrapper">
                    {% if 'normal' in option.schemes %}
                        {% if name_base %}
                            {% set input_name = name_base ~ '[' ~ option.name ~ '_normal]' %}
                        {% else %}
                            {% set input_name =  option.name ~ '_normal' %}
                        {% endif %}
                        <input class="{{ css_class }} js-wpml-ls-color-{{ option.name }}_normal" type="text" size="7"
                               id="wpml-ls-{{ id }}-{{ option.name }}-normal" name="{{ input_name }}"
                               value="{{ slot_settings[ option.name ~ "_normal" ]|default( option.default ) }}" data-default-color="{{ option.default }}" style="display: none;">
                    {% endif %}
                </td>
                <td class="js-wpml-ls-colorpicker-wrapper">
                    {% if 'hover' in option.schemes %}
                        {% if name_base %}
                            {% set input_name = name_base ~ '[' ~ option.name ~ '_hover]' %}
                        {% else %}
                            {% set input_name =  option.name ~ '_hover' %}
                        {% endif %}
                        <input class="{{ css_class }} js-wpml-ls-color-{{ option.name }}_hover" type="text" size="7"
                               id="wpml-ls-{{ id }}-{{ option.name }}-hover" name="{{ input_name }}"
                               value="{{ slot_settings[ option.name ~ "_hover" ]|default( option.default ) }}" data-default-color="{{ option.default }}" style="display: none;">
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>