{{! template-lint-disable nested-interactive block-indentation }}
<div class="js-chat-display">
  {{#if isLoggedIn}}
    <div class="js-chat-appearance chat-menu-content {{unless showDisplaySettings 'hidden'}}">
      <button class="font-color-purple" {{action 'toggleDisplaySettings'}}>
        <svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M1 5l6-4v8z" fill="#6441A4" fill-rule="evenodd"/></svg>
        {{t 'general.forms.back'}}
      </button>
    </div>
    <div class="list-header first">
      {{i18n 'Name Display'}}
    </div>
    <div class="chat-menu-content">
      {{chat/from-display-preview chatUser=chatUser}}
      <div class="js-edit-chat-appearance {{if showDisplaySettings 'hidden'}} mg-t-1">
        <button class="font-color-purple" {{action 'toggleDisplaySettings'}}>
          {{i18n 'Edit Appearance'}}
        </button>
      </div>
    </div>
    <div class="js-chat-appearance-selectors {{unless showDisplaySettings 'hidden'}}">
      <div class="list-header">
        {{i18n 'Name Color'}}
      </div>
      <div class="chat-menu-content">
        {{chat/color-selector
            chatUser=chatUser
            setColor=(action setColor)
        }}
      </div>
      {{chat/badges-selector chatUser=chatUser}}
    </div>
  {{else}}
    <div class="list-header first">
      {{i18n 'Name Color'}}
    </div>
    <div class="chat-menu-content">
      {{chat/color-selector
          chatUser=chatUser
          setColor=(action setColor)
      }}
    </div>
  {{/if}}
</div>
<div class="js-chat-settings {{if showDisplaySettings 'hidden'}}">
  <div class="list-header">
    {{i18n 'Chat Options'}}
  </div>
  <div class="chat-menu-content">
    <p>
      {{input type='checkbox' checked=showTimestamps}}
      {{i18n 'Time Stamps'}}
    </p>
    <p class="toggle-darkmode {{if application.isDarkPopout 'hidden'}}">
      {{input type='checkbox' checked=darkMode}}
      {{i18n 'Dark Mode'}}
    </p>
    <p>
      <button class="font-color-purple" {{action 'hideChat'}}>
        {{i18n 'Hide Chat'}}
      </button>
    </p>
    <p class="{{if application.isPopout 'hidden'}} {{if application.isDarkPopout 'hidden'}}">
      <button class="font-color-purple" {{action 'popoutChat'}}>
        {{i18n 'Popout'}}
      </button>
    </p>
  </div>
  {{#if chatUser.isModeratorOrHigher}}
    <div class="js-moderation moderation">
      <div class="list-header">
        {{i18n 'Mod Tools'}}
      </div>
      <div class="chat-menu-content">
        <p>
          {{input type='checkbox' class='js-mod-icons-checkbox' checked=showModIcons}}
          {{i18n 'Mod Icons'}}
        </p>
        {{#if chatUser.isModeratorOrHigher}}
          <p>
            {{! We don't directly proxy the followerModeOn value here, if we did, }}
            {{! the user checking the box would override the computed value with a static value }}
            {{input type='checkbox' class='js-followers-mode-checkbox' checked=(gt followerMode -1)}}
            {{i18n 'Followers-Only Chat'}}
          </p>
          <p class="chat-menu-content__description hint">
            {{i18n 'Must have followed for'}}<button class="button button--text button--small button--dropmenu balloon-wrapper chat-menu-content__followers-selector-button">
              {{followerModeSelectionShorthand}}
              <div class="balloon balloon--up balloon--right balloon--dropmenu chat-menu-content__followers-selector-balloon">
                <ul class="balloon__list">
                  <li class="balloon__title">{{i18n 'Followers can chat if they have followed for at least'}}</li>
                  {{#each followerModeDurations as |duration|}}
                    <li><a class="balloon__link {{if (eq duration.duration followerModeSelection) 'balloon__link--selected'}}" href="#" {{action "setFollowersDuration" duration.duration}}>{{i18n duration.label}}</a></li>
                  {{/each}}
                </ul>
              </div>
            </button>
          </p>
        {{/if}}
        <p>
          {{input type='checkbox' class='js-slow-mode-checkbox' checked=slowMode}}
          {{i18n 'Slow Mode'}}
        </p>
        {{#if chatUser.isOwner}}
          <p>
            {{input type='checkbox' class='js-public-invites-checkbox' checked=chatUser.publicInvitesEnabled}}
            {{i18n 'Public Invites Enabled'}}
          </p>
        {{/if}}
        {{#if chatUser.isModeratorOrBroadcaster}}
          <p>
            {{input type='checkbox' class='js-mod-actions-checkbox' checked=showModerationActions}}
            {{i18n 'Show Moderation Actions'}}
          </p>
        {{/if}}
        {{#if (and chatUser.isTwitchBotEnabled chatUser.isModeratorOrBroadcaster)}}
          <p>
            {{input type='checkbox' class='js-twitchbot-actions-checkbox' checked=settings.showTwitchBotActions}}
            {{i18n 'Show Messages Caught by AutoMod'}}
          </p>
        {{/if}}
        {{#if (or (and chatUser.isTwitchBotEnabled chatUser.isModeratorOrBroadcaster) chatUser.isTwitchPrivilegedUser)}}
          <p>
            {{input type='checkbox' class='js-message-flags-checkbox' checked=showMessageFlags}}
            {{i18n 'Show Message Flags'}}
          </p>
        {{/if}}
        <p class="clear-chat">
          <button class="js-clear-chat font-color-purple" {{action 'clearChat'}}>
            <span>{{i18n 'Clear Chat'}}</span>
          </button>
        </p>
      </div>
    </div>
  {{/if}}
</div>
