{{!-- Viewcount --}}
<div class="flex flex--verticalCenter flex--nowrap dash-widget__item">
  <div class="flex__item flex__item--noGrow mg-r-1" onmouseover={{action 'onHover' 'viewers_icon'}}>
    <div class="balloon-wrapper">
      {{svg-icon
        path='svg/glyph-live'
        iconModifier='icon--block'
        class=(concat 'dash-widget__icon dash-widget__icon--size-1 ' (if isLive 'dash-widget__icon--red' 'dash-widget__icon--filled'))
      }}

      <div class="balloon balloon--tooltip balloon--right">
        {{i18n 'The number of people currently watching your channel'}}
      </div>
    </div>
  </div>

  <div class="flex__item"
    {{action 'updateStreamStatsConfig' 'showViewers'}} data-test-selector="viewer-count" onmouseover={{action 'onHover' 'viewers_value'}}>
    <div class="balloon-wrapper">
      {{#if streamStatsConfig.showViewers~}}
        {{#if isLive~}}
          <span class="cl-red">{{commatized channel.stream.viewers}} {{i18n 'Viewers'}}</span>
        {{~else~}}
          <span class="dash-widget-text-light">{{t 'general.Twitch.offline'}}</span>
        {{~/if}}

        <div class="balloon balloon--tooltip balloon--right">{{t 'dashboards.live.streamStats.stat.clickToHide'}}</div>
      {{~else~}}
        <span class="dash-widget-text-light">{{t 'dashboards.live.streamStats.stat.hoverToView'}}</span>

        <div class="balloon balloon--tooltip balloon--right">
          {{#if isLive~}}
            {{commatized channel.stream.viewers}} {{i18n 'Viewers'}}
          {{~else~}}
            {{t 'general.Twitch.offline'}}
          {{~/if}}
        </div>
      {{/if}}
    </div>
  </div>
</div>

{{!-- Uptime --}}
<div class="flex flex--verticalCenter flex--nowrap dash-widget__item">
  <div class="flex__item flex__item--noGrow mg-r-1" onmouseover={{action 'onHover' 'uptime_icon'}}>
    <div class="balloon-wrapper">
      {{svg-icon
        path='svg/timeout'
        iconModifier='icon--block'
        class='dash-widget__icon dash-widget__icon--filled dash-widget__icon--size-1'
      }}

      <div class="balloon balloon--tooltip balloon--right">
        {{i18n 'How long you have been broadcasting for this session'}}
      </div>
    </div>
  </div>

  <div class="flex__item" {{action 'updateStreamStatsConfig' 'showUptime'}} data-test-selector="up-time" onmouseover={{action 'onHover' 'uptime_value'}}>
    <div class="balloon-wrapper">
      {{#if streamStatsConfig.showUptime~}}
        {{#if isLive~}}
          <span>{{timeLive}}</span>
        {{~else~}}
          <span class="dash-widget-text-light">{{t 'general.Twitch.offline'}}</span>
        {{~/if}}

        <div class="balloon balloon--tooltip balloon--right">{{t 'dashboards.live.streamStats.stat.clickToHide'}}</div>
      {{~else~}}
        <span class="dash-widget-text-light">{{t 'dashboards.live.streamStats.stat.hoverToView'}}</span>

        <div class="balloon balloon--tooltip balloon--right">
          {{#if isLive~}}
            {{timeLive}}
          {{~else~}}
            {{t 'general.Twitch.offline'}}
          {{~/if}}
        </div>
      {{/if}}
    </div>
  </div>
</div>

{{!-- Clips --}}
<div class="flex flex--verticalCenter flex--nowrap dash-widget__item">
  <div class="flex__item flex__item--noGrow mg-r-1" onmouseover={{action 'onHover' 'clips_icon'}}>
    <div class="balloon-wrapper">
      {{svg-icon
        path='svg/icon-clip-sm'
        iconModifier='icon--block'
        class='dash-widget__icon dash-widget__icon--filled dash-widget__icon--size-1'
      }}

      <div class="balloon balloon--tooltip balloon--right">
        {{i18n 'The number of clips that have been created'}}
      </div>
    </div>
  </div>

  <div class="flex__item" {{action 'updateStreamStatsConfig' 'showClips'}} data-test-selector="clip-count" onmouseover={{action 'onHover' 'clips_value'}}>
    <div class="balloon-wrapper">
      {{#if streamStatsConfig.showClips~}}
        {{#if isLive~}}
          <span>{{commatized clips}} {{i18n 'Clips'}}</span>
        {{~else~}}
          <span class="dash-widget-text-light">{{t 'general.Twitch.offline'}}</span>
        {{~/if}}

        <div class="balloon balloon--tooltip balloon--right">{{t 'dashboards.live.streamStats.stat.clickToHide'}}</div>
      {{~else~}}
        <span class="dash-widget-text-light">{{t 'dashboards.live.streamStats.stat.hoverToView'}}</span>

        <div class="balloon balloon--tooltip balloon--right">
          {{#if isLive~}}
            {{commatized clips}} {{i18n 'Clips'}}
          {{else}}
            {{t 'general.Twitch.offline'}}
          {{/if}}
        </div>
      {{~/if}}
    </div>
  </div>
</div>

{{!-- Views --}}
<div class="flex flex--verticalCenter flex--nowrap dash-widget__item">
  <div class="flex__item flex__item--noGrow mg-r-1" onmouseover={{action 'onHover' 'views_icon'}}>
    <div class="balloon-wrapper">
      {{svg-icon
        path='svg/glyph-views'
        iconModifier='icon--block'
        class='dash-widget__icon dash-widget__icon--filled dash-widget__icon--size-1'
      }}

      <div class="balloon balloon--tooltip balloon--right">
        {{i18n 'The number of people who have viewed the channel'}}
      </div>
    </div>
  </div>

  <div class="flex__item" {{action 'updateStreamStatsConfig' 'showViews'}} data-test-selector="view-count" onmouseover={{action 'onHover' 'views_value'}}>
    <div class="balloon-wrapper">
      {{#if streamStatsConfig.showViews~}}
        <span>{{commatized channel.views}} {{i18n "Views"}}</span>

        <div class="balloon balloon--tooltip balloon--right">{{t 'dashboards.live.streamStats.stat.clickToHide'}}</div>
      {{~else~}}
        <span class="dash-widget-text-light">{{t 'dashboards.live.streamStats.stat.hoverToView'}}</span>

        <div class="balloon balloon--tooltip balloon--right">
          {{commatized channel.views}} {{i18n 'Views'}}
        </div>
      {{~/if}}
    </div>
  </div>
</div>

{{!-- Followers --}}
<div class="flex flex--verticalCenter flex--nowrap dash-widget__item">
  <div class="flex__item flex__item--noGrow mg-r-1" onmouseover={{action 'onHover' 'followers_icon'}}>
    <div class="balloon-wrapper">
      {{svg-icon
        path='svg/glyph-followers'
        iconModifier='icon--block'
        class='dash-widget__icon dash-widget__icon--filled dash-widget__icon--size-1'
       }}

      <div class="balloon balloon--tooltip balloon--right">
        {{i18n 'The number of people currently following your channel'}}
      </div>
    </div>
  </div>

  <div class="flex__item" {{action 'updateStreamStatsConfig' 'showFollowers'}} data-test-selector="follower-count" onmouseover={{action 'onHover' 'followers_value'}}>
    <div class="balloon-wrapper">
      {{#if streamStatsConfig.showFollowers~}}
        <span>{{commatized channel.followersTotal}} {{i18n 'Followers'}}</span>

        <div class="balloon balloon--tooltip balloon--right">{{t 'dashboards.live.streamStats.stat.clickToHide'}}</div>
      {{~else~}}
        <span class="dash-widget-text-light">{{t 'dashboards.live.streamStats.stat.hoverToView'}}</span>

        <div class="balloon balloon--tooltip balloon--right">
          {{commatized channel.followersTotal}} {{i18n 'Followers'}}
        </div>
      {{/if}}
    </div>
  </div>
</div>

{{!-- Subs --}}
{{#if channel.partner}}
  <div class="flex flex--verticalCenter flex--nowrap dash-widget__item">
    <div class="flex__item flex__item--noGrow mg-r-1" onmouseover={{action 'onHover' 'subscribers_icon'}}>
      <div class="balloon-wrapper">
        {{svg-icon
          path='svg/star'
          iconModifier='icon--block'
          class='dash-widget__icon dash-widget__icon--filled dash-widget__icon--size-1'}}

        <div class="balloon balloon--tooltip balloon--right">
          {{i18n 'The number of people currently subscribed to your channel'}}
        </div>
      </div>
    </div>

    <div class="flex__item" {{action 'updateStreamStatsConfig' 'showSubs'}} data-test-selector="subscriber-count" onmouseover={{action 'onHover' 'subscribers_value'}}>
      <div class="balloon-wrapper">
        {{#if streamStatsConfig.showSubs~}}
          <span>{{commatized subscribers}} {{i18n 'Subscribers'}}</span>

          <div class="balloon balloon--tooltip balloon--right">
            {{t 'dashboards.live.streamStats.stat.clickToHide'}}
          </div>
        {{~else~}}
          <span class="dash-widget-text-light">{{t 'dashboards.live.streamStats.stat.hoverToView'}}</span>

          <div class="balloon balloon--tooltip balloon--right">
            {{commatized subscribers}} {{i18n 'Subscribers'}}
          </div>
        {{~/if}}
      </div>
    </div>
  </div>
{{/if}}
