{% import "_includes/forms" as forms %}

{{ forms.textField({
    label: "Plugin name"|t('command-palette'),
    instructions: "Plugin name for the end user."|t('command-palette'),
    placeholder: "Command Palette"|t('command-palette'),
    id: 'pluginName',
    name: 'pluginName',
    value: settings.pluginName,
    first: true
}) }}
<hr>
{{ forms.selectField({
    label: "Theme"|t('command-palette'),
    instructions: "Which theme do you want to use?"|t('command-palette'),
    id: 'theme',
    name: 'theme',
    options: themes,
    value: settings.theme
}) }}
<hr>
{% set elementTypesInput %}
    <table class="data fullwidth">
        <thead>
            <tr>
                <th scope="col" style="width: 50%;">{{ 'Element Type'|t('command-palette') }}</th>
                <th scope="col">{{ 'Enabled'|t('command-palette') }}</th>
            </tr>
        </thead>
        <tbody>
        {% for refHandle, row in elementSearchElementTypes %}
            <tr>
                <td>
                    {{ row.elementType }}
                    <input type="hidden" name="elementSearchElementTypes[{{ refHandle }}][elementType]" value="{{ row.elementType }}">
                </td>
                <td>
                    {{ forms.lightswitchField({
                        first: loop.first,
                        id: 'enabled-' ~ refHandle,
                        name: 'elementSearchElementTypes['~ refHandle ~'][enabled]',
                        on: row.enabled
                    }) }}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endset %}
{{ forms.field({
    label: 'Element search Element Types'|t('command-palette'),
    instructions: 'Which Element Types you want to support for direct search.'|t('command-palette'),
}, elementTypesInput) }}