{{#link-to 'manager.collections' classNames='js-test-all-playlists playlist-back'}}
  <span class="playlist-back__arrow inline-block"></span>
  <span>{{i18n 'All collections'}}</span>
{{/link-to}}

<div class="flex mg-t-1 mg-b-2">
  <div class="playlist-editor__img flex__item">
    <img src={{playlist.editorCardUrl}}>
  </div>

  <div class="playlist-editor__meta flex__item">
    <h3 data-test-selector={{testAttrPlaylistTitle}}>{{playlist.title}}</h3>

    <div class="sub-text">
      {{styled-i18n 'By %{creator}' (hash creator=playlist.owner.displayName)}}
      <span class="middot-divider"></span>
      {{styled-i18n '%{numOfVideos} videos' (hash numOfVideos=playlist.items.length)}}
      <span class="middot-divider"></span>
      {{styled-i18n '%{viewCount} views' (hash viewCount=playlist.views)}}
      <span class="middot-divider"></span>
      {{i18n 'Last updated'}}&nbsp;{{relative-time date=playlist.updatedAt}}
      <span class="middot-divider"></span>
      {{length-as-clock playlist.totalDuration}}
    </div>

    <div class="mg-t-5">
      {{!--<div class="playlist-editor__actions playlist-select form__group">
        <select class="form__input">
          <option>{{t 'general.common.public'}}</option>
          <option>{{t 'general.common.private'}}</option>
        </select>
      </div>--}}

      {{#if playlist.firstVideoId}}
        {{#link-to 'videos' playlist.firstVideoId (query-params collection=playlist.id)}}
          <span class="playlist-editor__actions">
            {{#common/button-element classNames='playlist-editor-play-btn' isHollow=true}}
              {{svg-icon path='svg/play'}}
              {{i18n 'Play all'}}
            {{/common/button-element}}
          </span>
        {{/link-to}}
      {{/if}}

      <span class="playlist-editor__actions">
        {{#common/button-element
          isHollow=true
          onClick=(action 'openItemsModal')
          testSelector='add-videos-btn'
        }}
          {{i18n 'Add videos'}}
        {{/common/button-element}}
      </span>

      <span class="playlist-editor__actions">
        {{#common/button-element isHollow=true}}
          {{t 'general.forms.share'}}
        {{/common/button-element}}
      </span>

      {{!-- TODO: Componentize --}}
      {{#common/button-element isHollow=true isBalloonWrapper=true classNames='button--more' onClick=(action 'toggleShowMore')}}
        {{svg-icon path='svg/more'}}
        <div class="balloon balloon--down balloon--right balloon--dropmenu balloon--no-tail {{if isShowingMore 'show' 'hide'}}">
          <a class="balloon__link balloon__link--alert" href="#" {{action 'stageCollectionForDeletion' playlist}}>{{t 'general.forms.delete'}}</a>
        </div>
      {{/common/button-element}}
    </div>
  </div>
</div>

{{#if isItemsLoaded}}
  {{manager/collections/item-list
    openItemsModal=(action 'openItemsModal')
    removeItemFromPlaylist=(action 'removeItemFromPlaylist')
    items=playlistItems
  }}
{{else}}
  {{i18n 'Loading Collection Items'}}
  {{common/loading-spinner}}
{{/if}}

{{#common/modal-dialog
  showModal=isAddingItems
  onClose=(action 'closeItemsModal')
  size='medium' as |dialog|
}}
  {{manager/collections/video-selector
    addItemToPlaylist=(action 'addItemToPlaylist')
    creatorId=playlist.owner._id
    doneHandler=dialog.close
    playlistItemIds=playlistItemIds
    removeItemFromPlaylist=(action 'removeItemFromPlaylist')
  }}
{{/common/modal-dialog}}

{{manager/collections/confirm-delete-collection
    collection=collectionStagedForDeletion
    onConfirm=(action 'deleteCollection')
    onDismiss=(action 'clearCollectionStagedForDeletion')}}
