{{#if isLoading}}
  <div class="align-center">
    <div class="loading-spinner" style="margin: 1.6rem 0;vertical-align: middle;"></div>
  </div>
{{else if adPlaying}}
  <div class="dash-ad-playing pd-b-1">
    <div class="brick brick--theme-grey">
      <div class="dash-widget__item"><span class="strong">{{i18n "Ad Playing"}} - {{secondsRemainingMessage}}</span></div>
      <div class="dash-widget-text-sm dash-widget__item">{{i18n "Remember - You are still live! Some people may not get an ad"}}</div>
    </div>
    <div class="progress-bar progress-bar--sm">
      <div class="progress-bar__fill" style={{percentRemaining}}></div>
    </div>
  </div>
{{else}}
  <div class="form">
    <div class="form__group">
      <div class="form__input-group">
        {{#if lastAdPlayed}}
          <label class="form__label">{{i18n "Run Ad"}} - <span class="form__label--light">{{lastAdPlayedMessage}}</span></label>
        {{else}}
          <label class="form__label">{{i18n "Run Ad"}}</label>
        {{/if}}
        <div class="flex flex--verticalCenter flex--nowrap">
          <div class="flex__item flex__item--grow mg-r-1">
            <input
              class="form__input"
              type="range"
              value={{duration}}
              min=30
              max={{maxBreakLength}}
              step=30
              onchange={{action 'durationChanged' value='target.value'}}
              disabled={{not isLive}}
            >
          </div>
          <div class="flex__item flex__item--noGrow balloon-wrapper">
            <button class="button {{if (not isLive) 'button--disabled'}}" disabled={{not isLive}} {{action 'runCommercial'}}>
              <span>{{runCommercialButtonLabel}}</span>
            </button>
            {{#if (not isLive)}}
              <div class="balloon balloon--purple balloon--right balloon--up">
                {{i18n 'Commercials can only be run when channel is live'}}
              </div>
            {{/if}}
            <div class="balloon balloon--md balloon--right balloon--up balloon--fancy balloon--alert {{if adError 'show' 'hide'}}" {{action "removeError"}}>
              {{i18n 'Commercial break failed. Commercial breaks are only allowed once every 8 minutes.'}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="brick brick--theme-grey mg-t-1 {{unless totalAdsPlayed 'hide'}}">
    {{i18n "Ads played this broadcast"}}: <span class="strong">{{minutesPlayed}}</span>
  </div>
{{/if}}
