template(name="subtasks")
  h3
    i.fa.fa-sitemap
    | {{_ 'subtasks'}}
  if toggleDeleteDialog.get
    .board-overlay#card-details-overlay
    +subtaskDeleteDialog(subtask = subtaskToDelete)


  .card-subtasks-items
    each subtask in currentCard.subtasks
      +subtaskDetail(subtask = subtask)

  if canModifyCard
    +inlinedForm(autoclose=false classNames="js-add-subtask" cardId = cardId)
      +addSubtaskItemForm
    else
      a.js-open-inlined-form
        i.fa.fa-plus
        | {{_ 'add-subtask'}}...

template(name="subtaskDetail")
  .js-subtasks.subtask
    +inlinedForm(classNames="js-edit-subtask-title" subtask = subtask)
      +editSubtaskItemForm(subtask = subtask)
    else
      .subtask-title
        span
        a.js-view-subtask(title="{{ subtask.title }}") {{_ "view-it"}}
        if canModifyCard
          a.js-delete-subtask.toggle-delete-subtask-dialog {{_ "delete"}}...

        if canModifyCard
          h2.title.js-open-inlined-form.is-editable
            +viewer
              = subtask.title
        else
          h2.title
            +viewer
                = subtask.title

template(name="subtaskDeleteDialog")
  .js-confirm-subtask-delete
    p
      i(class="fa fa-exclamation-triangle" aria-hidden="true")
    p
      | {{_ 'confirm-subtask-delete-dialog'}}
      span {{subtask.title}}
      | ?
    .js-subtask-delete-buttons
      button.confirm-subtask-delete(type="button") {{_ 'delete'}}
      button.toggle-delete-subtask-dialog(type="button") {{_ 'cancel'}}

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

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

template(name="subtasksItems")
  .subtasks-items.js-subtasks-items
    each item in subtasks.items
      +inlinedForm(classNames="js-edit-subtask-item" item = item subtasks = subtasks)
        +editSubtaskItemForm(type = 'item' item = item subtasks = subtasks)
      else
        +subtaskItemDetail(item = item subtasks = subtasks)
    if canModifyCard
      +inlinedForm(autoclose=false classNames="js-add-subtask-item" subtasks = subtasks dir="auto")
        +addSubtaskItemForm
      else
        a.add-subtask-item.js-open-inlined-form
          i.fa.fa-plus
          | {{_ 'add-subtask-item'}}...

template(name='subtaskItemDetail')
  .js-subtasks-item.subtasks-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}}")
        +viewer
          = item.title
    else
      .materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
      .item-title(class="{{#if item.isFinished }}is-checked{{/if}}")
        +viewer
          = item.title