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

{{ forms.entryTypeSelectField({
  label: 'Entry Types'|t('app'),
  instructions: 'Choose the types of entries that can be created in this field.'|t('app'),
  id: 'entry-types',
  name: 'entryTypes[]',
  values: field.getEntryTypes(),
  allowOverrides: true,
  create: true,
  errors: field.getErrors('entryTypes'),
  data: {'error-key': 'entryTypes'},
  disabled: readOnly,
}) }}

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

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

  {% if field.id and field.propagationMethod.value != 'none' %}
    {% js %}
    (function() {
      var showingWarning = false;
      $("#{{ 'propagationMethod'|namespaceInputId }}").on('change', function() {
                    if ($(this).val() !== '{{ field.propagationMethod.value }}') {
                        if (!showingWarning) {
                            $('<p/>', {'class': 'warning', text: "{{ 'Applying this change to existing entries 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 %}

{% set headlessMode = craft.app.config.general.headlessMode %}
{% set siteRows = [] %}
{% set siteErrors = [] %}

{% for site in craft.app.sites.getAllSites() %}
  {% set siteSettings = field.siteSettings[site.uid] ?? null %}
  {% if siteSettings %}
    {% for attribute, errors in siteSettings.errors ?? [] %}
      {% set siteErrors = siteErrors|merge(errors) %}
    {% endfor %}
  {% endif %}
  {% set siteRows = siteRows|merge({
    (site.uid): {
      heading: site.name|t('site')|e,
      uriFormat: {
        value: siteSettings.uriFormat ?? null,
        hasErrors: siteSettings.errors.uriFormat is defined,
      },
      template: not headlessMode ? {
        value: siteSettings.template ?? null,
        hasErrors: siteSettings.errors.template is defined,
      },
    }|filter
  }) %}
{% endfor %}

{{ forms.editableTableField({
  label: 'Site Settings'|t('app'),
  instructions: 'Choose the site-specific settings for nested entries.'|t('app'),
  id: 'site-settings',
  name: 'siteSettings',
  cols: {
    heading: {
      type: 'heading',
      heading: 'Site'|t('app'),
      thin: true
    },
    uriFormat: {
      type: 'singleline',
      heading: 'Entry URI Format'|t('app'),
      info: 'What entry URIs should look like for the site. Leave blank if entries don’t have URLs.'|t('app'),
      placeholder: 'Leave blank if entries don’t have URLs'|t('app'),
      code: true,
    },
    template: not headlessMode ? {
      type: 'template',
      heading: 'Template'|t('app'),
      info: 'Which template should be loaded when an entry’s URL is requested.'|t('app'),
      code: true
    },
  }|filter,
  rows: siteRows,
  fullWidth: true,
  allowAdd: false,
  allowDelete: false,
  allowReorder: false,
  errors: siteErrors|unique,
  data: {'error-key': 'siteSettings'},
  static: readOnly,
}) }}

{{ forms.textField({
  label: 'Min {type}'|t('app', {
    type: 'Entries'|t('app'),
  }),
  instructions: 'The minimum number of {type} the field is allowed to have.'|t('app', {
    type: 'entries'|t('app'),
  }),
  id: 'min-entries',
  name: 'minEntries',
  value: field.minEntries,
  size: 3,
  errors: field.getErrors('minEntries'),
  data: {'error-key': 'minEntries'},
  disabled: readOnly,
}) }}

{{ forms.textField({
  label: 'Max {type}'|t('app', {
    type: 'Entries'|t('app'),
  }),
  instructions: 'The maximum number of {type} the field is allowed to have.'|t('app', {
    type: 'entries'|t('app'),
  }),
  id: 'max-entries',
  name: 'maxEntries',
  value: field.maxEntries,
  size: 3,
  errors: field.getErrors('maxEntries'),
  data: {'error-key': 'maxEntries'},
  disabled: readOnly,
}) }}

{{ forms.lightswitchField({
  label: 'Enable versioning for entries in this field'|t('app'),
  id: 'enableVersioning',
  name: 'enableVersioning',
  on: field.enableVersioning,
  errors: field.getErrors('enableVersioning'),
  data: {'error-key': 'enableVersioning'},
  disabled: readOnly,
}) }}

<hr>

{{ forms.selectField({
  label: 'View Mode'|t('app'),
  instructions: 'Choose how nested {type} should be presented to authors.'|t('app', {
    type: 'entries'|t('app'),
  }),
  id: 'view-mode',
  name: 'viewMode',
  options: [
    {label: 'As cards'|t('app'), value: constant('VIEW_MODE_CARDS', field)},
    {label: 'As inline-editable blocks'|t('app'), value: constant('VIEW_MODE_BLOCKS', field)},
    {label: 'As an element index'|t('app'), value: constant('VIEW_MODE_INDEX', field)},
  ],
  value: field.viewMode,
  toggle: true,
  targetPrefix: 'view-mode--',
  disabled: readOnly,
}) }}

{% tag 'div' with {
  id: "view-mode--#{constant('VIEW_MODE_CARDS', field)}",
  class: field.viewMode != constant('VIEW_MODE_CARDS', field) ? 'hidden' : null,
} %}
  {{ forms.lightswitchField({
    label: 'Show cards in a grid'|t('app'),
    instructions: 'Whether cards should be shown in a multi-column grid on wide viewports.'|t('app'),
    id: 'show-cards-in-grid',
    name: 'showCardsInGrid',
    on: field.showCardsInGrid,
    disabled: readOnly,
  }) }}
{% endtag %}

{% tag 'div' with {
  id: "view-mode--#{constant('VIEW_MODE_INDEX', field)}",
  class: field.viewMode != constant('VIEW_MODE_INDEX', field) ? 'hidden' : null,
} %}
  {{ forms.lightswitchField({
    label: 'Include Table View'|t('app'),
    instructions: 'Whether the element index should allow viewing nested {type} in a table.'|t('app', {
      type: 'entries'|t('app'),
    }),
    id: 'include-table-view',
    name: 'includeTableView',
    on: field.includeTableView,
    toggle: '#default-table-columns-container',
    disabled: readOnly,
  }) }}

  {% tag 'div' with {
    id: 'default-table-columns-container',
    class: not field.includeTableView ? 'hidden' : null,
  } %}
    {% embed '_includes/forms/field.twig' with {
      label: 'Default Table Columns'|t('app'),
      instructions: 'Choose which table columns should be visible by default.'|t('app'),
      id: 'default-table-columns',
    } %}
      {% block input %}
        <div id="default-table-columns-input"></div>
      {% endblock %}
    {% endembed %}

    {% set options = [] %}
    {% for viewMode in indexViewModes %}
      {% set options = options|merge([{
        label: viewMode.title,
        value: viewMode.mode,
      }]) %}
    {% endfor %}
    {{ forms.selectField({
      label: 'Default View Mode'|t('app'),
      id: 'default-view-mode',
      name: 'defaultIndexViewMode',
      options: options,
      value: field.defaultIndexViewMode,
      disabled: readOnly,
    }) }}
  {% endtag %}

  {{ forms.selectField({
    label: '{type} Per Page'|t('app', {
      type: 'Entries'|t('app'),
    }),
    instructions: 'The total number of {type} to display per page within the element index.'|t('app', {
      type: 'entries'|t('app'),
    }),
    id: 'page-size',
    name: 'pageSize',
    options: [10, 20, 50, 100]|map(num => {label: num, value: num}),
    value: field.pageSize ?? 50,
    disabled: readOnly,
  }) }}
{% endtag %}

{{ forms.textField({
  label: '“New” Button Label'|t('app'),
  instructions: 'The text label for the entry creation button.'|t('app'),
  id: 'create-button-label',
  name: 'createButtonLabel',
  value: field.createButtonLabel,
  placeholder: defaultCreateButtonLabel,
  errors: field.getErrors('createButtonLabel'),
  disabled: readOnly,
}) }}

{% js %}
  (() => {
    const $defaultColumnsContainer = $("#{{ 'default-table-columns-input'|namespaceInputId }}");
    const config = {
      name: {{ 'defaultTableColumns'|namespaceInputName|json_encode|raw }},
      options: {{ defaultTableColumnOptions|json_encode|raw }},
      values: {{ field.defaultTableColumns|json_encode|raw }},
    };

    {% if readOnly %}
      config['disabled'] = true;
    {% else %}
      config['sortable'] = true;
    {% endif %}

    Craft.ui.createCheckboxSelect(config).appendTo($defaultColumnsContainer);

    const componentSelect = $('#{{ 'entry-types'|namespaceInputId }}').data('componentSelect');

    componentSelect.on('change', () => {
      const values = $defaultColumnsContainer.find('input:checked').toArray().map(input => input.value);
      Craft.sendActionRequest('POST', 'matrix/default-table-column-options', {
        data: {
          entryTypeIds: componentSelect.getSelectedComponentIds(),
        },
      }).then(({data}) => {
        $defaultColumnsContainer.empty().append(
          Craft.ui.createCheckboxSelect({
            name: {{ 'defaultTableColumns'|namespaceInputName|json_encode|raw }},
            options: data.options,
            values: values,
            sortable: true,
          })
        );
      });
    });
  })();
{% endjs %}
