wekan/client/components/cards/cardDetails.jade

template(name="cardDetails")
  section.card-details.js-card-details: .card-details-canvas
    .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
      +inlinedForm(classNames="js-card-details-title")
        +editCardTitleForm
      else
        unless isMiniScreen
          a.fa.fa-times-thin.close-card-details.js-close-card-details
          if currentUser.isBoardMember
            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu
            input.inline-input(type="text" id="cardURL_copy" value="{{ originRelativeUrl }}")
            a.fa.fa-link.card-copy-button.js-copy-link(
              class="fa-link"
              title="{{_ 'copy-card-link-to-clipboard'}}"
            )
        if isMiniScreen
          a.fa.fa-times-thin.close-card-details-mobile-web.js-close-card-details
          if currentUser.isBoardMember
            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu
            a.fa.fa-link.card-copy-mobile-button
        h2.card-details-title.js-card-title(
          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
            +viewer
              = getTitle
            if isWatching
              i.card-details-watch.fa.fa-eye
        .card-details-path
          each parentList
            |   >  
            a.js-parent-card(href=linkForCard) {{title}}
          // else
            {{_ 'top-level-card'}}
        if isLinkedCard
          a.linked-card-location.js-go-to-linked-card
            +viewer
              | {{getBoardTitle}} > {{getTitle}}

    if getArchived
      if isLinkedBoard
        p.warning {{_ 'board-archived'}}
      else
        p.warning {{_ 'card-archived'}}

    .card-details-items
      if currentBoard.allowsLabels
        .card-details-item.card-details-item-labels
          h3.card-details-item-title
            i.fa.fa-tags
            | {{_ 'labels'}}
          a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
            each labels
              span.card-label(class="card-label-{{color}}" title=name)
                +viewer
                  = name
          if canModifyCard
            unless currentUser.isWorker
              a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
                i.fa.fa-plus

      if currentBoard.allowsReceivedDate
        hr
        .card-details-item.card-details-item-received
          h3.card-details-item-title
            i.fa.fa-sign-out
            | {{_ 'card-received'}}
          if getReceived
            +cardReceivedDate
          else
            if canModifyCard
              unless currentUser.isWorker
                a.card-label.add-label.js-received-date
                  i.fa.fa-plus

      if currentBoard.allowsStartDate
        .card-details-item.card-details-item-start
          h3.card-details-item-title
            i.fa.fa-hourglass-start
            | {{_ 'card-start'}}
          if getStart
            +cardStartDate
          else
            if canModifyCard
              unless currentUser.isWorker
                a.card-label.add-label.js-start-date
                  i.fa.fa-plus

      if currentBoard.allowsDueDate
        .card-details-item.card-details-item-due
          h3.card-details-item-title
            i.fa.fa-sign-in
            | {{_ 'card-due'}}
          if getDue
            +cardDueDate
          else
            if canModifyCard
              unless currentUser.isWorker
                a.card-label.add-label.js-due-date
                  i.fa.fa-plus

      if currentBoard.allowsEndDate
        .card-details-item.card-details-item-end
          h3.card-details-item-title
            i.fa.fa-hourglass-end
            | {{_ 'card-end'}}
          if getEnd
            +cardEndDate
          else
            if canModifyCard
              unless currentUser.isWorker
                a.card-label.add-label.js-end-date
                  i.fa.fa-plus

      hr
      if currentBoard.allowsCreator
        .card-details-item.card-details-item-creator
          h3.card-details-item-title
            i.fa.fa-user
            | {{_ 'creator'}}

          +userAvatar(userId=userId noRemove=true)
          | {{! XXX Hack to hide syntaxic coloration /// }}

      //.card-details-items
      if currentBoard.allowsMembers
        .card-details-item.card-details-item-members
          h3.card-details-item-title
            i.fa.fa-users
            | {{_ 'members'}}
          each getMembers
            +userAvatar(userId=this cardId=../_id)
            | {{! XXX Hack to hide syntaxic coloration /// }}
          if canModifyCard
            unless currentUser.isWorker
              a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
                i.fa.fa-plus

      //if assigneeSelected
      if currentBoard.allowsAssignee
        .card-details-item.card-details-item-assignees
          h3.card-details-item-title
            i.fa.fa-user
            | {{_ 'assignee'}}
          each getAssignees
            +userAvatarAssignee(userId=this cardId=../_id)
            | {{! XXX Hack to hide syntaxic coloration /// }}
          if canModifyCard
            a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
              i.fa.fa-plus
          if currentUser.isWorker
            unless assigneeSelected
              a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
                i.fa.fa-plus

      //.card-details-items
      if getSpentTime
        .card-details-item.card-details-item-spent
          if getIsOvertime
            h3.card-details-item-title
              | {{_ 'overtime-hours'}}
          else
            h3.card-details-item-title
              | {{_ 'spent-time-hours'}}
          +cardSpentTime

      //.card-details-items
      if currentBoard.allowsRequestedBy
        .card-details-item.card-details-item-name
          h3.card-details-item-title
            i.fa.fa-shopping-cart
            | {{_ 'requested-by'}}
          if canModifyCard
            unless currentUser.isWorker
              +inlinedForm(classNames="js-card-details-requester")
                +editCardRequesterForm
              else
                a.js-open-inlined-form
                  if getRequestedBy
                    +viewer
                      = getRequestedBy
                  else
                    | {{_ 'add'}}
          else if getRequestedBy
            +viewer
              = getRequestedBy

      if currentBoard.allowsAssignedBy
        .card-details-item.card-details-item-name
          h3.card-details-item-title
            i.fa.fa-user-plus
            | {{_ 'assigned-by'}}
          if canModifyCard
            unless currentUser.isWorker
              +inlinedForm(classNames="js-card-details-assigner")
                +editCardAssignerForm
              else
                a.js-open-inlined-form
                  if getAssignedBy
                    +viewer
                      = getAssignedBy
                  else
                    | {{_ 'add'}}
          else if getRequestedBy
            +viewer
              = getAssignedBy

      //.card-details-items
      if customFieldsWD
        hr
        each customFieldsWD
          .card-details-item.card-details-item-customfield
            h3.card-details-item-title
              i.fa.fa-list-alt
              = definition.name
            +cardCustomField

    if getVoteQuestion
      hr
      .vote-title
        div.flex
          h3
            i.fa.fa-thumbs-up
            | {{_ 'vote-question'}}
          if getVoteEnd
            +voteEndDate
        .vote-result
          if votePublic
            a.card-label.card-label-green.js-show-positive-votes {{ voteCountPositive }}
            a.card-label.card-label-red.js-show-negative-votes {{ voteCountNegative }}
          else
            .card-label.card-label-green {{ voteCountPositive }}
            .card-label.card-label-red {{ voteCountNegative }}
          unless ($and currentBoard.isPublic voteAllowNonBoardMembers )
            .card-label.card-label-gray  {{ voteCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
      +viewer
        = getVoteQuestion
      if showVotingButtons
        button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
          if voteState
            i.fa.fa-thumbs-up
          | {{_ 'vote-for-it'}}
        button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
          if $eq voteState false
            i.fa.fa-thumbs-down
          | {{_ 'vote-against'}}

    //- XXX We should use "editable" to avoid repetiting ourselves
    if canModifyCard
      unless currentUser.isWorker
        if currentBoard.allowsDescriptionTitle
          hr
          h3.card-details-item-title
            i.fa.fa-align-left
            | {{_ 'description'}}
        if currentBoard.allowsDescriptionText
          +inlinedCardDescription(classNames="card-description js-card-description")
            +descriptionForm
            .edit-controls.clearfix
              button.primary(type="submit") {{_ 'save'}}
              a.fa.fa-times-thin.js-close-inlined-form
          else
            if currentBoard.allowsDescriptionText
              a.js-open-inlined-form
                if getDescription
                  +viewer
                    = getDescription
                else
                  | {{_ 'edit'}}
              if (hasUnsavedValue 'cardDescription' _id)
                p.quiet
                  | {{_ 'unsaved-description'}}
                  a.js-open-inlined-form {{_ 'view-it'}}
                  = ' - '
                  a.js-close-inlined-form {{_ 'discard'}}
    else if getDescription
      if currentBoard.allowsDescriptionTitle
        hr
        h3.card-details-item-title {{_ 'description'}}
      if currentBoard.allowsDescriptionText
        +viewer
          = getDescription

    .card-checklist-attachmentGalerys
      .card-checklist-attachmentGalery.card-checklists
        if currentBoard.allowsChecklists
          hr
          +checklists(cardId = _id)
        if currentBoard.allowsSubtasks
          hr
          +subtasks(cardId = _id)
      if currentBoard.allowsAttachments
        hr
        h3.card-details-item-title
          i.fa.fa-paperclip
          | {{_ 'attachments'}}
        .card-checklist-attachmentGalery.card-attachmentGalery
          +attachmentsGalery

    hr
    unless currentUser.isNoComments
      .activity-title
        h3.card-details-item-title
          i.fa.fa-history
          | {{ _ 'activity'}}
        if currentUser.isBoardMember
          .material-toggle-switch
            span.toggle-switch-title {{_ 'hide-system-messages'}}
            if hiddenSystemMessages
              input.toggle-switch(type="checkbox" id="toggleButton" checked="checked")
            else
              input.toggle-switch(type="checkbox" id="toggleButton")
            label.toggle-label(for="toggleButton")
    if currentBoard.allowsComments
      if currentUser.isBoardMember
        unless currentUser.isNoComments
          +commentForm
    unless currentUser.isNoComments
      if isLoaded.get
        if isLinkedCard
          +activities(card=this mode="linkedcard")
        else if isLinkedBoard
          +activities(card=this mode="linkedboard")
        else
          +activities(card=this mode="card")

template(name="editCardTitleForm")
  textarea.js-edit-card-title(rows='1' autofocus dir="auto")
    = getTitle
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form

template(name="editCardRequesterForm")
  input.js-edit-card-requester(type='text' autofocus value=getRequestedBy dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-requester-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form

template(name="editCardAssignerForm")
  input.js-edit-card-assigner(type='text' autofocus value=getAssignedBy dir="auto")
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form

template(name="cardDetailsActionsPopup")
  ul.pop-over-list
    li
      a.js-toggle-watch-card
        if isWatching
          i.fa.fa-eye
          |  {{_ 'unwatch'}}
        else
          i.fa.fa-eye-slash
          |  {{_ 'watch'}}
  if canModifyCard
    unless currentUser.isWorker
      hr
      ul.pop-over-list
        //li: a.js-members {{_ 'card-edit-members'}}
        //li: a.js-labels {{_ 'card-edit-labels'}}
        //li: a.js-attachments {{_ 'card-edit-attachments'}}
        li
          a.js-start-voting
            i.fa.fa-thumbs-up
            | {{_ 'card-edit-voting'}}
        if currentUser.isBoardAdmin
          li
            a.js-custom-fields
              i.fa.fa-list-alt
              | {{_ 'card-edit-custom-fields'}}
        //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
        //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
        //li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
        //li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
        li
          a.js-spent-time
            i.fa.fa-clock-o
            | {{_ 'editCardSpentTimePopup-title'}}
        li
          a.js-set-card-color
            i.fa.fa-paint-brush
            | {{_ 'setCardColorPopup-title'}}
      hr
    ul.pop-over-list
      li
        a.js-move-card-to-top
          i.fa.fa-arrow-up
          | {{_ 'moveCardToTop-title'}}
      li
        a.js-move-card-to-bottom
          i.fa.fa-arrow-down
          | {{_ 'moveCardToBottom-title'}}
      hr
    ul.pop-over-list
      if currentUser.isBoardAdmin
        li
          a.js-move-card
            i.fa.fa-arrow-right
            | {{_ 'moveCardPopup-title'}}
      unless currentUser.isWorker
        li
          a.js-copy-card
            i.fa.fa-copy
            | {{_ 'copyCardPopup-title'}}
    unless currentUser.isWorker
      hr
      ul.pop-over-list
        li
          a.js-copy-checklist-cards
            i.fa.fa-list
            i.fa.fa-copy
            | {{_ 'copyChecklistToManyCardsPopup-title'}}
      unless archived
        hr
        ul.pop-over-list
          li
            a.js-archive
              i.fa.fa-arrow-right
              i.fa.fa-archive
              | {{_ 'archive-card'}}
      hr
      ul.pop-over-list
        li
          a.js-more
            i.fa.fa-link
            | {{_ 'cardMorePopup-title'}}

template(name="moveCardPopup")
  +boardsAndLists

template(name="copyCardPopup")
  label(for='copy-card-title') {{_ 'title'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    = getTitle
  +boardsAndLists

template(name="copyChecklistToManyCardsPopup")
  label(for='copy-checklist-cards-title') {{_ 'copyChecklistToManyCardsPopup-instructions'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    | {{_ 'copyChecklistToManyCardsPopup-format'}}
  +boardsAndLists

template(name="boardsAndLists")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
        if $eq _id currentBoard._id
          option(value="{{_id}}" selected) {{_ 'current'}}
        else
          option(value="{{_id}}") {{title}}

  label {{_ 'swimlanes'}}:
  select.js-select-swimlanes
    each swimlanes
      option(value="{{_id}}") {{title}}

  label {{_ 'lists'}}:
  select.js-select-lists
    each aBoardLists
      option(value="{{_id}}") {{title}}

  .edit-controls.clearfix
    button.primary.confirm.js-done {{_ 'done'}}

template(name="cardMembersPopup")
  ul.pop-over-list.js-card-member-list
    each board.activeMembers
      li.item(class="{{#if isCardMember}}active{{/if}}")
        a.name.js-select-member(href="#")
          +userAvatar(userId=user._id)
          span.full-name
            = user.profile.fullname
            | (<span class="username">{{ user.username }}</span>)
          if isCardMember
            i.fa.fa-check

template(name="cardAssigneesPopup")
  unless currentUser.isWorker
    ul.pop-over-list.js-card-assignee-list
      each board.activeMembers
        li.item(class="{{#if isCardAssignee}}active{{/if}}")
          a.name.js-select-assignee(href="#")
            +userAvatar(userId=user._id)
            span.full-name
              = user.profile.fullname
              | (<span class="username">{{ user.username }}</span>)
            if isCardAssignee
              i.fa.fa-check
  if currentUser.isWorker
    ul.pop-over-list.js-card-assignee-list
      li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}")
        a.name.js-select-assignee(href="#")
          +userAvatar(userId=currentUser._id)
          span.full-name
            = currentUser.profile.fullname
            | (<span class="username">{{ currentUser.username }}</span>)
          if currentUser.isCardAssignee
            i.fa.fa-check

template(name="userAvatarAssignee")
  a.assignee.js-assignee(title="{{userData.profile.fullname}} ({{userData.username}})")
    if userData.profile.avatarUrl
      img.avatar.avatar-image(src="{{userData.profile.avatarUrl}}")
    else
      +userAvatarAssigneeInitials(userId=userData._id)

    if showStatus
      span.assignee-presence-status(class=presenceStatusClassName)
      span.member-type(class=memberType)

    unless isSandstorm
      if showEdit
        if $eq currentUser._id userData._id
          a.edit-avatar.js-change-avatar
            i.fa.fa-pencil

template(name="cardAssigneePopup")
  .board-assignee-menu
    .mini-profile-info
      +userAvatar(userId=user._id showEdit=true)
      .info
        h3= user.profile.fullname
        p.quiet @{{ user.username }}
    ul.pop-over-list
      if currentUser.isNotCommentOnly
        unless currentUser.isWorker
          li: a.js-remove-assignee {{_ 'remove-member-from-card'}}

      unless currentUser.isWorker
        if $eq currentUser._id user._id
          with currentUser
            li: a.js-edit-profile {{_ 'edit-profile'}}

template(name="userAvatarAssigneeInitials")
  svg.avatar.avatar-assignee-initials(viewBox="0 0 {{viewPortWidth}} 15")
    text(x="50%" y="13" text-anchor="middle")= initials

template(name="cardMorePopup")
  p.quiet
    span.clearfix
      span {{_ 'link-card'}}
      = ' '
      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
      input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus")
      button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
    span.clearfix
    br
    h2 {{_ 'change-card-parent'}}
    label {{_ 'source-board'}}:
      select.js-field-parent-board
        if isTopLevel
          option(value="none" selected) {{_ 'custom-field-dropdown-none'}}
        else
          option(value="none") {{_ 'custom-field-dropdown-none'}}
        each boards
          if isParentBoard
            option(value="{{_id}}" selected) {{title}}
          else
            option(value="{{_id}}") {{title}}

    label {{_ 'parent-card'}}:
      select.js-field-parent-card
        if isTopLevel
          option(value="none" selected) {{_ 'custom-field-dropdown-none'}}
        else
          option(value="none") {{_ 'custom-field-dropdown-none'}}
          each cards
            if isParentCard
              option(value="{{_id}}" selected) {{title}}
            else
              option(value="{{_id}}") {{title}}
    br
    | {{_ 'added'}}
    span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
    if currentUser.isBoardAdmin
      a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}

template(name="setCardColorPopup")
  form.edit-label
    .palette-colors: each colors
      unless $eq color 'white'
        span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
          if(isSelected color)
            i.fa.fa-check
    button.primary.confirm.js-submit {{_ 'save'}}
    button.js-remove-color.negate.wide.right {{_ 'unset-color'}}

template(name="cardDeletePopup")
  p {{_ "card-delete-pop"}}
  unless archived
    p {{_ "card-delete-suggest-archive"}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

template(name="deleteVotePopup")
  p {{_ "vote-delete-pop"}}
  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

template(name="cardStartVotingPopup")
  form.edit-vote-question
    .fields
      label(for="vote") {{_ 'vote-question'}}
      input.js-vote-field#vote(type="text" name="vote" value="{{getVoteQuestion}}" autofocus disabled="{{#if getVoteQuestion}}disabled{{/if}}")
      .check-div
        a.flex(class="{{#if getVoteQuestion}}is-disabled{{else}}js-toggle-vote-allow-non-members{{/if}}")
          .materialCheckBox#vote-allow-non-members(name="vote-allow-non-members" class="{{#if voteAllowNonBoardMembers}}is-checked{{/if}}")
          span {{_ 'allowNonBoardMembers'}}
      .check-div
        a.flex(class="{{#if getVoteQuestion}}is-disabled{{else}}js-toggle-vote-public{{/if}}")
          .materialCheckBox#vote-public(name="vote-public" class="{{#if votePublic}}is-checked{{/if}}")
          span {{_ 'vote-public'}}
      .check-div.flex
        i.fa.fa-hourglass-end
        a.js-end-date
          span
            | {{_ 'card-end'}}
            unless getVoteEnd
              i.fa.fa-plus
        if getVoteEnd
          +voteEndDate

    button.primary.js-submit {{_ 'save'}}
    if getVoteQuestion
      if currentUser.isBoardAdmin
        button.js-remove-vote.negate.wide.right {{_ 'delete'}}

template(name="positiveVoteMembersPopup")
  ul.pop-over-list.js-card-member-list
    each m in voteMemberPositive
      li.item
        a.name
          +userAvatar(userId=m._id)
          span.full-name
            = m.profile.fullname
            | (<span class="username">{{ m.username }}</span>)

template(name="negativeVoteMembersPopup")
  ul.pop-over-list.js-card-member-list
    each m in voteMemberNegative
      li.item
        a.name
          +userAvatar(userId=m._id)
          span.full-name
            = m.profile.fullname
            | (<span class="username">{{ m.username }}</span>)