{% import '_includes/forms.twig' as forms %}

<div>
  <h2>{{ 'General'|t('app') }}</h2>

  {{ forms.languageMenuField({
    id: 'preferredLanguage',
    name: 'preferredLanguage',
    label: 'Language'|t('app'),
    instructions: 'The language that the control panel should use.'|t('app'),
    options: craft.cp.getLanguageOptions(false, true, true),
    value: userLanguage,
    appOnly: true,
  }) }}

  {{ forms.languageMenuField({
    id: 'preferredLocale',
    name: 'preferredLocale',
    label: 'Formatting Locale'|t('app'),
    instructions: 'The locale that should be used for date and number formatting.'|t('app'),
    options: [{'label' : 'Same as language'|t('app'), 'value' : '__blank__'}]|merge(craft.cp.getLanguageOptions(false, true)),
    value: userLocale,
  }) }}

  {{ forms.selectField({
    label: 'Week Start Day'|t('app'),
    id: 'weekStartDay',
    name: 'weekStartDay',
    options: craft.app.locale.getWeekDayNames(),
    value: currentUser.getPreference('weekStartDay', craft.app.config.general.defaultWeekStartDay)
  }) }}
</div>

<hr>

<div>
  <h2>{{ 'Accessibility'|t('app') }}</h2>

  {% set a11yDefaults = craft.app.config.general.accessibilityDefaults %}
  {{ forms.checkboxGroupField({
    label: 'Display Settings'|t('app'),
    options: [
      {
        label: 'Use shapes to represent statuses'|t('app'),
        name: 'useShapes',
        id: 'useShapes',
        checked: currentUser.getPreference('useShapes') ?? a11yDefaults['useShapes'] ?? false,
      },
      {
        label: 'Underline links'|t('app'),
        name: 'underlineLinks',
        id: 'underlineLinks',
        checked: currentUser.getPreference('underlineLinks') ?? a11yDefaults['underlineLinks'] ?? false,
      },
    ],
  }) }}

  {{ forms.checkboxGroupField({
    label: 'General Settings'|t('app'),
    options: [
      {
        label: 'Disable autofocus'|t('app'),
        name: 'disableAutofocus',
        id: 'disableAutofocus',
        checked: currentUser.getPreference('disableAutofocus') ?? a11yDefaults['disableAutofocus'] ?? false,
      },
    ],
  }) }}

  {{ forms.selectField({
    label: 'Notification Duration'|t('app'),
    instructions: 'How long notifications should be shown before they disappear automatically.'|t('app'),
    name: 'notificationDuration',
    id: 'notificationDuration',
    options: [
      {value: 2000, label: '{num, number} {num, plural, =1{second} other{seconds}}'|t('app', {num: 2})},
      {value: 5000, label: '{num, number} {num, plural, =1{second} other{seconds}}'|t('app', {num: 5})},
      {value: 10000, label: '{num, number} {num, plural, =1{second} other{seconds}}'|t('app', {num: 10})},
      {value: 0, label: 'Show them indefinitely'|t('app')},
    ],
    value: currentUser.getPreference('notificationDuration') ?? a11yDefaults['notificationDuration'] ?? 5000,
  }) }}
</div>

{% if currentUser.admin %}
  <hr>

  <div>
    <h2>{{ 'Development'|t('app') }}</h2>

    {{ forms.checkboxGroupField({
      label: 'Development Settings'|t('app'),
      options: [
        {
          label: 'Show field handles in edit forms'|t('app'),
          name: 'showFieldHandles',
          id: 'showFieldHandles',
          checked: currentUser.getPreference('showFieldHandles')
        },
        {
          label: 'Profile Twig templates when Dev Mode is disabled'|t('app'),
          name: 'profileTemplates',
          id: 'profileTemplates',
          checked: currentUser.getPreference('profileTemplates')
        },
        {
          label: 'Show full exception views when Dev Mode is disabled'|t('app'),
          name: 'showExceptionView',
          id: 'showExceptionView',
          checked: currentUser.getPreference('showExceptionView')
        },
      ],
    }) }}

    {{ forms.checkboxGroupField({
      label: 'Debug Toolbar'|t('app'),
      options: [
        {
          label: 'Show the debug toolbar on the front end'|t('app'),
          name: 'enableDebugToolbarForSite',
          id: 'enableDebugToolbarForSite',
          checked: currentUser.getPreference('enableDebugToolbarForSite')
        },
        {
          label: 'Show the debug toolbar in the control panel'|t('app'),
          name: 'enableDebugToolbarForCp',
          id: 'enableDebugToolbarForCp',
          checked: currentUser.getPreference('enableDebugToolbarForCp')
        },
      ],
    }) }}
  </div>
{% endif %}

{% hook 'cp.users.edit.prefs' %}
