<div class="cn-bar js-cn-bar {{if shouldShowIndexBarCss 'cn-bar-index'}} {{if shouldShowSmallBarCss 'cn-bar-small'}} {{if shouldShowFixedBarCss 'cn-bar-fixed'}}">

  {{#link-to 'channel.index' channel.name class='cn-tabs__profile' data-tt_medium='twitch_topnav' data-tt_content='tab_channel'}}
    <figure class="cn-bar__avatar-wrap {{if isEditing '' 'js-username-hover'}}" data-id="{{channel._id}}" data-login="{{channel.name}}" data-position="down" data-hidefollow="true" {{action 'clickTab' 'channel.index.index'}}>
      {{#if isEditing}}
        <div class="cn-overlay cn-edit-image" {{action 'toggleShowBalloon' bubbles=false}}>
          <div class="balloon-wrapper">
            <div class="balloon balloon--up balloon--dropmenu balloon--center balloon--fancy {{if showBalloon 'show' 'hide'}}">
              <ul class="balloon__list">
                <li><a class="balloon__link" onclick={{action openInModal uploadImageTemplate this}}>{{i18n 'Upload new image'}}</a></li>
                <li class="balloon__stroke"></li>
                <li><a class="balloon__link" onclick={{action 'removeAvatar'}}>{{t 'general.forms.remove'}}</a></li>
              </ul>
            </div>
          </div>
          {{partial 'svg/edit'}}
          <p>{{i18n 'Change avatar'}}</p>
        </div>
      {{/if}}
      <img src={{channel.logo}} alt={{channel.name}} class='cn-bar__avatar'>
    </figure>
  {{/link-to}}

  <div class="cn-nav-wrapper js-cn-nav-wrapper {{if shouldOverflow 'cn-nav-wrapper--overflow-visible'}}">
    <dl class="cn-tabs cn-tabs--0 js-cn-tabs--0">
      <dt class="cn-tabs__item cn-tabs__item--withseparator js-cn-tab-live">
        {{#link-to 'channel.index' channel.name class='cn-tabs__profile flex flex--verticalCenter flex--nowrap' data-tt_medium='twitch_topnav' data-tt_content='tab_channel'}}
          <span class="flex flex--verticalCenter flex--nowrap cn-scrollTrigger" {{action 'clickTab' 'channel.index.index'}}>
            <span class="cn-bar__displayname">{{channel.displayName}}</span>

            {{#if isLive}}
              <div class="cn-livestatus">
                <div class="balloon-wrapper">
                  <div class="balloon balloon--tooltip balloon--right balloon--center">
                    {{i18n 'Live Now'}}
                  </div>
                  <span class="cn-livestatus__circle"></span>
                </div>
              </div>
            {{/if}}
          </span>
        {{/link-to}}
      </dt>

      <dd class="cn-tabs__inner js-cn-tabs__inner">
        <dl class="cn-tabs cn-tabs--1 js-cn-tabs--1">

          <dd class="cn-tabs__item cn-tabs__item--withseparator js-cn-tab-videos {{if isVideosTabCollapsed 'hide'}}">
            {{#link-to 'channel.videos.video-type' channel.name 'all' class='flex flex--verticalCenter js-cn-tabs__videos' data-tt_medium='twitch_topnav' data-tt_content='tab_videos'}}
              <span class="flex flex--verticalCenter cn-scrollTrigger" {{action 'clickTab' 'channel.videos.video-type'}}>
                <span class="cn-tabs__title">{{t 'general.Twitch.videos'}}</span>
                <strong class="cn-tabs__count">{{commatized videosCount}}</strong>
              </span>
            {{/link-to}}
          </dd>

          {{#if clips.isClipsTabEnabled}}
            <dd
              class="cn-tabs__item cn-tabs__item--withseparator js-cn-tab-clips flex flex--verticalCenter {{if isClipsTabCollapsed 'hide'}}"
              data-test-selector="channel-clips-tab"
            >
              {{#link-to 'channel.clips' channel.name class='flex flex--verticalCenter' data-tt_medium='twitch_topnav' data-tt_content='tab_clips'}}
                <span class="flex flex--verticalCenter cn-scrollTrigger" {{action 'clickTab' 'channel.clips'}}>
                  <span class="cn-tabs__title">{{t 'channel.clips.featureName'}}</span>
                </span>
              {{/link-to}}
              {{#if clips.shouldShowUpsell}}
                {{clips/clips-nav-hotspot dismiss=(action 'dismissClipsNavHotspot')}}
              {{/if}}
            </dd>
          {{/if}}

          {{#if collections.isEnabled}}
            <dd class="cn-tabs__item cn-tabs__item--withseparator js-cn-tab-playlists {{if isCollectionsTabCollapsed 'hide'}}">
              {{#link-to 'channel.collections' channel.name class='flex flex--verticalCenter' data-tt_medium='twitch_topnav' data-tt_content='tab_playlists'}}
                <span class="flex flex--verticalCenter cn-scrollTrigger" {{action 'clickTab' 'channel.collections'}}>
                  <span class="cn-tabs__title">{{i18n "Collections"}}</span>
                </span>
              {{/link-to}}
            </dd>
          {{/if}}

          <dd class="cn-tabs__item cn-tabs__item--withseparator js-cn-tab-followers {{if isFollowersTabCollapsed 'hide'}}">
            {{#link-to 'channel.followers' channel.name class='flex flex--verticalCenter js-cn-tabs__followers' data-tt_medium='twitch_topnav' data-tt_content='tab_followers'}}
              <span class="flex flex--verticalCenter flex--nowrap cn-scrollTrigger" {{action 'clickTab' 'channel.followers'}}>
                <span class="cn-tabs__title">{{t 'general.Twitch.followers'}}</span>
                <strong class="cn-tabs__count">{{commatized channel.followersTotal}}</strong>
              </span>
            {{/link-to}}
          </dd>

          <dd class="cn-tabs__item js-cn-tab-following {{if isFollowingTabCollapsed 'hide'}}">
            {{#link-to 'channel.following' channel.name class='flex flex--verticalCenter js-cn-tabs__following' data-tt_medium='twitch_topnav' data-tt_content='tab_following'}}
              <span class="flex flex--verticalCenter flex--nowrap cn-scrollTrigger" {{action 'clickTab' 'channel.following'}}>
                <span class="cn-tabs__title">{{i18n "Following"}}</span>
                <strong class="cn-tabs__count">{{commatized channel.followingTotal}}</strong>
              </span>
            {{/link-to}}
          </dd>
        </dl>
      </dd>
      {{#if areTabsCollapsed}}
        <div class="balloon-wrapper js-collapsed-nav-wrapper">
          <button class="cn-btn-collapsed-nav button button--icon-only" {{action 'toggleCollapsedNav'}}>
            {{svg-icon path="svg/nav-more"}}
            {{#if (and clips.isClipsTabEnabled isClipsTabCollapsed clips.shouldShowUpsell)}}
              {{clips/clips-nav-hotspot dismiss=(action 'dismissClipsNavHotspot')}}
            {{/if}}
          </button>
          <div id="collapsedNav" class="cn-collapsed-nav balloon balloon--down balloon--left balloon--dropmenu balloon--toggle balloon--no-tail {{if isShowingCollapsedNav '' 'hide'}}">
            <ul class="balloon__list">
              <li class="js-cn-balloon-videos {{if isVideosTabCollapsed '' 'hide'}}">
                {{#link-to 'channel.videos.video-type' channel.name 'all' class='balloon__link' data-tt_medium='twitch_topnav' data-tt_content='tab_videos'}}
                  <span class="flex flex--verticalCenter cn-scrollTrigger" {{action 'clickTab' 'channel.videos.video-type'}}>
                    <span class="cn-tabs__title">{{t 'general.Twitch.videos'}}</span>
                    <strong>{{commatized videosCount}}</strong>
                  </span>
                {{/link-to}}
              </li>
              {{#if clips.isClipsTabEnabled}}
                <li class={{if isClipsTabCollapsed '' 'hide'}}>
                  {{#link-to 'channel.clips' channel.name class='balloon__link' data-tt_medium='twitch_topnav' data-tt_content='tab_clips'}}
                    <span class="flex flex--verticalCenter cn-scrollTrigger" {{action 'clickTab' 'channel.clips'}}>
                      <span class="cn-tabs__title">{{t 'channel.clips.featureName'}}</span>
                    </span>
                  {{/link-to}}
                </li>
              {{/if}}
              <li class="js-cn-balloon-followers {{if isFollowersTabCollapsed '' 'hide'}}">
                {{#link-to 'channel.followers' channel.name class='balloon__link' data-tt_medium='twitch_topnav' data-tt_content='tab_followers'}}
                  <span class="flex flex--verticalCenter flex--nowrap cn-scrollTrigger" {{action 'clickTab' 'channel.followers'}}>
                    <span class="cn-tabs__title">{{t 'general.Twitch.followers'}}</span>
                    <strong>{{commatized channel.followersTotal}}</strong>
                  </span>
                {{/link-to}}
              </li>
              <li class="js-cn-balloon-following {{if isFollowingTabCollapsed '' 'hide'}}">
                {{#link-to 'channel.following' channel.name class='balloon__link' data-tt_medium='twitch_topnav' data-tt_content='tab_following'}}
                  <span class="flex flex--verticalCenter flex--nowrap cn-scrollTrigger" {{action 'clickTab' 'channel.following'}}>
                    <span class="cn-tabs__title">{{i18n "Following"}}</span>
                    <strong>{{commatized channel.followingTotal}}</strong>
                  </span>
                {{/link-to}}
              </li>
            </ul>
          </div>
        </div>
      {{/if}}
    </dl>

    <dl class="cn-tabs cn-tabs--2 js-cn-tabs--2">
      {{#if canEditBanner}}
        <dd class="cn-tabs__button">
          {{#if isEditing}}
            <button class="button button--hollow button--icon cn-button-edit" onclick={{action toggleEditingMode false}}>
              <figure>{{partial 'svg/followcheck'}}</figure>
              <span>{{t 'general.forms.done'}}</span>
            </button>
          {{else}}
            <button class="button button--hollow button--icon cn-button-edit" {{action toggleEditingMode true}}>
              <figure>{{partial 'svg/edit'}}</figure>
              <span>{{t 'general.forms.edit'}}</span>
            </button>
          {{/if}}
        </dd>
      {{/if}}

      {{#unless isChannelOwner}}

        {{#if (in-experiment-group 'ADOPT' 'yes')}}
          <dd class="cn-tabs__button">
            {{support-button
              channel=channel
            }}
          </dd>
        {{/if}}

        <dd class="cn-tabs__button">
          {{#channel-redesign/follow-cta channel=channel as |cta|}}
            {{follow-button
              name='channel'
              track=(action "trackChannelEvent" target=tracking)
              channel=channel
              vodId=vod.id
              vodType=vod.broadcast_type
              onClick=cta.onFollowClick
              includeTrackingData=cta.addFollowTrackingData
            }}
          {{/channel-redesign/follow-cta}}
          {{channel-redesign/notification-controls
            name='channel'
            channel=channel
            track=(action "trackChannelEvent" target=tracking)
            toggleOverflow=(action (mut isShowingFollowNotificationControls) (not isShowingFollowNotificationControls))
            hideOverflow=(action (mut isShowingFollowNotificationControls) false)
          }}
        </dd>

        {{#if showCommissionButton}}
          <dd class="cn-tabs__button">
            {{commission-button channel=channel}}
          </dd>
        {{/if}}

        <dd class="cn-tabs__button">
          {{subscribe-button
            channel=channel
            attachment='top right'
            targetAttachment='bottom right'
            balloonClassNames='balloon--down balloon--right'
            offset='-10px 6px'
            vodId=vod.id
            vodType=vod.type
          }}
        </dd>

        {{#if isSubNavExperiment}}
          <dd class="cn-tabs__button" style="margin-left: 0;">
            {{channel-options channel=channel}}
          </dd>
        {{/if}}
      {{/unless}}
    </dl>

  </div>
</div>
