template(name="cardDetails")
  section.card-details.js-card-details.js-perfect-scrollbar: .card-details-canvas
    .card-details-header
      +inlinedForm(classNames="js-card-details-title")
        input.full-line(type="text" value=title autofocus)
        .edit-controls.clearfix
          button.primary.confirm(type="submit") {{_ 'save'}}
          a.fa.fa-times-thin.js-close-inlined-form
      else
        a.fa.fa-times-thin.close-card-details.js-close-card-details
        if currentUser.isBoardMember
          a.fa.fa-ellipsis-v.card-details-menu.js-open-card-details-menu
        h2.card-details-title.js-card-title(
          class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
            = title

    .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 /// }}
        a.member.add-member.card-details-item-add-button.js-add-members
          i.fa.fa-plus

      .card-details-item.card-details-item-labels
        h3.card-details-item-title {{_ 'labels'}}
        a.js-add-labels
          each labels
            span.card-label(class="card-label-{{color}}" title=name)= name
        a.card-label.add-label.js-add-labels
          i.fa.fa-plus

    //- XXX We should use "editable" to avoid repetiting ourselves
    if currentUser.isBoardMember
      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
            | You have an 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
    if attachments.count
      hr
      h2
        i.fa.fa-paperclip
        | {{_ 'attachments'}}

      +attachmentsGalery

    hr
    h2 {{ _ 'activity'}}
    if currentUser.isBoardMember
      +commentForm
    if isLoaded.get
      +activities(card=this mode="card")

template(name="cardDetailsActionsPopup")
  ul.pop-over-list
    li: a.js-members Edit Members…
    li: a.js-labels Edit Labels…
    li: a.js-attachments Edit Attachments…
  hr
  ul.pop-over-list
    li: a.js-move-card Move card
    unless archived
      li: a.js-archive Archive Card
    li: a.js-more More

template(name="moveCardPopup")
  +boardLists

template(name="cardMembersPopup")
  ul.pop-over-list.pop-over-member-list
    each board.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
            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" readonly value="{{ rootUrl }}")
    | {{_ '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'}}