{{#common/modal-dialog onClose=onDismiss showModal=isDeletingCollection}}
  <div class='card'>
    <div class='text-content'>
      <div class='content-header'>
        <h4>{{i18n 'Delete Collection'}}</h4>
        <div class='sub-text'>
          <p>{{i18n 'Are you sure you want to delete this collection?'}}</p>
          <p>{{i18n 'This action cannot be undone.'}}</p>
        </div>
      </div>
      <div class='item'>
        <div class='video-preview'>
          <div class='video-preview-img'>
            <img src={{collection.playlistCardImage}}>
          </div>
          <div class='video-preview-desc'>
            <div class='title'>
              {{collection.title}}
            </div>
            <div class='date-time'>
              {{#if collection.updatedAt}}
                {{format-date collection.updatedAt 'MMM D, YYYY'}} &middot;
                {{length-as-clock collection.totalDuration}}
              {{/if}}
            </div>
            <div class='views'>
              {{commatized collection.views}} {{i18n 'Views'}}
            </div>
          </div>
        </div>
      </div>
      <div class='buttons'>
        <button onclick={{onDismiss}} class='button button--text'>
          {{i18n 'Cancel'}}
        </button>
        <button
          onclick={{action 'confirm' collection}}
          disabled={{collection.isSaving}}
          class='button button--alert'
          type='button'
          data-test-confirm>
          {{i18n 'Delete'}}
        </button>
      </div>
    </div>
  </div>
{{/common/modal-dialog}}
