wekan/client/components/cards/cardDetails.jade

template(name="cardDetails")
  section.card-details.js-card-details.js-perfect-scrollbar: .card-details-canvas
    .card-details-header
      +inlinedForm(classNames="js-card-details-title")
        +editCardTitleForm
      else
        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
        h2.card-details-title.js-card-title(
          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
            +viewer
              = title
              if isWatching
                i.fa.fa-eye.card-details-watch

    if archived
      p.warning {{_ 'card-archived'}}

    .card-details-items
      .card-details-item.card-details-item-received
        h3.card-details-item-title {{_ 'card-received'}}
        if receivedAt
          +cardReceivedDate
        else
          a.js-received-date {{_ 'add'}}

      .card-details-item.card-details-item-start
        h3.card-details-item-title {{_ 'card-start'}}
        if startAt
          +cardStartDate
        else
          a.js-start-date {{_ 'add'}}

      .card-details-item.card-details-item-due
        h3.card-details-item-title {{_ 'card-due'}}
        if dueAt
          +cardDueDate
        else
          a.js-due-date {{_ 'add'}}

      .card-details-item.card-details-item-end
        h3.card-details-item-title {{_ 'card-end'}}
        if endAt
          +cardEndDate
        else
          a.js-end-date {{_ 'add'}}

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

      .card-details-item.card-details-item-labels
        h3.card-details-item-title {{_ '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)= name
        if canModifyCard
          a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
            i.fa.fa-plus

    .card-details-items
      each customFieldsWD
        .card-details-item.card-details-item-customfield
          h3.card-details-item-title
            = definition.name
          +cardCustomField

    .card-details-items
      if spentTime
        .card-details-item.card-details-item-spent
          if isOvertime
            h3.card-details-item-title {{_ 'overtime-hours'}}
          else
            h3.card-details-item-title {{_ 'spent-time-hours'}}
          +cardSpentTime

    //- XXX We should use "editable" to avoid repetiting ourselves
    if canModifyCard
      h3.card-details-item-title {{_ 'description'}}
      +inlinedCardDescription(classNames="card-description js-card-description")
        +editor(autofocus=true)
          | {{getUnsavedValue 'cardDescription' _id description}}
        .edit-controls.clearfix
          button.primary(type="submit") {{_ 'save'}}
          a.fa.fa-times-thin.js-close-inlined-form
      else
        a.js-open-inlined-form
          if description
            +viewer
              = description
          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 description
      h3.card-details-item-title {{_ 'description'}}
      +viewer
        = description

    .card-details-items
      .card-details-item.card-details-item-name
        h3.card-details-item-title {{_ 'requested-by'}}
        if canModifyCard
          +inlinedForm(classNames="js-card-details-requester")
            +editCardRequesterForm
          else
            a.js-open-inlined-form
           if requestedBy
             +viewer
               = requestedBy
           else
             | {{_ 'add'}}
        else if requestedBy
          +viewer
            = requestedBy

      .card-details-item.card-details-item-name
        h3.card-details-item-title {{_ 'assigned-by'}}
        if canModifyCard
          +inlinedForm(classNames="js-card-details-assigner")
            +editCardAssignerForm
          else
            a.js-open-inlined-form
           if assignedBy
             +viewer
               = assignedBy
           else
             | {{_ 'add'}}
        else if requestedBy
          +viewer
            = assignedBy

    hr
    +checklists(cardId = _id)

    hr
    h3
      i.fa.fa-paperclip
      | {{_ 'attachments'}}

    +attachmentsGalery

    hr
    .activity-title
      h3 {{ _ '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 currentUser.isBoardMember
      +commentForm
    if isLoaded.get
      +activities(card=this mode="card")

template(name="editCardTitleForm")
  textarea.js-edit-card-title(rows='1' autofocus)
    = title
  .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=requestedBy )
  .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=assignedBy)
  .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}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}}
  if canModifyCard
    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-custom-fields {{_ '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 {{_ 'editCardSpentTimePopup-title'}}
    hr
    ul.pop-over-list
      li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}}
      li: a.js-move-card-to-bottom {{_ 'moveCardToBottom-title'}}
    hr
    ul.pop-over-list
      li: a.js-move-card {{_ 'moveCardPopup-title'}}
      li: a.js-copy-card {{_ 'copyCardPopup-title'}}
      li: a.js-copy-checklist-cards {{_ 'copyChecklistToManyCardsPopup-title'}}
      unless archived
        li: a.js-archive {{_ 'archive-card'}}
      li: a.js-more {{_ '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)
    = title
  +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")
  label {{_ 'boards'}}:
  select.js-select-boards
    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="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="{{ absoluteUrl }}")
      button.js-copy-card-link-to-clipboard(class="btn") {{_ 'copy-card-link-to-clipboard'}}
    span.clearfix
    br
    | {{_ 'added'}}
    span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
    a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}

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