%li.card{ ":class" => '{ "user-can-drag": !disabled && issue.id, "is-disabled": disabled || !issue.id, "is-active": issueDetailVisible }',
  ":index" => "index",
  ":data-issue-id" => "issue.id",
  "@mousedown" => "mouseDown",
  "@mousemove" => "mouseMove",
  "@mouseup" => "showIssue($event)" }
  %h4.card-title
    = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
    %a{ ":href" => 'issueLinkBase + "/" + issue.id',
      ":title" => "issue.title" }
      {{ issue.title }}
  .card-footer
    %span.card-number{ "v-if" => "issue.id" }
      = precede '#' do
        {{ issue.id }}
    %a.has-tooltip{ ":href" => "\"#{root_path}\" + issue.assignee.username",
      ":title" => '"Assigned to " + issue.assignee.name',
      "v-if" => "issue.assignee",
      data: { container: 'body' } }
      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20, alt: "Avatar" }
    %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
      type: "button",
      "v-if" => "(!list.label || label.id !== list.label.id)",
      "@click" => "filterByLabel(label, $event)",
      ":style" => "{ backgroundColor: label.color, color: label.textColor }",
      ":title" => "label.description",
      data: { container: 'body' } }
      {{ label.title }}