<tr
  class={{this.classes}}
  data-test-document-list-item
  data-test-document-list-item-id={{@document.id}}
  tabindex="0"
  draggable="true"
  {{on "click" (fn (optional @onClickDocument) @document)}}
  {{on "dblclick" (fn (optional @onDoubleClickDocument) @document)}}
  {{on "dragstart" (fn (optional @onDragStart) @document)}}
>
  {{#each-in @columns as |column|}}
    {{#if (eq column "type")}}
      <td class="uk-preserve-width {{concat 'document-list-item-' column}}">
        <FaIcon
          @icon="file-alt"
          @prefix="far"
          @size="1x"
          uk-tooltip={{@document.category.name}}
          data-test-file-icon
          {{set-style color=@document.category.color}}
        />
      </td>
    {{else if (eq column "title")}}
      <td class={{concat "document-list-item-" column}}>
        <span>{{@document.title}}</span>
        <div
          class="document-thumbnail"
          uk-dropdown="pos: right-center; offset: 15; delay-show: 400; delay-hide: 100; container: .alexandria-container;"
          {{on "dragstart" (fn (optional @onDragStart) @document)}}
        >
          <img
            data-src="{{@document.thumbnail.value}}"
            alt="{{@document.title}}"
            uk-img
          />
        </div>
      </td>
    {{else if (eq column "marks")}}
      <td class="list-marks uk-flex {{concat 'document-list-item-' column}}">
        {{#each @document.marks as |mark|}}
          <div uk-tooltip={{mark.name}} data-test-document-mark={{mark.id}}>
            <FaIcon @icon={{mark.icon}} @fixedWidth={{true}} />
          </div>
        {{/each}}
      </td>
    {{else if (eq column "link")}}
      <td class={{concat "document-list-item-" column}}>
        {{#let
          (await (this.config.documentListLinkTo @document))
          as |linkConfig|
        }}
          {{#if linkConfig.url}}
            <a
              href={{linkConfig.url}}
              {{on "click" (fn this.transitionTo linkConfig.url)}}
            >{{linkConfig.label}}</a>
          {{else}}
            <LinkTo
              @route={{linkConfig.route}}
              @query={{hash document=@document.id}}
            >
              {{linkConfig.label}}
            </LinkTo>
          {{/if}}
        {{/let}}
      </td>
    {{else if (eq column "date")}}
      <td class={{concat "document-list-item-" column}}>
        {{format-date
          @document.date
          month="2-digit"
          day="2-digit"
          year="numeric"
        }}
      </td>
    {{else if (eq column "modifiedAt")}}
      <td class="{{concat 'document-list-item-' column}}">
        {{format-date
          @document.latestFile.value.createdAt
          month="2-digit"
          day="2-digit"
          year="numeric"
          hour="2-digit"
          minute="2-digit"
        }}
      </td>
    {{else if (eq column "createdByUser")}}
      <td class="{{concat 'document-list-item-' column}}">
        {{await (resolve-user @document.createdByUser)}}
      </td>
    {{else if (eq column "createdByGroup")}}
      <td class="{{concat 'document-list-item' column}}">
        {{await (resolve-group @document.createdByGroup)}}
      </td>
    {{/if}}
  {{/each-in}}
</tr>