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

{% set blockTypeInput %}
    
    <div class="stc-sidebar fields">
        <div class="col-inner-container">
            <div class="heading">
                <h5>{{ "Fields" | t('app') }}</h5>
            </div>

            <div class="field-items">
                {% for blockTypeId, blockType in blockTypes %}
                    <div data-id="{{ blockTypeId }}">
                        {% for fieldId, layoutElement in blockTypeFields[blockTypeId] %}
                            {% set field = layoutElement.getField() %}
                            
                            <div class="supertableconfigitem stci-field{% if field.hasErrors() %} error{% endif %} {% if loop.first %}sel{% endif %}" data-id="{{ fieldId }}">
                                <div class="name{% if layoutElement.required %} required{% endif %}">
                                    {% if field.name %}
                                        {{ field.name }}
                                    {% else %}
                                        <em class="light">{{ '(blank)' | t('app') }}</em>
                                    {% endif %}
                                </div>

                                <div class="handle code">
                                    {% if field.handle %}
                                        {{ field.handle }}
                                    {% else %}
                                        &nbsp;
                                    {% endif %}
                                </div>

                                <div class="actions">
                                    <a class="move icon" title="{{ 'Reorder' | t('app') }}" role="button"></a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}

                <div class="btn add icon">{{ "New field" | t('app') }}</div>
            </div>
        </div>
    </div>

    <div class="stc-settings">
        <div class="col-inner-container">
            <div class="heading">
                <h5>{{ "Field Settings" | t('app') }}</h5>
            </div>

            <div class="field-items">
                {% for blockTypeId, blockType in blockTypes %}
                    <div data-id="{{ blockTypeId }}">
                        {% for fieldId, layoutElement in blockTypeFields[blockTypeId] %}
                            {% set field = layoutElement.getField() %}
                            
                            <div data-id="{{ fieldId }}" {% if not loop.first %}class="settings-hidden"{% endif %}>
                                {% namespace 'blockTypes[' ~ blockTypeId ~ '][fields][' ~ fieldId ~ ']' %}
                                    {{ forms.textField({
                                        label: "Name" | t('app'),
                                        id: 'name',
                                        name: 'name',
                                        value: field.name,
                                        errors: field.getErrors('name'),
                                        autofocus: true,
                                        required: true,
                                    }) }}

                                    {{ forms.textField({
                                        label: "Handle" | t('app'),
                                        id: 'handle',
                                        name: 'handle',
                                        class: 'code',
                                        autocorrect: false,
                                        autocapitalize: false,
                                        maxlength: 64,
                                        value: field.handle,
                                        errors: field.getErrors('handle'),
                                        required: true,
                                    }) }}

                                    {{ forms.textareaField({
                                        label: "Instructions" | t('app'),
                                        id: 'instructions',
                                        class: 'nicetext',
                                        name: 'instructions',
                                        value: field.instructions,
                                        errors: field.getErrors('instructions'),
                                    }) }}
                                {% endnamespace %}

                                {{ forms.textField({
                                    label: "Column Width" | t('super-table'),
                                    instructions: "Only applies for Table Layout. Set the width for this column in either pixels or percentage. i.e. `10px` or `10%`." | t('super-table'),
                                    id: 'columns-' ~ field.uid ~ '-width',
                                    name: 'columns[' ~ field.uid ~ '][width]',
                                    size: 8,
                                    value: supertableField.columns[field.uid].width ?? '',
                                }) }}

                                {% namespace 'blockTypes[' ~ blockTypeId ~ '][fields][' ~ fieldId ~ ']' %}
                                    {{ forms.checkboxField({
                                        label: "This field is required" | t('app'),
                                        id: 'required',
                                        name: 'required',
                                        checked: layoutElement.required
                                    }) }}

                                    {{ forms.checkboxField({
                                        label: "Use this field’s values as search keywords" | t('app'),
                                        id: 'searchable',
                                        name: 'searchable',
                                        checked: field.searchable
                                    }) }}

                                    {{ forms.selectField({
                                        label: "Field Type" | t('app'),
                                        warning: (not field.isNew() and not field.hasErrors('type') ? "Changing this may result in data loss." | t('app')),
                                        id: 'type',
                                        name: 'type',
                                        options: fieldId[0:3] != 'new' ? fieldTypes[fieldId] : fieldTypes.new,
                                        value: className(field),
                                        errors: field.getErrors('type') ?? null
                                    }) }}

                                    {% if craft.app.getIsMultiSite() %}
                                        {% set translationMethods = field.supportedTranslationMethods %}

                                        {% if translationMethods | length > 1 %}
                                            <div id="translation-settings">
                                                {{ forms.selectField({
                                                    label: "Translation Method" | t('app'),
                                                    id: 'translation-method',
                                                    name: 'translationMethod',
                                                    options: [
                                                        'none' in translationMethods ? { value: 'none', label: "Not translatable" | t('app') },
                                                        'site' in translationMethods ? { value: 'site', label: "Translate for each site" | t('app') },
                                                        'siteGroup' in translationMethods ? { value: 'siteGroup', label: "Translate for each site group" | t('app') },
                                                        'language' in translationMethods ? { value: 'language', label: "Translate for each language" | t('app') },
                                                        'custom' in translationMethods ? { value: 'custom', label: "Custom…" | t('app') }
                                                    ] | filter,
                                                    value: field.translationMethod,
                                                    toggle: true,
                                                    targetPrefix: 'translation-method-'
                                                }) }}

                                                {% if 'custom' in translationMethods %}
                                                    <div id="translation-method-custom" {% if field.translationMethod != 'custom' %}class="hidden"{% endif %}>
                                                        {{ forms.textField({
                                                            label: "Translation Key Format" | t('app'),
                                                            id: 'translation-key-format',
                                                            name: 'translationKeyFormat',
                                                            value: field.translationKeyFormat,
                                                            errors: field.getErrors('translationKeyFormat')
                                                        }) }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                {% endnamespace %}

                                <hr>

                                <div class="fieldtype-settings">
                                    <div>
                                        {% namespace 'blockTypes[' ~ blockTypeId ~ '][fields][' ~ fieldId ~ '][typesettings]' %}
                                            {{ field.getSettingsHtml() | raw }}
                                        {% endnamespace %}
                                    </div>
                                </div>

                                <hr>

                                <a class="error delete">{{ "Delete" | t('app') }}</a>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

{% endset %}

{{ forms.selectField({
    label: "Field Layout" | t('super-table'),
    instructions: "Set how fields are presented. Table Layout displays fields vertically in a table, Row Layout displays fields horizontally and Matrix layout displays fields like a Matrix field." | t('super-table'),
    id: 'fieldLayout',
    name: 'fieldLayout',
    options: {table: 'Table Layout', row: "Row Layout", matrix: "Matrix Layout"},
    value: supertableField.fieldLayout,
}) }}

<div id="supertable-configurator" class="supertable-configurator">
    {{ forms.field({
        label: "Configuration" | t,
        instructions: "Define the fields your Super Table should have." | t('super-table'),
        name: 'config'
    }, blockTypeInput) }}
</div>

{% if craft.app.getIsMultiSite() %}
    {{ forms.selectField({
        label: 'Propagation Method' | t('app'),
        instructions: 'Which sites should blocks be saved to?' | t('app'),
        id: 'propagationMethod',
        name: 'propagationMethod',
        options: [
            { value: 'none', label: 'Only save blocks to the site they were created in' | t('app') },
            { value: 'siteGroup', label: 'Save blocks to other sites in the same site group' | t('app') },
            { value: 'language', label: 'Save blocks to other sites with the same language' | t('app') },
            { value: 'all', label: 'Save blocks to all sites the owner element is saved in' | t('app') },
            { value: 'custom', label: 'Custom…' | t('app') },
        ],
        value: supertableField.propagationMethod,
        toggle: true,
        targetPrefix: 'propagation-method-',
    }) }}

    {% tag 'div' with {
        id: 'propagation-method-custom',
        class: supertableField.propagationMethod != 'custom' ? 'hidden' : null,
    } %}
        {{ forms.textField({
            label: 'Propagation Key Format' | t('app'),
            instructions: 'Template that defines the field’s custom “propagation key” format. Blocks will be saved to all sites that produce the same key.' | t('app'),
            id: 'propagation-key-format',
            class: 'code',
            name: 'propagationKeyFormat',
            value: supertableField.propagationKeyFormat,
            errors: supertableField.getErrors('propagationKeyFormat'),
        }) }}
    {% endtag %}

    {% if supertableField.id and supertableField.propagationMethod != 'none' %}
        {% js %}
            (function() {
                var showingWarning = false;
                $("#{{ 'propagationMethod' | namespaceInputId }}").on('change', function() {
                    if ($(this).val() !== '{{ supertableField.propagationMethod }}') {
                        if (!showingWarning) {
                            $('<p/>', {'class': 'warning', text: "{{ 'Applying this change to existing blocks can take some time.' | t('app') | e('js') }}"})
                                .appendTo($("#{{ 'propagationMethod-field' | namespaceInputId }}"));
                            showingWarning = true;
                        }
                    } else if (showingWarning) {
                        $("#{{ 'propagationMethod-field' | namespaceInputId }} .warning").remove();
                        showingWarning = false;
                    }
                });
            })();
        {% endjs %}
    {% endif %}
{% endif %}

{{ forms.textField({
    label: "New Row Label" | t('super-table'),
    instructions: "Enter the text you want to appear in the button to create a new row." | t('super-table'),
    id: 'selectionLabel',
    name: 'selectionLabel',
    value: supertableField.selectionLabel,
    placeholder: supertableField.defaultSelectionLabel(),
    errors: supertableField.getErrors('selectionLabel')
}) }}

{{ forms.textField({
    label: "Min Rows" | t('super-table'),
    instructions: "The minimum number of rows the field must have." | t('super-table'),
    id: 'minRows',
    name: 'minRows',
    value: supertableField.minRows,
    size: 3,
    errors: supertableField.getErrors('minRows')
}) }}

{{ forms.textField({
    label: "Max Rows" | t('super-table'),
    instructions: "The maximum number of rows the field is allowed to have." | t('super-table'),
    id: 'maxRows',
    name: 'maxRows',
    value: supertableField.maxRows,
    size: 3,
    errors: supertableField.getErrors('maxRows')
}) }}

{{ forms.lightswitchField({
    label: "Static field" | t('super-table'),
    instructions: "A static field will only display a single row of fields." | t('super-table'),
    id: 'staticField',
    name: 'staticField',
    on: supertableField.staticField,
}) }}