wekan/client/components/cards/cardDetails.jade

template(name="cardDetailsPopup")
  +cardDetails(popupCard)

template(name="cardDetails")

  +attachmentViewer

  section.card-details.js-card-details.nodragscroll(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isPopup}}card-details-popup{{/if}}' class='{{#unless isVerticalScrollbars}}no-scrollbars{{/unless}}'): .card-details-canvas
    .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
      +inlinedForm(classNames="js-card-details-title")
        +editCardTitleForm
      else
        unless isMiniScreen
          unless isPopup
            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
              | ❌
            if canModifyCard
              if cardMaximized
                a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
                  | 🔽
              else
                a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
                  | 🔼
          if canModifyCard
            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
              | ☰
            a.card-copy-button.js-copy-link(
              id="cardURL_copy"
              class="fa-link"
              title="{{_ 'copy-card-link-to-clipboard'}}"
              href="{{ originRelativeUrl }}"
            )
            span.copied-tooltip {{_ 'copied'}}
        else
          unless isPopup
            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
              | ❌
          if canModifyCard
            a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
              | ☰
            a.card-copy-mobile-button.js-copy-link(
              id="cardURL_copy"
              class="fa-link"
              title="{{_ 'copy-card-link-to-clipboard'}}"
              href="{{ originRelativeUrl }}"
            )
            span.copied-tooltip {{_ 'copied'}}
        h2.card-details-title.js-card-title(
          class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}")
            +viewer
              if currentBoard.allowsCardNumber
                span.card-number
                  | ##{getCardNumber}
              = getTitle
            if isWatching
              i.card-details-watch
                | 👁️
        .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'}}

    // Upload progress indicator for drag-and-drop uploads
    if hasActiveUploads
      .card-details-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'}}

    .card-details-left

      .card-details-items
        if currentBoard.allowsLabels
          .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)
                  +viewer
                    = name
            if canModifyCard
              unless currentUser.isWorker
                a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
                  | ➕

        if currentBoard.hasAnyAllowsDate
          hr

          .card-details-item.card-details-item-date-format
            h3.card-details-item-title
              | 📅
              | {{_ 'date-format'}}
            .card-details-item-content
              select.js-date-format-selector
                option(value="YYYY-MM-DD" selected="{{#if isDateFormat 'YYYY-MM-DD'}}selected{{/if}}") {{_ 'date-format-yyyy-mm-dd'}}
                option(value="DD-MM-YYYY" selected="{{#if isDateFormat 'DD-MM-YYYY'}}selected{{/if}}") {{_ 'date-format-dd-mm-yyyy'}}
                option(value="MM-DD-YYYY" selected="{{#if isDateFormat 'MM-DD-YYYY'}}selected{{/if}}") {{_ 'date-format-mm-dd-yyyy'}}

        if currentBoard.allowsReceivedDate
          .card-details-item.card-details-item-received
            h3.card-details-item-title
              | 📥
              | {{_ 'card-received'}}
            if getReceived
              +cardReceivedDate
            else
              if canModifyCard
                unless currentUser.isWorker
                  a.card-label.add-label.js-received-date
                    | ➕

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

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

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

        if currentBoard.hasAnyAllowsUser
          hr

        if currentBoard.allowsCreator
          .card-details-item.card-details-item-creator
            h3.card-details-item-title
              | 👤
              | {{_ '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
              | 👤s
              | {{_ 'members'}}
            each userId in getMembers
              +userAvatar(userId=userId 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'}}")
                  | ➕

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

        //.card-details-items
        if currentBoard.allowsRequestedBy
          .card-details-item.card-details-item-name
            h3.card-details-item-title
              | 🛒
              | {{_ '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
              | 👤-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

        if $or currentBoard.allowsCardSortingByNumber getSpentTime
          hr

        if currentBoard.allowsCardSortingByNumber
          .card-details-item.card-details-sort-order
            h3.card-details-item-title
              | 🔢
              | {{_ 'sort'}}
            if canModifyCard
              +inlinedForm(classNames="js-card-details-sort")
                +editCardSortOrderForm
              else
                a.js-open-inlined-form
                  +viewer
                    = sort

        if currentBoard.allowsShowLists
          .card-details-item.card-details-show-lists
            h3.card-details-item-title
              | 📋
              | {{_ 'list'}}
            select.js-select-card-details-lists(disabled="{{#unless canModifyCard}}disabled{{/unless}}")
              each currentBoard.lists
                option(value="{{_id}}" selected="{{#if isCurrentListId _id}}selected{{/if}}") {{title}}

        //.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 customFieldsWD
          unless customFieldsGrid
            hr
          each customFieldsWD
            if customFieldsGrid
              hr
            .card-details-item.card-details-item-customfield
              h3.card-details-item-title
                | 📋-alt
                = definition.name
              +cardCustomField

          if $gt customFieldsWD.length 1
            .material-toggle-switch(title="{{_ 'change'}} {{_ 'custom-fields'}} {{_ 'layout'}}")
              if customFieldsGrid
                input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton" checked="checked")
              else
                input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
              label.toggle-label(for="toggleCustomFieldsGridButton")
          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")

      if getVoteQuestion
        hr
        .vote-title
          div.flex
            h3
              | 👍
              | {{_ '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
              | 👍
            | {{_ 'vote-for-it'}}
          button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
            if $eq voteState false
              | 👎
            | {{_ 'vote-against'}}

      if getPokerQuestion
        hr
        .poker-title
          div.flex
            h3
              | 👍
              | {{_ 'poker-question'}}
            if getPokerEnd
              +pokerEndDate
          div.flex
            .poker-result
              if expiredPoker
                unless ($and currentBoard.isPublic pokerAllowNonBoardMembers )
                  .card-label.card-label-gray  {{ pokerCount }} {{_ 'r-of' }} {{ currentBoard.activeMembers.length }}
        if showPlanningPokerButtons
          .poker-result
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
              if $eq pokerState "one"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
              if $eq pokerState "two"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
              if $eq pokerState "three"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
              if $eq pokerState "five"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
              if $eq pokerState "eight"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
              if $eq pokerState "thirteen"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
              if $eq pokerState "twenty"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
              if $eq pokerState "forty"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
              if $eq pokerState "oneHundred"
                | ✅
            .poker-deck
              .poker-card
                span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
              if $eq pokerState "unsure"
                | ✅

          if currentUser.isBoardAdmin
            button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}

        if expiredPoker
          .poker-table
            .poker-table-side-left
              .poker-table-heading-left
                .poker-table-row
                  .poker-table-cell
                  .poker-table-cell
                    | {{_ 'poker-result-votes' }}
                  .poker-table-cell.poker-table-cell-who
                    | {{_ 'poker-result-who' }}
              .poker-table-body
                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 1}}winner{{else}}loser{{/if}}") {{_ 'poker-one'}}
                  .poker-table-cell {{ pokerCountOne }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberOne
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 2}}winner{{else}}loser{{/if}}") {{_ 'poker-two'}}
                  .poker-table-cell {{ pokerCountTwo }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberTwo
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 3}}winner{{else}}loser{{/if}}") {{_ 'poker-three'}}
                  .poker-table-cell {{ pokerCountThree }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberThree
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 5}}winner{{else}}loser{{/if}}") {{_ 'poker-five'}}
                  .poker-table-cell {{ pokerCountFive }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberFive
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 8}}winner{{else}}loser{{/if}}") {{_ 'poker-eight'}}
                  .poker-table-cell {{ pokerCountEight }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberEight
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

            .poker-table-side-right
              .poker-table-heading-right
                .poker-table-row
                  .poker-table-cell
                  .poker-table-cell
                    | {{_ 'poker-result-votes' }}
                  .poker-table-cell.poker-table-cell-who
                    | {{_ 'poker-result-who' }}
              .poker-table-body
                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 13}}winner{{else}}loser{{/if}}") {{_ 'poker-thirteen'}}
                  .poker-table-cell {{ pokerCountThirteen }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberThirteen
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 20}}winner{{else}}loser{{/if}}") {{_ 'poker-twenty'}}
                  .poker-table-cell {{ pokerCountTwenty }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberTwenty
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 40}}winner{{else}}loser{{/if}}") {{_ 'poker-forty'}}
                  .poker-table-cell {{ pokerCountForty }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberForty
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 100}}winner{{else}}loser{{/if}}") {{_ 'poker-oneHundred'}}
                  .poker-table-cell {{ pokerCountOneHundred }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberOneHundred
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

                .poker-table-row
                  .poker-table-cell
                    button.card-details-gray.js-poker.poker-card-result(class="{{#if $eq pokerWinner 'unsure'}}winner{{else}}loser{{/if}}") {{_ 'poker-unsure'}}
                  .poker-table-cell {{ pokerCountUnsure }}
                  .poker-table-cell.poker-table-cell-who
                    .poker-result
                        each m in pokerMemberUnsure
                          a.name
                            +userAvatar(userId=m._id noRemove=true)

          if currentUser.isBoardAdmin
            div.estimation-add
              button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
            div.estimation-add
              button.js-poker-estimation
                | ➕
                | {{_ 'set-estimation'}}
              input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")

      //- XXX We should use "editable" to avoid repetiting ourselves
      if canModifyCard
        unless currentUser.isWorker
          if currentBoard.allowsDescriptionTitle
            hr
            h3.card-details-item-title
              | 📝
              | {{_ 'description'}}
          if currentBoard.allowsDescriptionText
            +inlinedCardDescription(classNames="card-description js-card-description")
              +descriptionForm
              .edit-controls.clearfix
                button.primary(type="submit") {{_ 'save'}}
                a.js-close-inlined-form
            else
              if currentBoard.allowsDescriptionText
                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
                  | ✏️
                a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
                  if getDescription
                    +viewer
                      = getDescription
                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-attachmentGalleries
        .card-checklist-attachmentGallery.card-checklists
          if currentBoard.allowsChecklists
            hr
            +checklists(cardId = _id card = this)
          if currentBoard.allowsSubtasks
            hr
            +subtasks(cardId = _id)
        if currentBoard.allowsAttachments
          hr
          h3.card-details-item-title
            | 📎
            | {{_ 'attachments'}}
          if Meteor.settings.public.attachmentsUploadMaxSize
            | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}}
            br
          if Meteor.settings.public.attachmentsUploadMimeTypes
            | {{_ 'allowed-upload-filetypes'}} {{Meteor.settings.public.attachmentsUploadMimeTypes}}
            br
          | {{_ 'invalid-file'}}
          .card-checklist-attachmentGallery.card-attachmentGallery
            +attachmentGallery
      hr

      unless currentUser.isNoComments
        .comment-title
          h3.card-details-item-title
            | 💬
            | {{_ 'comments'}}

        if currentBoard.allowsComments
          if currentUser.isBoardMember
            unless currentUser.isNoComments
              +commentForm
              +comments
      hr

    .card-details-right

      unless currentUser.isNoComments
        .activity-title
          h3.card-details-item-title
            | 📜
            | {{ _ 'activities'}}
          if currentUser.isBoardMember
            .material-toggle-switch(title="{{_ 'show-activities'}}")
              if showActivities
                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard" checked="checked")
              else
                input.toggle-switch(type="checkbox" id="toggleShowActivitiesCard")
              label.toggle-label(for="toggleShowActivitiesCard")

      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")
  a(title="{{_ 'copy-text-to-clipboard'}}")
  span.copied-tooltip {{_ 'copied'}}
  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.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.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.js-close-inlined-form

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

