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

{% embed '_includes/forms/field.twig' with {
  label: 'Entry Types'|t('app'),
  instructions: 'Choose the types of entries that can be created in this field.'|t('app'),
  id: 'entry-types',
  disabled: readOnly,
} %}
  {% block input %}
    {% import "_includes/forms" as forms %}
    {% set groupedEntryTypes = entryTypes.groupBy(et => (et.group ?? 'General'|t('app'))) %}
    {% if not groupedEntryTypes|length %}
      {% set groupedEntryTypes = {
        ('General'|t('app')): [],
      } %}
    {% endif %}
    {{ hiddenInput('entryTypes', '') }}
    <div id="entry-type-manager" class="entry-type-manager">
      <ul class="entry-type-groups mb-s">
        {% for groupName, entryTypes in groupedEntryTypes %}
          {% tag 'li' with {
            class: 'entry-type-group',
            data: {
              name: groupName,
            },
          } %}
            <div class="entry-type-group--titlebar">
              <span>{{ groupName }}</span>
            </div>
            {{ forms.entryTypeSelect(entryTypeSelectConfig|merge({
              id: "entry-type-select-#{random()}",
              values: entryTypes,
              includeGroupInValues: true,
              disabled: readOnly,
            })) }}
          {% endtag %}
        {% endfor %}
      </ul>
    </div>
  {% endblock %}
{% endembed %}

{% 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>

{% embed '_includes/forms/field.twig' with {
  label: 'View Mode'|t('app'),
  instructions: 'Choose how nested {type} should be presented to authors.'|t('app', {
    type: 'entries'|t('app'),
  }),
} %}
  {% block input %}
    <div class="flex items-start gap-l">
      <label class="nowrap">
        <img class="mb-xs" src="{{ baseIconsUrl }}/cards.svg" width="80" height="60" alt="">
        {{ input('radio', 'viewMode', 'cards', {
          checked: field.viewMode == 'cards',
          class: 'fieldtoggle',
          disabled: readOnly,
          data: {'target-prefix': 'view-mode--'},
        }) }}
        {{ 'Cards'|t('app') }}
      </label>
      <label class="nowrap">
        <img class="mb-xs" src="{{ baseIconsUrl }}/cards-grid.svg" width="80" height="60" alt="">
        {{ input('radio', 'viewMode', 'cards-grid', {
          checked: field.viewMode == 'cards-grid',
          class: 'fieldtoggle',
          disabled: readOnly,
          data: {'target-prefix': 'view-mode--'},
        }) }}
        {{ 'Card grid'|t('app') }}
      </label>
      <label class="nowrap">
        <img class="mb-xs" src="{{ baseIconsUrl }}/blocks.svg" width="80" height="60" alt="">
        {{ input('radio', 'viewMode', 'blocks', {
          checked: field.viewMode == 'blocks',
          class: 'fieldtoggle',
          disabled: readOnly,
          data: {'target-prefix': 'view-mode--'},
        }) }}
        {{ 'Blocks'|t('app') }}
      </label>
      <label class="nowrap">
        <img class="mb-xs" src="{{ baseIconsUrl }}/index.svg" width="80" height="60" alt="">
        {{ input('radio', 'viewMode', 'index', {
          checked: field.viewMode == 'index',
          class: 'fieldtoggle',
          disabled: readOnly,
          data: {'target-prefix': 'view-mode--'},
        }) }}
        {{ 'Index'|t('app') }}
      </label>
    </div>
  {% endblock %}
{% endembed %}

{% tag 'div' with {
  id: "view-mode--index",
  class: field.viewMode != 'index' ? '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 }}");

    {% if not readOnly %}
      const $entryTypesContainer = $("#{{ 'entry-type-manager'|namespaceInputId }}");
      new Craft.GroupedEntryTypeManager($entryTypesContainer, {
        $defaultColumnsContainer,
        namespace: {{ view.getNamespace()|json_encode|raw }},
        entryTypeSelectHtml: {{ entryTypeSelectHtml|json_encode|raw }},
        entryTypeSelectJs: {{ entryTypeSelectJs|json_encode|raw }},
      });
    {% endif %}

    const config = {
      name: {{ 'defaultTableColumns'|namespaceInputName|json_encode|raw }},
      options: {{ defaultTableColumnOptions|json_encode|raw }},
      values: {{ field.defaultTableColumns|json_encode|raw }},
    };

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

    Craft.ui.createSortableCheckboxSelect(config).appendTo($defaultColumnsContainer);
  })();
{% endjs %}
