template(name="checklists")
  h2 {{_ 'checklists'}}
  .card-checklist-items
    each checklist in currentCard.checklists
      +checklistDetail(checklist = checklist)
  if canModifyCard
    +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId)
      +addChecklistItemForm
    else
      a.js-open-inlined-form
        i.fa.fa-plus
        | {{_ 'add-checklist'}}...

template(name="checklistDetail")
  +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
    +editChecklistItemForm(checklist = checklist)
  else
    .checklist-title
      .checkbox.fa.fa-check-square-o
      if canModifyCard
        a.js-delete-checklist {{_ "delete"}}...
      span.checklist-stat(class="{{#if checklist.isFinished}}is-finished{{/if}}") {{checklist.finishedCount}}/{{checklist.itemCount}}
      if canModifyCard
        h2.title.js-open-inlined-form.is-editable  {{checklist.title}}
      else
        h2.title  {{checklist.title}}
  +checklistItems(checklist = checklist)

template(name="addChecklistItemForm")
  textarea.js-add-checklist-item(rows='1' autofocus)
  .edit-controls.clearfix
    button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form

template(name="editChecklistItemForm")
  textarea.js-edit-checklist-item(rows='1' autofocus)
    if $eq type 'item'
      = item.title
    else
      = checklist.title
  .edit-controls.clearfix
    button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
    a.fa.fa-times-thin.js-close-inlined-form
    span(title=createdAt) {{ moment createdAt }}
    if canModifyCard
      a.js-delete-checklist-item {{_ "delete"}}...

template(name="checklistItems")
  .checklist-items.js-checklist-items
    each item in checklist.getItems
      +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
        +editChecklistItemForm(type = 'item' item = item checklist = checklist)
      else
        +itemDetail(item = item checklist = checklist)
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-checklist-item" checklist = checklist)
        +addChecklistItemForm
      else
        a.add-checklist-item.js-open-inlined-form
          i.fa.fa-plus
          | {{_ 'add-checklist-item'}}...

template(name='itemDetail')
  .item.js-checklist-item
    if canModifyCard
      .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}}
    else
      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}") {{item.title}}