{# Based on craftcms/cms/src/templates/settings/fields/_edit.twig #}

{% requireAdmin %}

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

{% if groupId is not defined %}
    {% set groupId = field.groupId ?? groups|keys[0] %}
{% endif %}

{% if groups[groupId] is not defined %}
    {% exit 404 %}
{% endif %}

{% set fieldType = field is missing ? field.expectedType : className(field) %}

{% if fieldId is defined %}
    <input type="hidden" name="qf[fieldId]" value="{{ fieldId }}">
{% endif %}

{% set groupOptions = [] %}
{% for group in groups %}
    {% set groupOptions = groupOptions|merge([{ label: group.name, value: group.id }]) %}
{% endfor %}
{{ forms.selectField({
    first: true,
    label: 'Group'|t('app'),
    instructions: 'Which group should this field be displayed in?'|t('app'),
    id: 'qf-group',
    name: 'qf[group]',
    options: groupOptions,
    value: groupId
}) }}

{{ forms.textField({
    label: 'Name'|t('app'),
    instructions: 'What this field will be called in the CP.'|t('app'),
    id: 'qf-name',
    name: 'qf[name]',
    value: field.name,
    errors: field.getErrors('name'),
    required: true,
    autofocus: true
}) }}

{{ forms.textField({
    label: 'Handle'|t('app'),
    instructions: 'How you’ll refer to this field in the templates.'|t('app'),
    id: 'qf-handle',
    class: 'code',
    name: 'qf[handle]',
    maxlength: 64,
    value: field.handle,
    errors: field.getErrors('handle'),
    required: true,
}) }}

{{ forms.textareaField({
    label: 'Default Instructions'|t,
    instructions: 'Helper text to guide the author.'|t('app'),
    id: 'qf-instructions',
    class: 'nicetext',
    name: 'qf[instructions]',
    value: field.instructions,
    errors: field.getErrors('instructions')
}) }}

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

{{ forms.selectField({
    label: 'Field Type'|t('app'),
    instructions: 'What type of field is this?'|t('app'),
    warning: (fieldId is defined and not field.hasErrors('type') ? "Changing this may result in data loss."|t('app')),
    id: 'qf-type',
    name: 'qf[type]',
    options: fieldTypeOptions,
    value: fieldType,
    errors: (field is missing ? ["The fieldtype class “{class}” could not be found."|t({ class: fieldType })] : null),
    toggle: true,
    targetPrefix: 'qf-'
}) }}

{% if craft.app.getIsMultiSite() %}
    {% set translationMethods = field.supportedTranslationMethods %}
    {% if translationMethods|length > 1 %}
        <div id="qf-translation-settings">
            {{ forms.selectField({
                label: "Translation Method"|t('app'),
                instructions: "How should this field’s values be translated?"|t('app'),
                id: 'qf-translation-method',
                name: 'qf[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: 'qf-translation-method-'
            }) }}

            {% if 'custom' in translationMethods %}
                {% tag 'div' with {
                    id: 'qf-translation-method-custom',
                    class: field.translationMethod != 'custom' ? 'hidden' : null,
                } %}
                    {{ forms.textField({
                        label: "Translation Key Format"|t('app'),
                        instructions: "Template that defines the field’s custom “translation key” format. Field values will be copied to all sites that produce the same key. For example, to make the field translatable based on the first two characters of the site handle, you could enter `{site.handle[:2]}`.",
                        id: 'qf-translation-key-format',
                        class: 'code',
                        name: 'qf[translationKeyFormat]',
                        value: field.translationKeyFormat,
                        errors: field.getErrors('translationKeyFormat')
                    }) }}
                {% endtag %}
            {% endif %}
        </div>
    {% endif %}
{% endif %}

<hr>

<div id="qf-settings">
    <div id="qf-{{ fieldType|id }}">
        {% include 'settings/fields/_type-settings' with {
            namespace: 'qf[types][' ~ fieldType ~ ']'
        } %}
    </div>
</div>

{% if not field.handle %}
    {% js "new Craft.HandleGenerator('#qf-name', '#qf-handle');" %}
{% endif %}

{% js %}
    new Craft.FieldSettingsToggle('#qf-type', '#qf-settings', 'qf[types][__TYPE__]', {
        wrapWithTypeClassDiv: true
    });

    Craft.supportedTranslationMethods = {{ supportedTranslationMethods|json_encode|raw }};

    Craft.updateTranslationMethodSettings = function(type, container) {
        var $container = $(container);
        if (!Craft.supportedTranslationMethods[type] || Craft.supportedTranslationMethods[type].length == 1) {
            $container.addClass('hidden');
        } else {
            $container.removeClass('hidden');
            // Rebuild the options based on the field type's supported translation methods
            $container.find('select').html(
                ($.inArray('none', Craft.supportedTranslationMethods[type]) != -1 ? '<option value="none">{{ "Not translatable"|t('app')|e('js') }}</option>' : '') +
                ($.inArray('site', Craft.supportedTranslationMethods[type]) != -1 ? '<option value="site">{{ "Translate for each site"|t('app')|e('js') }}</option>' : '') +
                ($.inArray('siteGroup', Craft.supportedTranslationMethods[type]) != -1 ? '<option value="siteGroup">{{ "Translate for each site group"|t('app')|e('js') }}</option>' : '') +
                ($.inArray('language', Craft.supportedTranslationMethods[type]) != -1 ? '<option value="language">{{ "Translate for each language"|t('app')|e('js') }}</option>' : '') +
                ($.inArray('custom', Craft.supportedTranslationMethods[type]) != -1 ? '<option value="custom">{{ "Custom…"|t('app')|e('js') }}</option>' : '')
            );
        }
    }

    var $fieldTypeInput = $("#{{ 'qf-type'|namespaceInputId|e('js') }}"),
        $translationSettings = $("#{{ 'qf-translation-settings'|namespaceInputId|e('js') }}");

    $fieldTypeInput.change(function(e) {
        Craft.updateTranslationMethodSettings($(this).val(), $translationSettings);
    });
{% endjs %}