<label class="control-label">{{i18n "chat.title_capitalized"}}</label>

<div class="control-group chat-setting" data-setting-name="user_chat_enabled">
  <label class="controls">
    <Input
      id="user_chat_enabled"
      @type="checkbox"
      @checked={{this.model.user_option.chat_enabled}}
    />
    {{i18n "chat.enable"}}
  </label>
</div>

<div
  class="control-group chat-setting"
  data-setting-name="user_chat_only_push_notifications"
>
  <label class="controls">
    <Input
      id="user_chat_only_push_notifications"
      @type="checkbox"
      @checked={{this.model.user_option.only_chat_push_notifications}}
    />
    {{i18n "chat.only_chat_push_notifications.title"}}
  </label>
  <span class="control-instructions">
    {{i18n "chat.only_chat_push_notifications.description"}}
  </span>
</div>

<div
  class="control-group chat-setting"
  data-setting-name="user_chat_ignore_channel_wide_mention"
>
  <label class="controls">
    <Input
      id="user_chat_ignore_channel_wide_mention"
      @type="checkbox"
      @checked={{this.model.user_option.ignore_channel_wide_mention}}
    />
    {{i18n "chat.ignore_channel_wide_mention.title"}}
  </label>
  <span class="control-instructions">
    {{i18n "chat.ignore_channel_wide_mention.description"}}
  </span>
</div>

<div
  class="control-group chat-setting controls-dropdown"
  data-setting-name="user_chat_sounds"
>
  <label for="user_chat_sounds">{{i18n "chat.sound.title"}}</label>
  <ComboBox
    @options={{hash none="chat.sounds.none"}}
    @valueProperty="value"
    @content={{this.chatSounds}}
    @value={{this.model.user_option.chat_sound}}
    @id="user_chat_sounds"
    @onChange={{action "onChangeChatSound"}}
  />
</div>

<div
  class="control-group chat-setting controls-dropdown"
  data-setting-name="user_chat_email_frequency"
>
  <label for="user_chat_email_frequency">
    {{i18n "chat.email_frequency.title"}}
  </label>
  <ComboBox
    @valueProperty="value"
    @content={{this.emailFrequencyOptions}}
    @value={{this.model.user_option.chat_email_frequency}}
    @id="user_chat_email_frequency"
    @onChange={{fn (mut this.model.user_option.chat_email_frequency)}}
  />
  {{#if (eq this.model.user_option.chat_email_frequency "when_away")}}
    <div class="control-instructions">
      {{i18n "chat.email_frequency.description"}}
    </div>
  {{/if}}
</div>

<div
  class="control-group chat-setting controls-dropdown"
  data-setting-name="user_chat_header_indicator_preference"
>
  <label for="user_chat_header_indicator_preference">
    {{i18n "chat.header_indicator_preference.title"}}
  </label>
  <ComboBox
    @valueProperty="value"
    @content={{this.headerIndicatorOptions}}
    @value={{this.model.user_option.chat_header_indicator_preference}}
    @id="user_chat_header_indicator_preference"
    @onChange={{action
      (mut this.model.user_option.chat_header_indicator_preference)
    }}
  />
</div>

<div
  class="control-group chat-setting controls-dropdown"
  data-setting-name="user_chat_separate_sidebar_mode"
>
  <label for="user_chat_separate_sidebar_mode">
    {{i18n "chat.separate_sidebar_mode.title"}}
  </label>

  <ComboBox
    @valueProperty="value"
    @content={{this.chatSeparateSidebarModeOptions}}
    @value={{this.chatSeparateSidebarMode}}
    @id="user_chat_separate_sidebar_mode"
    @onChange={{fn (mut this.model.user_option.chat_separate_sidebar_mode)}}
  />
</div>

<SaveControls
  @id="user_chat_preference_save"
  @model={{this.model}}
  @action={{action "save"}}
  @saved={{this.saved}}
/>