{{#if isLoading}}
  <div class="flex__item flex__item--grow mg-t-2 mg-b-2 align-center">
    <div class="flex flex--verticalCenter flex--fullHeight flex--horizontalCenter">
      <div class="flex__item loading-spinner"></div>
    </div>
  </div>
{{else}}
  <div class="flex__item flex__item--grow mg-l-1 pos-relative">
    <h5 class="sub-text">
      {{i18n 'Total Revenue'}} *
    </h5>

    <h1>
      <span class="revHeader__unit">{{i18n "$"}}</span>
      <span class="revHeader__dollars">{{float-to-dollars rangeTotalRevenue}}</span>
      <span class="revHeader__cents">.{{float-to-cents rangeTotalRevenue}}</span>
      <span class="revArrow revArrow--total {{if totalRevArrowUp 'revArrow--up' 'revArrow--down'}} balloon-wrapper">
        <div class="balloon balloon--sm balloon--up balloon--center balloon--fancy balloon--purple">
          {{totalRevTooltip}}
        </div>
      </span>
    </h1>
  </div>

  <div class="flex__item flex__item--grow mg-l-1 pos-relative">
    <h5 class="sub-text mg-b-0 mg-t-1">
      {{i18n 'Ad Revenue'}} *
    </h5>

    <h2 class="mg-b-0">
      <span class="revHeader__unit revHeader__unit--small">{{i18n "$"}}</span>
      <span class="revHeader__dollars">{{float-to-dollars rangeAdRevenue}}</span>
      <span class="revHeader__cents revHeader__cents--small">.{{float-to-cents rangeAdRevenue}}</span>
      <span class="revArrow {{if adRevArrowUp 'revArrow--up' 'revArrow--down'}} balloon-wrapper">
        <div class="balloon balloon--sm balloon--up balloon--center balloon--fancy balloon--purple">
          {{adRevTooltip}}
        </div>
      </span>
    </h2>
  </div>

  <div class="flex__item flex__item--grow mg-l-1 pos-relative">
    <h5 class="sub-text mg-b-0 mg-t-1">
      {{i18n 'Sub Revenue'}} *
    </h5>

    <h2 class="mg-b-0">
      <span class="revHeader__unit revHeader__unit--small">{{i18n "$"}}</span>
      <span class="revHeader__dollars">{{float-to-dollars rangeSubRevenue}}</span>
      <span class="revHeader__cents revHeader__cents--small">.{{float-to-cents rangeSubRevenue}}</span>
      <span class="revArrow {{if subRevArrowUp 'revArrow--up' 'revArrow--down'}} balloon-wrapper">
        <div class="balloon balloon--sm balloon--up balloon--center balloon--fancy balloon--purple">
          {{subRevTooltip}}
        </div>
      </span>
    </h2>
  </div>

  <div class="flex__item flex__item--grow mg-l-1 pos-relative">
    <h5 class="sub-text mg-b-0 mg-t-1">
      {{i18n 'Twitch Prime Revenue'}} *
    </h5>

    <h2 class="mg-b-0">
      <span class="revHeader__unit revHeader__unit--small">{{i18n "$"}}</span>
      <span class="revHeader__dollars">{{float-to-dollars rangeTPrimeRevenue}}</span>
      <span class="revHeader__cents revHeader__cents--small">.{{float-to-cents rangeTPrimeRevenue}}</span>
      <span class="revArrow {{if tPrimeRevArrowUp 'revArrow--up' 'revArrow--down'}} balloon-wrapper">
        <div class="balloon balloon--sm balloon--up balloon--center balloon--fancy balloon--purple">
          {{tPrimeRevTooltip}}
        </div>
      </span>
    </h2>
  </div>

  {{#if isBitsOnboarded}}
    <div class="flex__item flex__item--grow mg-l-1 pos-relative">
      <h5 class="sub-text mg-b-0 mg-t-1">
        {{i18n 'Bits Revenue'}} *
      </h5>

      <h2 class="mg-b-0">
        <span class="revHeader__unit revHeader__unit--small">{{i18n "$"}}</span>
        <span class="revHeader__dollars">{{float-to-dollars rangeBitsRevenue}}</span>
        <span class="revHeader__cents revHeader__cents--small">.{{float-to-cents rangeBitsRevenue}}</span>
        <span class="revArrow {{if bitsRevArrowUp 'revArrow--up' 'revArrow--down'}} balloon-wrapper">
          <div class="balloon balloon--sm balloon--up balloon--center balloon--fancy balloon--purple">
            {{bitsRevTooltip}}
          </div>
        </span>
      </h2>
    </div>
  {{/if}}
{{/if}}
