<div class="form">
  <div class="form__group">
    <div class="form__input-group">
      <label class="form__label">{{i18n 'Set stream delay'}}</label>
      <div class="flex flex--verticalCenter flex--nowrap">
        <div class="flex__item flex__item--grow mg-r-1">
          {{#if delayLoading}}
            <div class="flex flex--verticalCenter flex--fullHeight flex--horizontalCenter">
              <div class="flex__item loading-spinner"></div>
            </div>
          {{else}}
            <input
              class="form__input"
              type="range"
              value={{delay}}
              min=0
              max=15
              step=1
              onchange={{action 'delayChanged' value='target.value'}}
              disabled={{isDelayDisabled}}
            >
          {{/if}}
        </div>
        <div class="flex__item flex__item--noGrow balloon-wrapper">
          <button class="button {{if isDelayDisabled 'button--disabled'}}" disabled={{isDelayDisabled}} {{action 'updateDelay'}}>
            <span>{{delayButtonLabel}}</span>
          </button>
          {{#if isLive}}
            <div class="balloon balloon--purple balloon--right balloon--up">
              {{i18n 'Delay can only be changed when offline'}}
            </div>
          {{/if}}
          <div class="balloon balloon--right balloon--up balloon--fancy balloon--alert {{if delayError 'show' 'hide'}}" {{action 'removeError'}}>
            {{i18n 'Error! Could not update stream delay'}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="brick brick--theme-grey mg-t-1">
  <div class="inline">{{delayMessage}}</div>
</div>
