<div class="{{if layout.isRightColumnClosed "closed" "open"}} column fixed" id="right_col">
  <div class="ember-chat playlist-container {{if playlistChannel.enabled "playlist-enabled"}}">
    {{#if isLoadingPlaylist}}
      {{loading-more-spinner}}
    {{else}}
      {{#playlist-draggable-dropzone dropped="addVideo" initEnabled="initEnabled" updateSortOrder="updateSortOrder"}}
        <div class="stretch scroll zone-container">
          <div class='tse-scroll-content'>
            <div class="tse-content playlist-content">
              <div class="sticky-message">
                <div class="header">{{i18n "Broadcasting Playlist..."}}</div>
                <div class="message-content">{{i18n "It may take a few moments for the playlist to show up on your channel so please be patient."}}</div>
                {{#link-to "user" managerController.model.id classNames="button mg-t-1"}}
                  {{i18n "Go to Channel"}}
                {{/link-to}}
                <div {{action 'close'}} class="close-button">
                  {{partial 'svg/close'}}
                </div>
              </div>
              {{#unless sortedVideos.length}}
                <div class="playlist-intro">
                  <div class="drag-visual-container">
                    <div class="drag-visual"></div>
                    <div class="plus">+</div>
                  </div>
                  <p><span>{{i18n "Drag & Drop"}}</span></p>
                  <p>{{i18n "Add videos to create your playlist"}}</p>
                </div>
              {{/unless}}
              {{#each sortedVideos as |video|}}
                {{offline-playlist-video class="video playlist-item editable" video=video removeVideo="removeVideo"}}
              {{/each}}
              <div class="playlist-drag-guide js-playlist-drag-guide"></div>
            </div>
          </div>
        </div>
      {{/playlist-draggable-dropzone}}
    {{/if}}
    <div class="chat-header">
      <div class="p room-title">
        {{#if sortedVideos.length}}
          {{#if playlistDuration}}
            {{length-as-clock playlistDuration}}
          {{/if}}
        {{/if}}
        {{#unless sortedVideos.length}}
          {{i18n "Playlist"}}
        {{/unless}}
      </div>
      <a {{action "clearPlaylist"}} class="button button--icon-only chat-header__button chat-header__button--right {{unless sortedVideos.length "disabled"}} {{if playlistChannel.enabled "disabled"}}">
        {{svg-icon path='svg/trash'}}
      </a>
    </div>
    <div class="playlist-controller">
      <div class="playlist-toggle">
        <div class="whatisthis anchor-bottom hidden js-what-tooltip">
          <div class="text">
            <p>{{i18n "Add videos to your playlist to automatically broadcast while you're offline."}}</p>
            <div class="actions">
              <a href={{playlistMoreInfo}}>{{i18n "More Info"}}</a>
              <div class="divider"></div>
              <a class="js-dismiss">{{t 'general.forms.dismiss'}}</a>
            </div>
          </div>
        </div>
        <p class="clearfix">
          <a {{action "toggleEnabled"}} class="switch {{if playlistChannel.enabled "active"}}"><span></span></a>
          <span class="switch-label">
            {{i18n "Playlist"}}
            <sub class="sup alert">BETA</sub>
          </span>
        </p>

        <p class="video-quantity sub-text">
          {{sortedVideos.length}} {{t 'general.Twitch.videos'}}
        </p>
      </div>
    </div>
  </div>
</div>

{{#if isShowingStopModal}}
  {{offline-playlist-stop playlistChannel=playlistChannel
                          closeModal=(action 'toggleStopModal')}}
{{else if isShowingClearModal}}
  {{offline-playlist-clear playlist=playlist
                           closeModal=(action 'toggleClearModal')
                           didClear=(action 'onClearPlaylist')}}
{{/if}}
