wekan/client/components/cards/minicard.jade

template(name="minicard")
  .minicard.nodragscroll(
    class="{{#if isLinkedCard}}linked-card{{/if}}"
    class="{{#if isLinkedBoard}}linked-board{{/if}}"
    class="{{#if colorClass}}minicard-{{colorClass}}{{/if}}")
    if canModifyCard
      a.minicard-details-menu-with-handle.js-open-minicard-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}") ☰
      .handle
        | ↕️
    .dates
      if getReceived
        .date
          +minicardReceivedDate
      if getStart
        .date
          +minicardStartDate
      if getDue
        .date
          +minicardDueDate
      if getEnd
         +minicardEndDate
      if getSpentTime
        .date
          +cardSpentTime
    if cover
      if currentBoard.allowsCoverAttachmentOnMinicard
        .minicard-cover(style="background-image: url('{{cover.link 'original'}}?dummyReloadAfterSessionEstablished={{sess}}');")

    // Upload progress indicator for drag-and-drop uploads
    if hasActiveUploads
      .minicard-upload-progress
        .upload-progress-header
          | 📤
          span {{_ 'uploading-files'}} ({{uploadCount}})
        each uploads
          .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
            .upload-progress-filename {{file.name}}
            .upload-progress-bar
              .upload-progress-fill(style="width: {{progress}}%")
            if $eq status 'error'
              .upload-progress-error
                | ⚠️
                span {{_ 'upload-failed'}}
            else if $eq status 'completed'
              .upload-progress-success
                | ✅
                span {{_ 'upload-completed'}}

    .minicard-title
      if $eq 'prefix-with-full-path' currentBoard.presentParentTask
        .parent-prefix
          | {{ parentString ' > ' }}
      if $eq 'prefix-with-parent' currentBoard.presentParentTask
        .parent-prefix
          | {{ parentCardName }}
      if isLinkedBoard
        a.js-linked-link
          span.linked-icon | 📁
      else if isLinkedCard
        a.js-linked-link
          span.linked-icon | 🃏
      if getArchived
        span.linked-icon.linked-archived | 📦
      +viewer
        if currentBoard.allowsCardNumber
          span.card-number
            | ##{getCardNumber}
        = getTitle
    if labels
      .minicard-labels(class="{{#if hiddenMinicardLabelText}}minicard-labels-no-text{{/if}}")
        each labels
          unless hiddenMinicardLabelText
            span.js-card-label.card-label(class="card-label-{{color}}" title=name)
              +viewer
                = name
          if hiddenMinicardLabelText
            .minicard-label(class="card-label-{{color}}" title="{{name}}")

    .minicard-custom-fields
      each customFieldsWD
        if definition.showOnCard
          if trueValue
            .minicard-custom-field
              // If there is custom field label, show label at left,
              // and value at right
              if definition.showLabelOnMiniCard
                .minicard-custom-field-item
                  +viewer
                    = definition.name
                .minicard-custom-field-item
                  if $eq definition.type "currency"
                    +viewer
                      = formattedCurrencyCustomFieldValue(definition)
                  else if $eq definition.type "date"
                    .date
                      +minicardCustomFieldDate
                  else if $eq definition.type "checkbox"
                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
                  else if $eq definition.type "stringtemplate"
                    +viewer
                      = formattedStringtemplateCustomFieldValue(definition)
                  else
                    +viewer
                      = trueValue
              else
                // If there is no custom field label,
                // show value full width
                .minicard-custom-field-item-fullwidth
                  if $eq definition.type "currency"
                    +viewer
                      = formattedCurrencyCustomFieldValue(definition)
                  else if $eq definition.type "date"
                    .date
                      +minicardCustomFieldDate
                  else if $eq definition.type "checkbox"
                    .materialCheckBox(class="{{#if value }}is-checked{{/if}}")
                  else if $eq definition.type "stringtemplate"
                    +viewer
                      = formattedStringtemplateCustomFieldValue(definition)
                  else
                    +viewer
                      = trueValue

    if showAssignee
      if getAssignees
        .minicard-assignees.js-minicard-assignees
          each getAssignees
            +userAvatar(userId=this)

    if showMembers
      if getMembers
        .minicard-members.js-minicard-members
          each getMembers
            +userAvatar(userId=this)

    if showCreatorOnMinicard
      .minicard-creator
        +userAvatar(userId=this.userId noRemove=true)

    .badges
      if canModifyCard
        if comments.length
          .badge(title="{{_ 'card-comments-title' comments.length }}")
            span.badge-icon.badge-comment.badge-text | 💬
              = ' '
              = comments.length
            //span.badge-comment.badge-text
            //|  {{_ 'comment'}}
      if getDescription
        unless currentBoard.allowsDescriptionTextOnMinicard
          .badge.badge-state-image-only(title=getDescription)
            span.badge-icon | 📝
      if getVoteQuestion
        .badge.badge-state-image-only(title=getVoteQuestion)
          span.badge-icon(class="{{#if voteState}}text-green{{/if}}") | 👍
          span.badge-text {{ voteCountPositive }}
          span.badge-icon(class="{{#if $eq voteState false}}text-red{{/if}}") | 👎
          span.badge-text {{ voteCountNegative }}
      if getPokerQuestion
        .badge.badge-state-image-only(title=getPokerQuestion)
          span.badge-icon(class="{{#if pokerState}}text-green{{/if}}") | ✅
          if expiredPoker
            span.badge-text {{ getPokerEstimation }}
      if attachments.length
        if currentBoard.allowsBadgeAttachmentOnMinicard
          .badge
            span.badge-icon | 📎
            span.badge-text= attachments.length
      if checklists.length
        .badge(class="{{#if checklistFinished}}is-finished{{/if}}")
          span.badge-icon | ☑️
          span.badge-text.check-list-text {{checklistFinishedCount}}/{{checklistItemCount}}
      if allSubtasks.count
        .badge
          span.badge-icon | 🌐
          span.badge-text.check-list-text {{subtasksFinishedCount}}/{{allSubtasksCount}}
          //{{subtasksFinishedCount}}/{{subtasksCount}} does not work because when a subtaks is archived, the count goes down
      if currentBoard.allowsCardSortingByNumber
        if currentBoard.allowsCardSortingByNumberOnMinicard
          .badge
            span.badge-icon | 🔢
            span.badge-text.check-list-sort {{ sort }}
    if currentBoard.allowsDescriptionTextOnMinicard
      if getDescription
        .minicard-description
          +viewer
            | {{ getDescription }}
    if shouldShowListOnMinicard
      .minicard-list-name
        | 📋
        | {{ listName }}
    if $eq 'subtext-with-full-path' currentBoard.presentParentTask
      .parent-subtext
        | {{ parentString ' > ' }}
    if $eq 'subtext-with-parent' currentBoard.presentParentTask
      .parent-subtext
        | {{ parentCardName }}

