<div class="section-header">
  <div class="cl-subheader">
    <p>{{i18n 'Auto Hosting'}}</p>
  </div>
</div>

<div class="cl-subsection">
  <fieldset>
    <div class="label-wrapper">
      <label>{{i18n 'Auto Hosting'}}</label>
    </div>
    <div class="cl-input-container">
      <div class="clearfix">
        <button type="button" class="switch {{if autohost.settings.enabled 'active'}}" {{action 'toggleSetting' 'enabled'}}  data-test-selector="enabled-switch"><span></span></button>
      </div>
      <p class="form_microcopy">
        {{i18n 'Toggle all forms of auto hosting: teammates, host list, and similar channels.'}} <a href="https://blog.twitch.tv/grow-your-community-with-auto-hosting-e80c1460f6e1">{{t 'general.common.learnMore'}}</a>
      </p>
    </div>
  </fieldset>

  <fieldset>
    <div class="label-wrapper">
      <label>{{i18n 'Team Hosting'}}</label>
    </div>
    <div class="cl-input-container">
      <div class="clearfix">
        <button type="button" class="switch {{if autohost.settings.team_host 'active'}}" {{action 'toggleSetting' 'team_host'}} data-test-selector="team-host-switch"><span></span></button>
      </div>
      <p class="form_microcopy">
        {{i18n "Automatically host random channels from your team when you're not live."}}
        {{#if teamHref}}
          (<a href="{{teamHref}}">{{channel.primaryTeamDisplayName}}</a>)
        {{/if}}
        <br>
        {{i18n 'Team channels will be hosted before any channels in your host list. '}}
      </p>
    </div>
  </fieldset>

  <fieldset>
    <div class="label-wrapper">
      <label>{{i18n 'Host List'}}</label>
    </div>
    <div class="cl-input-container">
      <div class="brick brick--pd-none brick--theme-white">
        <div class="clearfix border-b pd-1 balloon-wrapper">
          <h4 class="float-left mg-l-1">
            {{i18n 'Channels to host'}}
          </h4>
          <div class="float-right">
            {{#if searchOpen}}
              <button class="button button--icon-only" data-test-selector="close-search" {{action 'closeSearch'}}>
                {{svg-icon path='svg/close'}}
              </button>
            {{else}}
              <button class="button button--icon-only" data-test-selector="open-search" {{action 'openSearch'}}>
                {{svg-icon path='svg/plus'}}
              </button>
            {{/if}}
          </div>

          {{#if searchOpen}}
            {{autohost-search
              searchOpen=searchOpen
              clickAction=(action "addChannel")
              undoAction=(action "removeChannel")
              channelsMap=autohost.listMap
              recommendedResults=recommendedChannels}}
          {{/if}}
        </div>

        <div class="scroll-y pos-relative autohost-content">
          <ul class="pd-t-2 pd-l-2 pd-b-2 pd-r-1 filter-bar__balloon-scroller autohost-content__list">
            {{#if (not autohost.isLoaded)}}
              <div class="flex flex--verticalCenter flex--horizontalCenter flex--fullHeight">
                <div class="loading-spinner"></div>
              </div>
            {{else}}
              {{#each autohost.list as |user index|}}
                <li class="flex flex--verticalCenter pd-b-2">
                  <div class="flex__item flex__item--noGrow mg-r-1">
                    <img class="square-3" src="{{user.logo}}">
                  </div>
                  <div class="flex__item flex__item--grow mg-r-1" data-test-selector="list-item">
                    {{link-to (format-display-name user.name user.display_name) 'channel' user.name target='_blank' class='ellipsis'}}
                  </div>
                  <div class="flex__item flex__item--noGrow">
                    <div class="balloon-wrapper inline">
                      <button {{action 'moveDown' index}} data-test-selector="move-down-channel" class="button button--icon-only autohost-content__action autohost-content__action--down">
                        {{svg-icon path='svg/up-arrow'}}
                      </button>
                      <div class="balloon balloon--tooltip balloon--down balloon--right mg-r-1">{{i18n 'Move down'}}</div>
                    </div>
                    <div class="balloon-wrapper inline">
                      <button {{action 'moveUp' index}} data-test-selector="move-up-channel" class="button button--icon-only autohost-content__action autohost-content__action--up">
                        {{svg-icon path='svg/up-arrow'}}
                      </button>
                      <div class="balloon balloon--tooltip balloon--down balloon--right mg-r-1">{{i18n 'Move up'}}</div>
                    </div>
                    <div class="balloon-wrapper inline">
                      <button class="button button--icon-only autohost-content__action" {{action 'remove' index}} data-test-selector="delete-channel">
                        {{svg-icon path='svg/close-small'}}
                      </button>
                      <div class="balloon balloon--tooltip balloon--down balloon--right mg-r-1">{{t 'general.forms.remove'}}</div>
                    </div>
                  </div>
                </li>
              {{/each}}

              {{#if (and hasOnboardingChannels (and showOnboarding hasNoAutohostTargets))}}
                <div class="flex flex--verticalCenter flex--horizontalCenter flex--fullHeight autohost-onboarding">
                  <div class="flex__item flex flex--verticalCenter flex--horizontalCenter autohost-onboarding__inner">
                    <h4 class="full-width align-center autohost-onboarding__title">{{i18n "Here are some recommended channels to get you started!"}}</h4>
                    <div class="autohost-onboarding__list full-width flex">
                      {{#each onboardingRecommendedChannels as |recommended|}}
                        {{#with recommended.channel as |channel|}}
                          {{autohost-settings/recommended-channel
                            user=channel
                            displayName=(format-display-name channel.name channel.display_name)
                            source=onboardingSource
                            location=onboardingLocation
                            subtext=recommended.subtext
                            addAction=(action 'addChannel')
                            undoAction=(action 'removeChannel')
                            inList=(get autohost.listMap channel.name)
                            testSelector='autohost-onboarding-recommended-channel'
                            tagName=''
                            fullWidth=true}}
                        {{/with}}
                      {{/each}}
                    </div>
                    {{#common/button-element onClick=(action 'hideOnboarding') testSelector="dismiss-onboarding" isHollow=true}}
                      {{t 'general.forms.dismiss'}}
                    {{/common/button-element}}
                  </div>
                </div>
              {{else if (eq autohost.list.length 0)}}
                <div class="flex flex--verticalCenter flex--horizontalCenter flex--fullHeight">
                  <div class="flex__item flex flex--horizontalCenter">
                    <h4 class="full-width align-center">{{i18n 'Add channels to your list to auto host them'}}</h4>
                    <button {{action 'openSearch'}} class='button button--hollow mg-t-1' data-test-selector="add-channels">{{i18n 'Add Channels'}}</button>
                  </div>
                </div>
              {{/if}}
            {{/if}}
          </ul>
        </div>

        <div class="flex flex--verticalCenter clearfix pd-l-2 pd-t-1 pd-r-2 pd-b-1 border-t">
          <div class="flex__item flex__item--grow">
            <div>
              <strong>{{i18n 'Auto host channels similar to yours'}}</strong>
              <span class="balloon-wrapper">
                (<button {{action 'toggleShowSimilarChannels'}} data-test-selector="view-recommended">{{i18n 'View'}}</button>)
                {{#if showSimilarChannels}}
                  <div class="balloon balloon--up balloon--center balloon--md show" data-test-selector="view-similar-channels">
                    {{#if hasSimilarChannels}}
                      <div class="filter-bar__balloon-scroller scroll-y">
                        {{#each similarChannels.similarChannels as |channel|}}
                          {{autohost-settings/recommended-channel
                            user=channel
                            displayName=(format-display-name channel.name channel.display_name)
                            location=settingsLocation
                            source=similarChannelsSource
                            addAction=(action 'addChannel')
                            undoAction=(action 'removeChannel')
                            inList=(get autohost.listMap channel.name)}}
                        {{/each}}
                      </div>
                    {{else}}
                      <div class="pd-t-2 pd-b-2 noticeWrap__visual">
                        {{svg-icon path='svg/search-no-results'}}
                        <p>{{i18n 'Sorry, no similar channels found'}}</p>
                      </div>
                    {{/if}}
                  </div>
                {{/if}}
              </span>
            </div>
            <span class="sub-text">{{i18n 'Streamers on your primary team & host list will always be hosted first'}}</span>
          </div>
          <div class="clearfix">
            <button type="button" class="switch {{if autohost.settings.recommended_host 'active'}}" {{action 'toggleSetting' 'recommended_host'}}  data-test-selector="recommended-host-switch"><span></span></button>
          </div>
        </div>
      </div>
    </div>
  </fieldset>

  <fieldset>
    <div class="label-wrapper">
      <label>{{i18n 'Host Priority'}}</label>
    </div>
    <div class="cl-input-container">
      <form>
        <div class="clearfix mg-b-1">
          <input id="ah-host-streams-randomly" class="mg-r-1" name="host-order" type="radio" checked={{randomHost}} onChange={{action 'setStrategy' 'random'}} data-test-selector="random-host">
          <label for="ah-host-streams-randomly">{{i18n 'Host channels randomly from the list.'}}</label>
        </div>
        <div class="clearfix">
          <input id="ah-host-streams-ordered" class="mg-r-1" name="host-order" type="radio" checked={{orderedHost}} onChange={{action 'setStrategy' 'ordered'}} data-test-selector="ordered-host">
          <label for="ah-host-streams-ordered">{{i18n 'Host channels by the order they appear in the list.'}}</label>
        </div>
      </form>
    </div>
  </fieldset>
</div>
