<div data-test-video-card class='video item card'
  data-test-status={{currentStatus}}
  data-content={{video.id}}>
  <div class="content">
    <div data-status={{currentStatus}} class='card__layout aspect'>
      {{component (concat 'manager/video-card-overlays/' currentStatus)
        upload=video.videoUpload
        video=video
        onDelete=(action onDelete video)}}
    </div>

    <div class='card__body card__body--theme-grey card__body--pd-lg'>
      <h3 class='card__title ellipsis' data-test-video-title>
        {{or (committed-attr video 'title') video.title (i18n 'Untitled')}}
      </h3>
      <p class="card__info">
        {{format-date video.recordedDate 'MMM D, YYYY'}}
        {{#if durationString}}
          &middot;
          {{durationString}}
        {{/if}}
      </p>
      <p class="card__info description ellipsis">
        {{or (committed-attr video 'descriptionMarkdown') video.description (i18n 'No description available')}}
      </p>

      {{! When the video card is in the error state we want to remove all of this
          bottom content, but it must take up the same space as every other card so
          that our grid looks uniform. So we use visibility: hidden}}
      <!-- template-lint triple-curlies=false -->
      <div data-test-actions style={{{if (eq currentStatus 'error') 'visibility: hidden'}}}>
        <hr>
        {{#if editAction}}
          {{#common/button-element
            onClick=(action editAction video)
            testSelector='edit-button'
            isHollow=true}}
            {{i18n 'Edit info'}}
          {{/common/button-element}}
        {{/if}}

        {{#if (eq currentStatus 'processed')}}
          <div class="float-right balloon-wrapper" data-test-selector='more-menu'>
            {{#common/balloon-menu as |menu|}}
              {{#menu.button isHollow=true testSelector='more-menu-button'}}
                {{i18n 'More'}}
              {{/menu.button}}

              {{#menu.balloon direction='up,right'}}
                {{#if downloadButton}}
                  {{manager/download-link videoId=(normalize-video-id video.id)}}
                {{/if}}

                {{#if highlightButton}}
                  {{#link-to 'manager.highlighter' (concat 'v' video.id)
                    class="balloon__link"
                    data-test-selector='highlight-button'}}
                    {{i18n 'Highlight'}}
                  {{/link-to}}
                {{/if}}

                {{#link-to 'dashboards.video-stats.video.overview'
                  video.id
                  class="balloon__link"
                  data-test-selector='video-stats-button'}}
                  {{i18n 'Video Stats'}}
                {{/link-to}}

                {{#if moreExport}}
                  <a {{action 'handleExport' video}} href="#" class='balloon__link'
                    data-test-selector='export-button'>
                    {{i18n 'Export'}}
                  </a>
                {{/if}}

                {{#if moreRebroadcast}}
                  <a {{action 'addToRebroadcastList' video}} href="#" class='balloon__link'
                    data-test-selector='rebroadcast-button'>
                    {{i18n 'Rebroadcast'}}
                  </a>
                {{/if}}

                {{#if moreDelete}}
                  <a href="#"
                     class="balloon__link balloon__link--alert"
                     data-test-selector='delete-button'
                     {{action onDelete video}}>
                    {{i18n 'Delete'}}
                  </a>
                {{/if}}

                {{#if canAppeal}}
                  <div {{action showVodAppealsForm video}} data-test-appeal-button>
                    {{video/appeals/appeal-text class='balloon__link' vodId=video.id}}
                  </div>
                {{/if}}
              {{/menu.balloon}}
            {{/common/balloon-menu}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
</div>
