<div class={{this.classes}} ...attributes>
  {{#if @document.marks}}
    <div
      class="marks uk-flex uk-position-top-left uk-position-small uk-border-rounded uk-background-muted"
    >
      {{#each @document.marks as |mark|}}
        <div uk-tooltip={{mark.name}}>
          <FaIcon @icon={{mark.icon}} />
        </div>
      {{/each}}
    </div>
  {{/if}}
  <div class="uk-card-media-top uk-text-center uk-border-bottom">
    {{#if this.documents.download.isRunning}}
      <div class="uk-padding" data-test-loading>
        <span uk-spinner="ratio: 4.5" class="uk-position-relative"></span>
        <FaIcon
          @icon="file-download"
          @prefix="far"
          @size="7x"
          {{set-style color=@document.category.color}}
        />
      </div>
    {{else}}
      {{#if @document.thumbnail.value}}
        <img
          data-src={{@document.thumbnail.value}}
          width="200"
          height="170"
          uk-img
          data-test-thumbnail
          alt={{@document.title}}
        />
      {{else}}
        <div class="uk-padding">
          <FaIcon
            @icon="file-alt"
            @prefix="far"
            @size="7x"
            data-test-file-icon
            {{set-style color=@document.category.color}}
          />
        </div>
      {{/if}}
    {{/if}}
  </div>
  <div
    class="uk-card-body uk-padding-small uk-flex uk-flex-between document-name"
  >
    <span
      class="uk-text-truncate no-select"
      uk-tooltip="title: {{@document.title}}; pos: bottom; delay: 300;"
      data-test-title
    >
      {{@document.title}}
    </span>
    <span data-test-context-menu-trigger>
      <FaIcon @icon="ellipsis-v" />
    </span>
    <Drop
      @width="uk-width-small"
      @position="left-center"
      data-test-context-menu
      as |Item|
    >
      <Item
        data-test-download
        {{on "click" (fn this.documents.download.perform (array @document))}}
      >
        <FaIcon @icon="file-download" />
        {{t "alexandria.download"}}
      </Item>
      <DocumentDeleteButton @docsToDelete={{@document}} as |showDialog|>
        <Item data-test-delete {{on "click" showDialog}}>
          <FaIcon @icon="trash-alt" @prefix="far" />
          {{t "alexandria.delete"}}
        </Item>
      </DocumentDeleteButton>
      {{#if @displayLink}}
        <Item>
          {{#let (this.config.documentListLinkTo @document) as |linkConfig|}}
            <LinkTo
              @route={{linkConfig.route}}
              @query={{hash document=@document.id}}
              class="uk-flex uk-flex-middle"
            >
              <FaIcon @icon="link" />
              {{linkConfig.label}}
            </LinkTo>
          {{/let}}
        </Item>
      {{/if}}
    </Drop>
  </div>
</div>