template(name="editCardSortOrderPopup")
  input.js-edit-card-sort-popup(type='text' autofocus value=sort dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-sort-popup(type="submit") {{_ 'save'}}

template(name="minicardDetailsActionsPopup")
  ul.pop-over-list
    if canModifyCard
      li
        a.js-move-card
          | ➡️
          | {{_ 'moveCardPopup-title'}}
      li
        a.js-copy-card
          | 📋
          | {{_ 'copyCardPopup-title'}}
      hr
      li
        a.js-archive
          | ➡️
          | 📦
          | {{_ 'archive-card'}}
      hr
      li
        a.js-move-card-to-top
          | ⬆️
          | {{_ 'moveCardToTop-title'}}
      li
        a.js-move-card-to-bottom
          | ⬇️
          | {{_ 'moveCardToBottom-title'}}
      hr
      li
        a.js-add-labels
          | 🏷️
          | {{_ 'card-edit-labels'}}
      li
        a.js-due-date
          | 📥
          | {{_ 'editCardDueDatePopup-title'}}
      li
        a.js-set-card-color
          | 🎨
          | {{_ 'setCardColorPopup-title'}}
      li
        a.js-link
          | 🔗
          | {{_ 'link-card'}}
      li
      a.js-toggle-watch-card
        if isWatching
          | 👁️
          |  {{_ 'unwatch'}}
        else
          | 👁️-slash
          |  {{_ 'watch'}}