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

<div class="settings">
    {{ forms.lightswitchField({
        label: 'Collapse all blocks?'|t('neo'),
        instructions: 'Whether all blocks should display as collapsed when loading an element editor.'|t('neo'),
        id: 'collapseAllBlocks',
        name: 'collapseAllBlocks',
        on: settings.collapseAllBlocks,
    }) }}

    {{ forms.lightswitchField({
        label: 'Default ’Always Show Dropdown’ setting'|t('neo'),
        instructions: 'Whether block type groups will always show as a dropdown menu, if their ’Always Show Dropdown’ setting is set to use the global setting.'|t('neo'),
        id: 'defaultAlwaysShowGroupDropdowns',
        name: 'defaultAlwaysShowGroupDropdowns',
        on: settings.defaultAlwaysShowGroupDropdowns,
    }) }}

    {{ forms.lightswitchField({
        label: 'Optimise search indexing?'|t('neo'),
        instructions: 'Whether to skip updating search indexes for Neo blocks that have no sub-fields set to use their values as search keywords, or that belong to Neo fields that aren’t set to use the field’s values as search keywords.'|t('neo'),
        id: 'optimiseSearchIndexing',
        name: 'optimiseSearchIndexing',
        on: settings.optimiseSearchIndexing,
    }) }}

    {{ forms.selectField({
        id: 'newBlockMenuStyle',
        name: 'newBlockMenuStyle',
        label: 'New block menu style'|t('neo'),
        instructions: 'Which style to use for Neo’s ’new block’ menus.'|t('neo'),
        options: [
            {label: 'Classic'|t('neo'), value: 'classic'},
            {label: 'Grid'|t('neo'), value: 'grid'},
            {label: 'List'|t('neo'), value: 'list'},
        ],
        value: settings.newBlockMenuStyle,
    }) }}

    {% tag('div') with {
        id: 'block-type-icon-container',
    } %}
        {{ forms.selectField({
            id: 'blockTypeIconSelectMode',
            name: 'blockTypeIconSelectMode',
            label: 'Block type icon select mode'|t('neo'),
            instructions: 'Which style to use to select block type icons.'|t('neo'),
            options: [
                {label: 'Path'|t('neo'), value: 'path'},
                {label: 'Sources'|t('neo'), value: 'sources'},
            ],
            value: settings.blockTypeIconSelectMode,
        }) }}

        {% tag('div') with {
            id: 'block-type-icon-path-container',
        } %}
            {{ forms.autosuggestField({
                label: 'Block type icon path'|t('neo'),
                instructions: 'The path of the folder to select block type icons from.'|t('neo'),
                id: 'blockTypeIconPath',
                name: 'blockTypeIconPath',
                suggestEnvVars: true,
                suggestAliases: true,
                value: settings.blockTypeIconPath,
                errors: settings.getErrors('blockTypeIconPath'),
            }) }}
        {% endtag %}
        {% tag('div') with {
            id: 'block-type-icon-sources-container',
        } %}
            {{ forms.checkboxSelectField({
                label: 'Block type icon sources'|t('neo'),
                instructions: 'Which sources do you want to select block type icons from?'|t('neo'),
                id: 'blockTypeIconSources',
                name: 'blockTypeIconSources',
                options: blockTypeIconSourceOptions,
                values: settings.blockTypeIconSources,
                showAllOption: true,
            }) }}
        {% endtag %}
    {% endtag %}

    {{ forms.lightswitchField({
        label: 'Enable block type user permissions'|t('neo'),
        instructions: 'Whether to allow setting user permissions for creating, editing and deleting blocks of a certain type.'|t('neo'),
        id: 'enableBlockTypeUserPermissions',
        name: 'enableBlockTypeUserPermissions',
        on: settings.enableBlockTypeUserPermissions,
    }) }}
</div>

{% js %}
    function toggleNewBlockMenuStyle (toggle) {
        $('#{{ 'block-type-icon-container'|namespaceInputId }}').toggleClass('hidden', !toggle)
    }
    toggleNewBlockMenuStyle({{ settings.newBlockMenuStyle != 'classic' }})
    $('#{{ 'newBlockMenuStyle'|namespaceInputId }}').on('change', function() {
        toggleNewBlockMenuStyle($(this).val() !== 'classic')
    })

    function toggleNewBlockIconSelectStyle (toggle) {
        $('#{{ 'block-type-icon-path-container'|namespaceInputId }}').toggleClass('hidden', !toggle)
        $('#{{ 'block-type-icon-sources-container'|namespaceInputId }}').toggleClass('hidden', toggle)
    }
    toggleNewBlockIconSelectStyle({{ settings.blockTypeIconSelectMode != 'sources' ? 'true' : 'false' }})
    $('#{{ 'blockTypeIconSelectMode'|namespaceInputId }}').on('change', function() {
        toggleNewBlockIconSelectStyle($(this).val() !== 'sources')
    })
{% endjs %}