template(name="cardDetailsActionsPopup")
  ul.pop-over-list
    li
      a.js-toggle-watch-card
        if isWatching
          | 👁️
          |  {{_ 'unwatch'}}
        else
          | 👁️-slash
          |  {{_ 'watch'}}
  hr
  if canModifyCard
    unless currentUser.isWorker
      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
            | 👍
            | {{_ 'card-edit-voting'}}
        li
          a.js-start-planning-poker
            | 👍
            | {{_ 'card-edit-planning-poker'}}
        if currentUser.isBoardAdmin
          li
            a.js-custom-fields
              | 📋-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
            | 🕐
            | {{_ 'editCardSpentTimePopup-title'}}
        li
          a.js-set-card-color
            | 🎨
            | {{_ 'setCardColorPopup-title'}}
        li
          a.js-toggle-show-list-on-minicard
            if showListOnMinicard
              | 👁️
              | {{_ 'hide-list-on-minicard'}}
            else
              | 👁️-slash
              | {{_ 'show-list-on-minicard'}}
  hr
  ul.pop-over-list
    li
      a.js-export-card
        | 📤
        | {{_ 'export-card'}}
  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
    if currentUser.isBoardAdmin
      li
        a.js-move-card
          | ➡️
          | {{_ 'moveCardPopup-title'}}
    unless currentUser.isWorker
      li
        a.js-copy-card
          | 📋
          | {{_ 'copyCardPopup-title'}}
  unless currentUser.isWorker
    ul.pop-over-list
      li
        a.js-copy-checklist-cards
          | 📋
          | 📋
          | {{_ 'copyManyCardsPopup-title'}}
    unless archived
      hr
      ul.pop-over-list
        li
          a.js-archive
            | ➡️
            | 📦
            | {{_ 'archive-card'}}
    hr
    ul.pop-over-list
      li
        a.js-more
          | 🔗
          | {{_ 'cardMorePopup-title'}}

