{{plugin-outlet name="user-preferences-interface-top" args=(hash model=model save=(action "save"))}}

{{#if showThemeSelector}}
  <div class="control-group theme">
    <label class="control-label">{{i18n "user.theme"}}</label>
    <div class="controls">
      {{combo-box
        content=userSelectableThemes
        value=themeId
      }}
    </div>
    {{#if themeIdChanged}}
      <p class="alert alert-success save-theme-alert">{{i18n "user.save_to_change_theme" save_text=(i18n "save") }}</p>
    {{/if}}
    {{#if showThemeSetDefault}}
      <div class="controls">
        {{preference-checkbox labelKey="user.theme_default_on_all_devices" checked=makeThemeDefault}}
      </div>
    {{/if}}
  </div>
{{/if}}

{{#if showColorSchemeSelector}}
  <fieldset class="control-group color-scheme">
    <legend class="control-label">{{i18n "user.color_scheme"}}</legend>
    <div class="control-subgroup light-color-scheme">
      {{#if showDarkColorSchemeSelector}}
        <div class="instructions">{{i18n "user.color_schemes.regular" }}</div>
      {{/if}}
      <div class="controls">
        {{combo-box
          content=userSelectableColorSchemes
          value=selectedColorSchemeId
          onChange=(action "loadColorScheme")
          options=(hash
            translatedNone=selectedColorSchemeNoneLabel
            autoInsertNoneItem=showColorSchemeNoneItem
          )
        }}
      </div>
    </div>
    {{#if showDarkColorSchemeSelector}}
      <div class="control-subgroup dark-color-scheme">
        <div class="instructions">{{i18n "user.color_schemes.dark" }}</div>
        <div class="controls">
          {{combo-box
            content=userSelectableDarkColorSchemes
            value=selectedDarkColorSchemeId
            onChange=(action "loadDarkColorScheme")}}
        </div>
      </div>

      <div class="instructions">
        {{i18n "user.color_schemes.dark_instructions" }}
      </div>
    {{/if}}

    {{#if previewingColorScheme}}
      {{#if previewingColorScheme}}
        {{d-button action=(action "undoColorSchemePreview") label="user.color_schemes.undo" icon="undo" class="btn-default btn-small undo-preview"}}
      {{/if}}

      <div class="controls color-scheme-checkbox">
        {{preference-checkbox labelKey="user.color_scheme_default_on_all_devices" checked=makeColorSchemeDefault}}
      </div>
    {{/if}}
  </fieldset>
{{/if}}

{{#if showDarkModeToggle}}
  <div class="control-group dark-mode">
    <label class="control-label">{{i18n "user.dark_mode"}}</label>
    <div class="controls">
      {{preference-checkbox labelKey="user.dark_mode_enable" checked=enableDarkMode}}
    </div>
  </div>
{{/if}}

<div class="control-group text-size">
  <label for="text-size-selector" class="control-label">{{i18n "user.text_size.title"}}</label>
  <div class="controls">
    {{combo-box
      id="text-size-selector"
      valueProperty="value"
      content=textSizes
      value=textSize
      onChange=(action "selectTextSize")
    }}
  </div>
  {{#if showTextSetDefault}}
    <div class="controls">
      {{preference-checkbox labelKey="user.text_size_default_on_all_devices" checked=makeTextSizeDefault}}
    </div>
  {{/if}}
</div>

{{#if siteSettings.allow_user_locale}}
  <div class="control-group pref-locale">
    <label for="locale-selector" class="control-label">{{i18n "user.locale.title"}}</label>
    <div class="controls">
      {{combo-box
        id="locale-selector"
        valueProperty="value"
        langProperty="value"
        content=availableLocales
        value=model.locale
        onChange=(action (mut model.locale))
        options=(hash
          filterable=true
          none="user.locale.default"
        )
      }}
    </div>
    <div class="instructions">
      {{i18n "user.locale.instructions"}}
    </div>
  </div>
{{/if}}

<div class="control-group home">
  <label for="home-selector" class="control-label">{{i18n "user.home"}}</label>
  <div class="controls">
    {{combo-box
      id="home-selector"
      content=userSelectableHome
      valueProperty="value"
      value=homepageId
      onChange=(action (mut model.user_option.homepage_id))
    }}
  </div>
</div>

<fieldset class="control-group other">
  <legend class="control-label">{{i18n "user.other_settings"}}</legend>

  {{preference-checkbox labelKey="user.external_links_in_new_tab" checked=model.user_option.external_links_in_new_tab class="pref-external-links"}}
  {{preference-checkbox labelKey="user.enable_quoting" checked=model.user_option.enable_quoting class="pref-enable-quoting"}}
  {{preference-checkbox labelKey="user.enable_defer" checked=model.user_option.enable_defer class="pref-defer-undread"}}
  {{#if siteSettings.automatically_unpin_topics}}
    {{preference-checkbox labelKey="user.automatically_unpin_topics" checked=model.user_option.automatically_unpin_topics  class="pref-auto-unpin"}}
  {{/if}}
  {{#if siteSettings.allow_users_to_hide_profile}}
    {{preference-checkbox labelKey="user.hide_profile_and_presence" checked=model.user_option.hide_profile_and_presence  class="pref-hide-profile"}}
  {{/if}}
  {{#if isiPad}}
    {{preference-checkbox labelKey="user.enable_physical_keyboard" checked=disableSafariHacks  class="pref-safari-hacks"}}
  {{/if}}
  {{preference-checkbox labelKey="user.dynamic_favicon" checked=model.user_option.dynamic_favicon  class="pref-dynamic-favicon"}}
  <div class="controls controls-dropdown pref-page-title">
    <label for="user-title-count-mode">{{i18n "user.title_count_mode.title"}}</label>
    {{combo-box
      valueProperty="value"
      content=titleCountModes
      value=model.user_option.title_count_mode
      id="user-title-count-mode"
      onChange=(action (mut model.user_option.title_count_mode))
    }}
  </div>
  {{preference-checkbox labelKey="user.skip_new_user_tips.description" checked=model.user_option.skip_new_user_tips  class="pref-new-user-tips"}}
</fieldset>

{{plugin-outlet name="user-preferences-interface" args=(hash model=model save=(action "save"))}}

<br>

{{plugin-outlet name="user-custom-controls" args=(hash model=model)}}

{{save-controls model=model action=(action "save") saved=saved}}
