{{#unless isCollapsed}}
  {{#if isChannelOwner}}
    <div class="mg-b-2" data-test-selector="bitrate">
      {{#if isShowingGraph}}
        <div class="dash-widget__item mg-b-2">
          <div class="flex">
            <div class="flex__item flex__item--grow">
              {{i18n 'Bitrate'}}
            </div>

            <div class="flex__item">
              <span class="strong" data-test-selector="latest-bitrate">{{bitrate}}</span>

              <figure class="dash-widget__qblock inline-block balloon-wrapper">
                <div class="balloon balloon--purple balloon--md balloon--right balloon--up">
                  {{i18n 'Your current bitrate. Small changes in bitrate are normal. Large changes in bitrate can indicate a connection issue.'}}
                </div>
              </figure>
            </div>
          </div>
        </div>

        {{ember-chart
          type='line'
          data=bitrateData
          options=bitrateChartOptions
          height=100
        }}
      {{else}}
        <div class="mg-b-1">
          {{i18n 'You are currently not online. Start streaming live or run a stream test to see live data.'}}
        </div>

        <div class="flex flex__item">
          {{#common/button-element isHollow=true testSelector='stream-test-button' onClick=(action 'openModal')}}
            {{i18n 'Learn how to run a stream test'}}
          {{/common/button-element}}
        </div>
      {{/if}}
    </div>

    {{#if isShowingStreamTest}}
      {{#ember-wormhole to='wormhole-overlays'}}
        {{!-- ember-wormhole@0.5.0 must have a stable root element in 2.10.0-beta's --}}
        <div>
          {{#modal-dialog action=(action 'closeModal')}}
            <div class="card" data-test-selector="stream-test-modal">
              <div class="text-content">
                <div class="content-header">
                  <h4>{{i18n 'Run a Stream Test'}}</h4>
                </div>

                <div class="item">
                  <h5>{{i18n 'Step 1'}}</h5>
                  <div class="typeset">
                    {{#with (i18n-split-string 'Get your stream key from the |Twitch Dashboard|.') as |translation|}}
                      {{at-index translation 0~}}

                      {{#link-to 'dashboards.stream-key' target='_blank' rel='noopener noreferrer'}}
                        {{~at-index translation 1~}}
                      {{/link-to}}

                      {{~at-index translation 2}}
                    {{/with}}
                  </div>
                </div>

                <div class="item">
                  <h5>{{i18n 'Step 2'}}</h5>
                  <div class="typeset">
                    {{i18n 'In the encoder (like OBS), in the text area where the streamkey goes, type "?bandwidthtest=true" after the stream key.'}}
                  </div>
                  <br>
                  <div class="brick">
                    {{! template-lint-disable bare-strings }}
                    <span class="dash-widget-text-sm dash-widget-text-light">live_0000000_xxxxxxxxxxxx</span><span class="dash-widget-text-sm">?bandwidthtest=true</span>
                    {{! template-lint-enable bare-strings }}
                  </div>
                </div>

                <div class="item">
                  <h5>{{i18n 'Step 3'}}</h5>
                  <div class="typeset">
                    {{i18n 'Start Broadcasting. Using the "bandwidthtest" flag allows you to broadcast without appearing online to viewers or sending notifications. This helps to test new settings or stability before a broadcast.'}}
                  </div>
                </div>

                <div class="buttons">
                  {{#common/button-element onClick=(action 'closeModal')}}
                    {{t 'general.forms.close'}}
                  {{/common/button-element}}
                </div>
              </div>
            </div>
          {{/modal-dialog}}
        </div>
      {{/ember-wormhole}}
    {{/if}}
  {{else}}
    <div class="mg-b-2" data-test-selector="bitrate-unavailable">
      <div class="mg-b-1">
        {{i18n 'Stream bitrates are currently not available for you to view on this channel.'}}
      </div>

      <div class="mg-b-1">
        {{i18n 'Currently, you can only view bitrates for your own dashboard.'}}
      </div>
    </div>
  {{/if}}

  <div class="flex dash-widget__item" data-test-selector="health-label">
    <div class="flex__item flex__item--grow">
      {{#if (and isLive qualityCode)}}
        <div class="balloon-wrapper inline-block">
          <h4 class="mg-0 pd-0">
            <span class="pill {{pillClass}}">{{qualityLabel}}</span>
          </h4>

          {{#if reasons.length}}
            <div class="balloon balloon--up balloon--purple balloon--md">
              <ul>
                {{#each reasons as |reason|}}
                  <li class="dash-widget__item" data-test-selector="health-reason">{{reason}}</li>
                {{/each}}
              </ul>
            </div>
          {{/if}}
        </div>
      {{else}}
        <h4 class="mg-0 pd-0">
          <span class="pill">{{t 'general.Twitch.offline'}}</span>
        </h4>
      {{/if}}
    </div>

    {{#if isChannelOwner}}
      <div class="flex__item">
        <a class="dash-widget-text-sm" {{action 'onInspectorLinkClick'}} href="https://inspector.twitch.tv" target="_blank" rel="noopener noreferrer">
          {{~i18n 'View Details in Twitch Inspector'~}}
        </a>
      </div>
    {{/if}}
  </div>
{{/unless}}
