{{#unless isCollapsed}}
  {{#if (and isChannelOwner shouldShowSetupAutohost)}}
    <div class="dash-notice">
      <div class="flex flex--verticalCenter flex--nowrap">
        <div class="flex__item ellipsis">
          <p class="strong ellipsis">{{i18n "Auto host! Get 10% growth"}}</p>
          <span class="small"><a class="dash-notice__link" href="https://blog.twitch.tv/auto-host-get-on-this-train-5105fe8bfe4#.fnr5m9f2z" target="_blank" rel="noopener noreferrer">{{i18n "It's easy, here's how"}}</a></span>
        </div>
        <div class="flex flex--horizontalEnd flex__item flex__item--grow flex__item--noShrink">
          <a href="/settings/channel" target="_blank" rel="noopener noreferrer" class="button button--small flex__item mg-r-1">
            {{i18n 'Set up now'}}
          </a>
          <button {{action 'dismissSetupAutohost'}} type="button" class="button button--icon-only button--dark flex__item flex flex--verticalCenter dash-notice__icon">
            {{partial 'svg/close-small'}}
          </button>
        </div>
      </div>
    </div>
  {{/if}}

  {{#if autohost.snoozed}}
    <div class="brick brick--theme-grey dash-brick dash-host-block">
      <h4 class="dash-brick__title">{{i18n 'Auto host is paused'}}</h4>
      {{i18n 'It will resume when you are done streaming.'}}
    </div>
  {{/if}}

  {{#if hosting}}
    <div class="dash-host-block">
      <div class="form__label">
        {{#if (and isChannelOwner autohost.isAutoHosting)}}
          {{i18n 'You are auto hosting'}}
        {{else}}
          {{i18n 'You are hosting'}}
        {{/if}}
      </div>
      {{dashboards/live/host-mode/host-details host=hosting shouldShowAutohostAdd=false}}
    </div>
  {{/if}}

  <ul class="dash-tabs" role="tablist">
    <li class="dash-tabs__item {{if isShowingHostedBy 'dash-tabs__item--active'}}" role="presentation">
      <a role="tab" href="#" {{action 'showHostedBy'}} class="dash-tabs__label" data-test-selector="hosted-by-tab">
        {{i18n 'Hosting you'}}
      </a>
    </li>
    <li class="dash-tabs__item {{unless isShowingHostedBy 'dash-tabs__item--active'}}" role="presentation">
      <a role="tab" href="#" {{action 'showAutoHostedBy'}} class="dash-tabs__label" data-test-selector="auto-hosted-by-tab">
        {{i18n 'Auto hosts you'}}
        {{#if (and isChannelOwner unseenChannelsCount)}}
          <span class='pill' data-test-selector="unseen-channels-count">{{unseenChannelsCount}}</span>
        {{/if}}
      </a>
    </li>
  </ul>
  <div class="brick brick--theme-grey dash-brick">
    {{#if hostsLoaded}}
      {{#if isShowingHostedBy}}
        {{dashboards/live/host-mode/host-list
          channel=channel
          hosts=hostedBy
          isChannelOwner=isChannelOwner
          trackingSource='hosting'
          emptyMessage=(i18n 'There are currently no channels hosting you')
          trackDashboardEvent=trackDashboardEvent
        }}
      {{else}}
        {{#if isChannelOwner}}
          {{dashboards/live/host-mode/host-list
            channel=channel
            hosts=autohost.autoHostedBy
            isChannelOwner=isChannelOwner
            trackingSource='added_back'
            emptyMessage=(i18n 'No channels have auto hosted you')
            trackDashboardEvent=trackDashboardEvent
          }}
        {{else}}
          {{i18n 'You must be the channel owner'}}
        {{/if}}
      {{/if}}
    {{else}}
      <div class="flex flex--verticalCenter flex--horizontalCenter flex--fullHeight">
        <div class="loading-spinner"></div>
      </div>
    {{/if}}
  </div>
{{/unless}}
