<div class="player-column host-frame js-host-frame {{if channel.hostModeTarget 'cn-hosted mg-b-2'}}">
  {{#if channel.hostModeTarget}}
    <div class='cn-hosting cn-hosting--top'>
      <div class='card card--xs card--row'>
        {{#link-to 'channel' channel.hostModeTarget.name class='card__layout' data-tt_medium='twitch_channel' data-tt_content='host_channel'}}
          <figure class='card__img card__img--avatar'>
            <img src={{channel.hostModeTarget.logo}}>
          </figure>
          <div class='card__body'>
            <h3 class='card__title js-hosting-card-title'>
              {{#with (i18n-split-string "Hosting |channel|") as |translation|}}
                {{at-index translation 0}}
                <strong>{{channel.hostModeTarget.name}}</strong>
                {{at-index translation 2}}
              {{/with}}
            </h3>
          </div>
        {{/link-to}}
      </div>
    </div>
  {{else if (not isInMaintenanceMode)}}
    {{channel-upsell-banner
      isLiveStatusReady=isLiveStatusReady
      isLive=isLive
      isVisible=isUpsellBannerVisible
      pastBroadcasts=pastBroadcasts
      name=channel.displayName
      banner=channel.profileBanner
    }}
  {{/if}}

  {{#if (in-experiment-group 'DETERMINATION')}}
    <div class="player-placeholder" style={{placeholderStyle}}></div>
  {{else}}
    <div class="js-player">
      {{twitch-player2
        playerName='stream'
        channel=targetChannel
        hostChannel=channel
        showTheatre=true
        showInfo=isSubNavExperiment
        handleExitFullscreen='handleExitFullscreen'
        canGenerateClips=canGenerateClips
      }}
    </div>
  {{/if}}

  {{#if channel.hostModeTarget}}
    <div class='cn-hosting cn-hosting--bottom flex flex--verticalCenter flex--nowrap'>
      {{follow-button
        name='host_mode'
        channel=channel.hostModeTarget
        hosterChannelId=channel.id
        track=(action 'trackChannelEvent' target=tracking)
        text='Follow {{channel}}'
      }}
      {{channel-redesign/notification-controls
        name='host_mode'
        channel=channel.hostModeTarget
        hosterChannelId=channel.id
        balloonLeft=true
        track=(action 'trackChannelEvent' target=tracking)
      }}
      {{subscribe-button
        channel=channel.hostModeTarget
        hosterChannel=channel
        named=true
        attachment='bottom left'
        targetAttachment='top left'
        balloonClassNames='balloon--up balloon--left'
        offset='-6px 20px'
      }}

      {{#unless isChannelOwner}}
        {{channel-options
          channel=channel
          isHostMode=true
          class="flex flex__item--grow flex--horizontalEnd"
        }}
      {{/unless}}
    </div>
  {{/if}}
</div>

{{#if isFoodChannel}}
  {{sizmek-food-tracking channel=channel}}
{{/if}}

{{#if (and (not isSubNavExperiment) (not channel.hostModeTarget))}}
  {{channel-redesign/metadata-box
    channel=channel
    isChannelOwner=isChannelOwner
    isEditable=isEditable
  }}
{{/if}}
{{#if isSubNavExperiment}}
  {{channel-redesign/top-bar
    channel=channel
    isSmallBar=isSmallBar
    isSubNavExperiment=isSubNavExperiment
    isChannelIndex=isChannelIndex
    canEditBanner=isEditable
    isEditing=isEditingBanner
    isChannelOwner=isChannelOwner
    isLive=isLive
    showBalloon=avatarShowBalloon
    toggleEditingMode=(action 'toggleEditingMode')
    scrollForUser='scrollForUser'
    openInModal=(route-action 'openInModal')
    closeModal=(route-action 'closeModal')
  }}
  <div class="cn-bar-spacer js-cn-bar-spacer {{if (and (not isSmallBar) isFixed) 'show'}}"></div>
{{/if}}

{{#if (or (is-staff) (is-global-enabled "cmrcChannelBoxReleased"))}}
  {{commerce/channel-box
    channel=channel
    isHosting=channel.hostModeTarget
  }}
{{/if}}

{{#if isChannelOwner}}
  {{feed-toggle
      userLogin=channel.id
      isOptedIntoChannelFeed=channel.channelFeedEnabled}}
{{/if}}

{{#if channel.channelFeedEnabled}}
  {{#tabbed-split
      gridUnit=320
      flexPanelId='activity'
      gutter=30
      subGutter=20
      isLeftColumnClosed=layout.isLeftColumnClosed
      isRightColumnClosed=layout.isRightColumnClosed
      isTheatreMode=layout.isTheatreMode
      as |tabSplitLayout|
  }}
    {{#tabbed-split-panel label=(i18n "Posts") isFlex=true layoutSettings=tabSplitLayout}}
      {{twitch-feed/channel-feed
        user=channel.id
        broadcasterIsLive=isLive
        showComposer=isChannelOwner
        onOpenPost=(route-action 'openPost')
        panelColumns=tabSplitLayout.columns
      }}
    {{/tabbed-split-panel}}
    {{#tabbed-split-panel  label=(i18n "Info") layoutSettings=tabSplitLayout}}
      {{panels-list
        showEmptyMessage=true
        panels=channel.panels
        isEditable=isEditable
        isLeftColumnClosed=layout.isLeftColumnClosed
        isRightColumnClosed=layout.isRightColumnClosed
        teespringCampaignEnabled=channel.teespringCampaignEnabled
        isExtensionsEnabled=isExtensionsEnabled
        installedExtensions=installedExtensions
        onLinkClick=(action 'panelLinkClick')
        visible=visible
      }}
    {{/tabbed-split-panel}}
  {{/tabbed-split}}
{{else}}
  {{panels-list
    showEmptyMessage=true
    panels=channel.panels
    isEditable=isEditable
    teespringCampaignEnabled=channel.teespringCampaignEnabled
    isExtensionsEnabled=isExtensionsEnabled
    installedExtensions=installedExtensions
    onLinkClick=(action 'panelLinkClick')
  }}
{{/if}}
