{% extends "freeform/_layouts/settings" %}

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

{% set crumbs = [
    { label: craft.freeform.name, url: url("freeform") },
    { label: "Settings"|t("freeform"), url: url("freeform/settings") },
] %}

{% set title = "Form Builder"|t("freeform") %}

{% block content %}

    {{ parent() }}

    <input type="hidden" name="action" value="freeform/settings/save-settings">
    {{ redirectInput('freeform/settings/form-builder') }}
    {{ csrfInput() }}

    <div class="field smart-switch first">
        <div>
            {{ forms.lightswitch({
                name: "settings[defaults][previewHtml]",
                on: settings.defaults.previewHtml,
                disabled: readOnly,
            }) }}
        </div>
        <div>
            {{ forms.field({
                label: "Live Render HTML Markup"|t('freeform'),
                instructions: "Live rendering HTML markup in field labels, option labels and HTML blocks inside the Form Builder interface can sometimes conflict with Freeform's display of the form preview inside the control panel. In cases like these, you'll need to disable this setting to prevent HTML from rendering automatically."|t('freeform'),
            }) }}
        </div>
    </div>

    <div class="field smart-switch">
        <div>
            {{ forms.lightswitch({
                name: "settings[defaults][twigInHtml]",
                on: settings.defaults.twigInHtml,
                disabled: readOnly,
            }) }}
        </div>
        <div>
            {{ forms.field({
                label: "Allow Twig to be enabled in HTML blocks"|t('freeform'),
                instructions: "A toggle will appear for each HTML block field inside the form builder, allowing the use of Twig code."|t('freeform'),
            }) }}
        </div>
    </div>

    <div class="field smart-switch">
        <div>
            {{ forms.lightswitch({
                name: "settings[defaults][twigIsolation]",
                on: settings.defaults.twigIsolation,
                disabled: readOnly,
            }) }}
        </div>
        <div>
            {{ forms.field({
                label: "Render HTML block Twig in Isolated Mode"|t('freeform'),
                instructions: "When enabled, only the Freeform 'form' and 'fields' variables will be available. If disabled, Craft's variables will be included as well."|t('freeform'),
            }) }}
        </div>
    </div>

    {% if craft.freeform.pro %}

        <div class="field">
            {{ forms.autosuggestField({
                class: "code",
                label: "Rich Text Field Toolbar Configuration"|t('freeform'),
                instructions: "Choose which components appear in the Rich Text editor toolbar and in what order. Only core native TinyMCE components are supported."|t('freeform'),
                name: "settings[defaults][richTextFieldToolbarConfiguration]",
                value: settings.defaults.richTextFieldToolbarConfiguration,
                errors: settings.getErrors("defaults.richTextFieldToolbarConfiguration"),
                disabled: readOnly,
                suggestEnvVars: true,
            }) }}
        </div>

        <div class="field">
            {{ forms.autosuggestField({
                class: "code",
                label: "Email Notification Template Toolbar Configuration"|t('freeform'),
                instructions: "Choose which components appear in the Email Notification Template editor toolbar and in what order. Only core native TinyMCE components are supported."|t('freeform'),
                name: "settings[emailNotificationToolbarConfiguration]",
                value: settings.emailNotificationToolbarConfiguration,
                errors: settings.getErrors("emailNotificationToolbarConfiguration"),
                disabled: readOnly,
                suggestEnvVars: true,
            }) }}
        </div>

    {% endif %}

    <div class="field smart-switch">
        <div>
            {{ forms.lightswitch({
                name: "settings[defaults][includeSampleTemplates]",
                on: settings.defaults.includeSampleTemplates,
                disabled: readOnly,
            }) }}
        </div>
        <div>
            {{ forms.field({
                label: "Include Freeform's Sample Formatting Templates"|t('freeform'),
                instructions: "Allow users to select a sample formatting template included with Freeform for the form's Formatting Template setting."|t('freeform'),
            }) }}
        </div>
    </div>

    {% for catName, category in settings.defaults|filter(def => def.enabled) %}
        <hr>

        <h2>{{ category.label|t('freeform') }}</h2>
        <ul class="categories {{ category.delimited ? 'delimited' }}">
            {% for subName, subCategory in category %}
                <li>
                    <ul class="category-item-list">
                        {% for itemName, item in subCategory %}
                            {% set path = "settings[defaults]["~catName~"]["~subName~"]["~itemName~"]" %}

                            <li>
                                <label>
                                    {{ subCategory.label|t('freeform') }}

                                    {{ include('freeform/settings/arrow-icon.svg') }}

                                    {{ item.label|t('freeform') }}
                                </label>

                                <div>
                                    {% if item|implementsClass('Solspace\\Freeform\\Library\\DataObjects\\Form\\Defaults\\ConfigItems\\CheckboxesItem') %}
                                        {{ forms.checkboxSelect({
                                            id: 'checkbox-select-'~item.label|kebab,
                                            name: path~"[value]",
                                            values: item.value,
                                            options: item.options.toTwigArray(),
                                            class: 'fullwidth',
                                            disabled: readOnly,
                                        }) }}
                                    {% elseif item|implementsClass('Solspace\\Freeform\\Library\\DataObjects\\Form\\Defaults\\ConfigItems\\SelectItem') %}
                                        {{ forms.select({
                                            name: path~"[value]",
                                            value: item.value,
                                            options: item.options.toTwigArray(),
                                            class: 'fullwidth',
                                            disabled: readOnly,
                                            columns: 2
                                        }) }}
                                    {% elseif item|implementsClass('Solspace\\Freeform\\Library\\DataObjects\\Form\\Defaults\\ConfigItems\\BoolItem') %}
                                        {{ forms.lightswitch({
                                            name: path~"[value]",
                                            on: item.value,
                                            disabled: readOnly,
                                        }) }}
                                    {% elseif item|implementsClass('Solspace\\Freeform\\Library\\DataObjects\\Form\\Defaults\\ConfigItems\\ColorItem') %}
                                        {{ forms.color({
                                            name: path~"[value]",
                                            value: item.value,
                                            disabled: readOnly,
                                        }) }}
                                    {% else %}
                                        {{ forms.text({
                                            name: path~"[value]",
                                            value: item.value,
                                            placeholder: item.placeholder,
                                            disabled: readOnly,
                                        }) }}
                                    {% endif %}
                                </div>

                                {% if not readOnly %}
                                    <button type="button" tabindex="-1" class="lock-button {{ item.locked ? "locked" }}">
                                        <input
                                                type="hidden"
                                                class="{{ item.locked ? "locked" }}"
                                                name="{{ path }}[locked]"
                                                value="{{ item.locked ? '1' : '0' }}"
                                        />
                                        <span class="locked">
                                            {{ include("freeform/settings/locked-icon.svg") }}
                                        </span>
                                        <span class="unlocked">
                                            {{ include("freeform/settings/unlocked-icon.svg") }}
                                        </span>
                                    </button>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endfor %}
        </ul>
    {% endfor %}

{% endblock %}