template(name="exportCardPopup")
  ul.pop-over-list
    li
      a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
        | 📤
        | {{_ 'export-card-pdf'}}

template(name="moveCardPopup")
  +copyAndMoveCard

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

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

template(name="convertChecklistItemToCardPopup")
  label(for='convert-checklist-item-to-card-title') {{_ 'title'}}:
  textarea#copy-card-title.minicard-composer-textarea.js-card-title(autofocus)
    = item.title
  +copyAndMoveCard

template(name="copyAndMoveCard")
  unless currentUser.isWorker
    label {{_ 'boards'}}:
    select.js-select-boards(autofocus)
      each boards
        option(value="{{_id}}" selected="{{#if isDialogOptionBoardId _id}}selected{{/if}}") {{title}}

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

  label {{_ 'lists'}}:
  select.js-select-lists
    each lists
      option(value="{{_id}}" selected="{{#if isDialogOptionListId _id}}selected{{/if}}") {{title}}

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

template(name="cardMembersPopup")
  input.card-members-filter(type="text" placeholder="{{_ 'search'}}")
  ul.pop-over-list.js-card-member-list
    each members
      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
            | ✅

template(name="cardAssigneesPopup")
  input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}")
  unless currentUser.isWorker
    ul.pop-over-list.js-card-assignee-list
      each members
        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
              | ✅
  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
            | ✅

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="cardMorePopup")
  p.quiet
    span.clearfix
      span {{_ 'link-card'}}
      = ' '
      | {{#if board.isPublic}}🌐{{else}}🔒{{/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'}}
      .copied-tooltip {{_ 'copied'}}
    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)
            | ✅
    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="cardArchivePopup")
  p {{_ "card-archive-pop"}}
  unless archived
    p {{_ "card-archive-suggest-cancel"}}
  button.js-confirm.negate.full(type="submit") {{_ 'archive'}}

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
        | ⏰
        a.js-end-date
          span
            | {{_ 'card-end'}}
            unless getVoteEnd
              | ➕
        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>)

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

template(name="cardStartPlanningPokerPopup")
  form.edit-poker-question
    .fields
      .check-div
        a.flex(class="{{#if getPokerQuestion}}is-disabled{{else}}js-toggle-poker-allow-non-members{{/if}}")
          .materialCheckBox#poker-allow-non-members(name="poker-allow-non-members" class="{{#if pokerAllowNonBoardMembers}}is-checked{{/if}}")
          span {{_ 'allowNonBoardMembers'}}
      .check-div.flex
        | ⏰
        a.js-end-date
          span
            | {{_ 'card-end'}}
            unless getPokerEnd
              | ➕
        if getPokerEnd
          +pokerEndDate

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