<div class="card" data-test-selector="clips-modal-remove">
  <div class="text-content">
    <div class="content-header">
      <h4>{{i18n 'Delete Clip'}}</h4>
      <div class="sub-text">
        <p>{{i18n 'Are you sure you want to delete this clip?'}}</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={{clip.thumbnail.medium}}>
        </div>
        <div class="video-preview-desc">
          <div class="title">
            {{clip.title}}
          </div>
          <div class="date-time">
            {{relative-time clip.createdAt}}
            &middot;
            {{#with (i18n-split-string 'Clipped by |curator|') as |translation|}}
              {{at-index translation 0}}
              {{#link-to 'channel' clip.curatorLogin}}
                {{clip.curatorDisplayName}}
              {{/link-to}}
              {{at-index translation 2}}
            {{/with}}
          </div>
          <div class="views">
            {{#with (i18n-split-string '|views| plays') as |translation|}}
              {{at-index translation 0}}
              {{commatized clip.views}}
              {{at-index translation 2}}
            {{/with}}
          </div>
        </div>
      </div>
    </div>
    <div class="buttons">
      <button class="button button--text" data-test-selector="closeRemoveModal" {{action 'closeRemoveModal'}}>{{t 'general.forms.cancel'}}</button>
      <button class="button button--alert" data-test-selector="onRemoveClip" {{action 'onRemoveClip'}}>{{t 'general.forms.delete'}}</button>
    </div>
  </div>
</div>
