- page_title _('Preferences')
- add_page_specific_style 'page_bundles/profiles/preferences'
- @content_class = "limit-container-width" unless fluid_layout
- user_theme_id = Gitlab::Themes.for_user(@user).id
- user_color_schema_id = Gitlab::ColorSchemes.for_user(@user).id
- user_fields = { theme: user_theme_id, gitpod_enabled: @user.gitpod_enabled, sourcegraph_enabled: @user.sourcegraph_enabled }.to_json
- @themes = Gitlab::Themes::available_themes.to_json
- data_attributes = { themes: @themes, integration_views: integration_views.to_json, user_fields: user_fields, body_classes: Gitlab::Themes.body_classes, profile_preferences_path: profile_preferences_path }

- Gitlab::Themes.each do |theme|
  = stylesheet_link_tag "themes/#{theme.css_filename}" if theme.css_filename

= gitlab_ui_form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { id: "profile-preferences-form" } do |f|
  .row.gl-mt-3.js-preferences-form.js-search-settings-section
    .col-lg-4.application-theme#navigation-theme
      %h4.gl-mt-0
        = s_('Preferences|Color theme')
      %p
        = s_('Preferences|Customize the color of GitLab.')
    .col-lg-8.application-theme
      .row
        - Gitlab::Themes.each do |theme|
          %label.col-6.col-sm-4.col-md-3.gl-mb-5.gl-text-center
            .preview{ class: theme.css_class }
            = f.gitlab_ui_radio_component :theme_id, theme.id,
              theme.name,
              radio_options: { checked: user_theme_id == theme.id }

    .col-sm-12
      %hr

  .row.js-preferences-form.js-search-settings-section
    .col-lg-4.profile-settings-sidebar#syntax-highlighting-theme
      %h4.gl-mt-0
        = s_('Preferences|Syntax highlighting theme')
      %p
        = s_('Preferences|This setting allows you to customize the appearance of the syntax.')
        = succeed '.' do
          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'syntax-highlighting-theme'), target: '_blank', rel: 'noopener noreferrer'
    .col-lg-8.syntax-theme
      - Gitlab::ColorSchemes.each do |scheme|
        = label_tag do
          .preview= image_tag "#{scheme.css_class}-scheme-preview.png"
          = f.gitlab_ui_radio_component :color_scheme_id, scheme.id,
             scheme.name,
             radio_options: { checked: user_color_schema_id == scheme.id }

    .col-sm-12
      %hr

  .row.js-preferences-form.js-search-settings-section
    .col-lg-4.profile-settings-sidebar#diffs-colors
      %h4.gl-mt-0
        = s_('Preferences|Diff colors')
      %p
        = s_('Preferences|Customize the colors of removed and added lines in diffs.')
    .col-lg-8
      .form-group
        #js-profile-preferences-diffs-colors-app{ data: user_diffs_colors }

    .col-sm-12
      %hr

  .row.js-preferences-form.js-search-settings-section
    .col-lg-4.profile-settings-sidebar#behavior
      %h4.gl-mt-0
        = s_('Preferences|Behavior')
      %p
        = s_('Preferences|This setting allows you to customize the behavior of the system layout and default views.')
        = succeed '.' do
          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'behavior'), target: '_blank', rel: 'noopener noreferrer'
    .col-lg-8
      .form-group
        = f.label :layout, class: 'label-bold' do
          = s_('Preferences|Layout width')
        = f.select :layout, layout_choices, {}, class: 'select2'
        .form-text.text-muted
          = s_('Preferences|Choose between fixed (max. 1280px) and fluid (%{percentage}) application layout.').html_safe % { percentage: '100%' }
      .form-group
        = f.label :dashboard, class: 'label-bold' do
          = s_('Preferences|Dashboard')
        = f.select :dashboard, dashboard_choices, {}, class: 'select2'
        .form-text.text-muted
          = s_('Preferences|Choose what content you want to see by default on your dashboard.')

      = render_if_exists 'profiles/preferences/group_overview_selector', f: f # EE-specific

      .form-group
        = f.label :project_view, class: 'label-bold' do
          = s_('Preferences|Project overview content')
        = f.select :project_view, project_view_choices, {}, class: 'select2'
        .form-text.text-muted
          = s_('Preferences|Choose what content you want to see on a project’s overview page.')
      .form-group
        = f.gitlab_ui_checkbox_component :render_whitespace_in_code, s_('Preferences|Render whitespace characters in the Web IDE')
      .form-group
        = f.gitlab_ui_checkbox_component :show_whitespace_in_diffs, s_('Preferences|Show whitespace changes in diffs')
      .form-group
        = f.gitlab_ui_checkbox_component :view_diffs_file_by_file,
          s_("Preferences|Show one file at a time on merge request's Changes tab"),
          help_text: s_("Preferences|Instead of all the files changed, show only one file at a time. To switch between files, use the file browser.")
      .form-group
        - supported_characters = %w(" ' ` &#40; [ { < * _).map { |char| "<code>#{char}</code>" }.join(', ')
        = f.gitlab_ui_checkbox_component :markdown_surround_selection,
          s_('Preferences|Surround text selection when typing quotes or brackets'),
          help_text: sprintf(s_( "Preferences|When you type in a description or comment box, selected text is surrounded by the corresponding character after typing one of the following characters: %{supported_characters}."), { supported_characters: supported_characters }).html_safe
      .form-group
        = f.gitlab_ui_checkbox_component :markdown_automatic_lists,
          s_('Preferences|Automatically add new list items'),
          help_text: html_escape(s_('Preferences|When you type in a description or comment box, pressing %{kbdOpen}Enter%{kbdClose} in a list adds a new item below.')) % { kbdOpen: '<kbd>'.html_safe, kbdClose: '</kbd>'.html_safe }

      .form-group
        = f.label :tab_width, s_('Preferences|Tab width'), class: 'label-bold'
        = f.number_field :tab_width,
                         class: 'form-control gl-form-input',
                         min: Gitlab::TabWidth::MIN,
                         max: Gitlab::TabWidth::MAX,
                         required: true
        .form-text.text-muted
          = s_('Preferences|Must be a number between %{min} and %{max}') % { min: Gitlab::TabWidth::MIN, max: Gitlab::TabWidth::MAX }

    .col-sm-12
      %hr
  .row.js-preferences-form.js-search-settings-section
    .col-lg-4.profile-settings-sidebar#localization
      %h4.gl-mt-0
        = _('Localization')
      %p
        = _('Customize language and region related settings.')
        = succeed '.' do
          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'localization'), target: '_blank', rel: 'noopener noreferrer'
    .col-lg-8
      .form-group
        = f.label :preferred_language, class: 'label-bold' do
          = _('Language')
        = f.select :preferred_language, language_choices, {}, class: 'select2'
        .form-text.text-muted
          = s_('Preferences|This feature is experimental and translations are not yet complete.')
          %p
            = link_to help_page_url('development/i18n/translation'), class: 'text-nowrap', target: '_blank', rel: 'noopener noreferrer' do
              = _("Help translate GitLab into your language")
              %span{ aria: { label: _('Open new window') } }
                = sprite_icon('external-link')
      .form-group
        = f.label :first_day_of_week, class: 'label-bold' do
          = _('First day of the week')
        = f.select :first_day_of_week, first_day_of_week_choices_with_default, {}, class: 'select2'
    .col-sm-12
      %hr
  .row.js-preferences-form.js-search-settings-section
    .col-lg-4.profile-settings-sidebar#time-preferences
      %h4.gl-mt-0
        = s_('Preferences|Time preferences')
      %p
        = s_('Preferences|Configure how dates and times display for you.')
        = succeed '.' do
          = link_to _('Learn more'), help_page_path('user/profile/preferences', anchor: 'time-preferences'), target: '_blank', rel: 'noopener noreferrer'
    .col-lg-8
      .form-group
        = f.gitlab_ui_checkbox_component :time_display_relative,
          s_('Preferences|Use relative times'),
          help_text: s_('Preferences|For example: 30 minutes ago.')
      - if Feature.enabled?(:user_time_settings)
        .form-group
          = f.gitlab_ui_checkbox_component :time_format_in_24h, s_('Preferences|Display time in 24-hour format')

  #js-profile-preferences-app{ data: data_attributes }