//-
  XXX There is a *lot* of code duplication in the below templates and in the
  corresponding JavaScript components. We will probably need the upcoming #let
  and #each x in y constructors to fix this.

template(name="filterSidebar")
  h3
    i.fa.fa-trello
    | {{_ 'list-filter-label'}}
  ul.sidebar-list
    form.js-list-filter
      input(type="text")
  hr
  h3
    i.fa.fa-list-alt
    | {{_ 'filter-card-title-label'}}
  input.js-field-card-filter(type="text")
  hr
  h3
    i.fa.fa-tags
    | {{_ 'filter-labels-label'}}
  ul.sidebar-list
    li(class="{{#if Filter.labelIds.isSelected undefined}}active{{/if}}")
          a.name.js-toggle-label-filter
            span.sidebar-list-item-description
              | {{_ 'filter-no-label'}}
            if Filter.labelIds.isSelected undefined
              i.fa.fa-check
    each currentBoard.labels
      li
        a.name.js-toggle-label-filter
          span.card-label.square(class="card-label-{{color}}")
          span.sidebar-list-item-description
            if name
              = name
            else
              span.quiet {{_ "label-default" (_ (concat "color-" color))}}
          if Filter.labelIds.isSelected _id
            i.fa.fa-check
  hr
  h3
    i.fa.fa-users
    | {{_ 'filter-member-label'}}
  ul.sidebar-list
    li(class="{{#if Filter.members.isSelected undefined}}active{{/if}}")
          a.name.js-toggle-member-filter
            span.sidebar-list-item-description
              | {{_ 'filter-no-member'}}
            if Filter.members.isSelected undefined
              i.fa.fa-check
    each currentBoard.activeMembers
      with getUser userId
        li(class="{{#if Filter.members.isSelected _id}}active{{/if}}")
          a.name.js-toggle-member-filter
            +userAvatar(userId=this._id)
            span.sidebar-list-item-description
              = profile.fullname
              | (<span class="username">{{ username }}</span>)
            if Filter.members.isSelected _id
              i.fa.fa-check
  hr
  h3
    i.fa.fa-user
    | {{_ 'filter-assignee-label'}}
  ul.sidebar-list
    li(class="{{#if Filter.assignees.isSelected undefined}}active{{/if}}")
      a.name.js-toggle-assignee-filter
        span.sidebar-list-item-description
          | {{_ 'filter-no-assignee'}}
        if Filter.assignees.isSelected undefined
          i.fa.fa-check
    each currentBoard.activeMembers
      with getUser userId
        li(class="{{#if Filter.assignees.isSelected _id}}active{{/if}}")
          a.name.js-toggle-assignee-filter
            +userAvatar(userId=this._id)
            span.sidebar-list-item-description
              = profile.fullname
              | (<span class="username">{{ username }}</span>)
            if Filter.assignees.isSelected _id
              i.fa.fa-check

  hr
  h3
    i.fa.fa-list-alt
    | {{_ 'filter-dates-label' }}
  ul.sidebar-list
    li(class="{{#if Filter.dueAt.isSelected 'noDate'}}active{{/if}}")
      a.name.js-toggle-no-due-date-filter
        span.sidebar-list-item-description
          | {{_ 'filter-no-due-date' }}
        if Filter.dueAt.isSelected 'noDate'
          i.fa.fa-check
    li(class="{{#if Filter.dueAt.isSelected 'past'}}active{{/if}}")
      a.name.js-toggle-overdue-filter
        span.sidebar-list-item-description
          | {{_ 'filter-overdue' }}
        if Filter.dueAt.isSelected 'past'
          i.fa.fa-check
    li(class="{{#if Filter.dueAt.isSelected 'today'}}active{{/if}}")
      a.name.js-toggle-due-today-filter
        span.sidebar-list-item-description
          | {{_ 'filter-due-today' }}
        if Filter.dueAt.isSelected 'today'
          i.fa.fa-check
    li(class="{{#if Filter.dueAt.isSelected 'tomorrow'}}active{{/if}}")
      a.name.js-toggle-due-tomorrow-filter
        span.sidebar-list-item-description
          | {{_ 'filter-due-tomorrow' }}
        if Filter.dueAt.isSelected 'tomorrow'
          i.fa.fa-check
    li(class="{{#if Filter.dueAt.isSelected 'week'}}active{{/if}}")
      a.name.js-toggle-due-this-week-filter
        span.sidebar-list-item-description
          | {{_ 'filter-due-this-week' }}
        if Filter.dueAt.isSelected 'week'
          i.fa.fa-check

  hr
  h3
    i.fa.fa-list-alt
    | {{_ 'filter-custom-fields-label'}}
  ul.sidebar-list
    li(class="{{#if Filter.customFields.isSelected undefined}}active{{/if}}")
          a.name.js-toggle-custom-fields-filter
            span.sidebar-list-item-description
              | {{_ 'filter-no-custom-fields'}}
            if Filter.customFields.isSelected undefined
              i.fa.fa-check
    each currentBoard.customFields
      li(class="{{#if Filter.customFields.isSelected _id}}active{{/if}}")
        a.name.js-toggle-custom-fields-filter
          span.sidebar-list-item-description
            | {{ name }}
          if Filter.customFields.isSelected _id
            i.fa.fa-check
  hr
  h3
    | {{_ 'other-filters-label'}}
  ul.sidebar-list
    li(class="{{#if Filter.archive.isSelected _id}}active{{/if}}")
      a.name.js-toggle-archive-filter
        span.sidebar-list-item-description
          | {{_ 'filter-show-archive'}}
        if Filter.archive.isSelected _id
          i.fa.fa-check
  ul.sidebar-list
    li(class="{{#if Filter.hideEmpty.isSelected _id}}active{{/if}}")
      a.name.js-toggle-hideEmpty-filter
        span.sidebar-list-item-description
          | {{_ 'filter-hide-empty'}}
        if Filter.hideEmpty.isSelected _id
          i.fa.fa-check
  hr
  h3 {{_ 'advanced-filter-label'}}
  input.js-field-advanced-filter(type="text")
  span {{_ 'advanced-filter-description'}}
  if Filter.isActive
    hr
    a.sidebar-btn.js-clear-all
      i.fa.fa-filter
      span {{_ 'filter-clear'}}
    a.sidebar-btn.js-filter-to-selection
      i.fa.fa-check-square-o
      span {{_ 'filter-to-selection'}}

template(name="multiselectionSidebar")
  h3
    i.fa.fa-tags
    | {{_ 'multi-selection-label'}}
  ul.sidebar-list
    each currentBoard.labels
      li
        a.name.js-toggle-label-multiselection
          span.card-label.square(class="card-label-{{color}}")
          span.sidebar-list-item-description
            if name
              = name
            else
              span.quiet {{_ "label-default" (_ (concat "color-" color))}}
          if allSelectedElementHave 'label' _id
            i.fa.fa-check
          else if someSelectedElementHave 'label' _id
            i.fa.fa-ellipsis-h
  hr
  h3
    i.fa.fa-users
    | {{_ 'multi-selection-member'}}
  ul.sidebar-list
    each currentBoard.activeMembers
      with getUser userId
        li(class="{{#if Filter.members.isSelected _id}}active{{/if}}")
          a.name.js-toggle-member-multiselection
            +userAvatar(userId=this._id)
            span.sidebar-list-item-description
              = profile.fullname
              | (<span class="username">{{ username }}</span>)
            if allSelectedElementHave 'member' _id
              i.fa.fa-check
            else if someSelectedElementHave 'member' _id
              i.fa.fa-ellipsis-h
  if currentUser.isBoardAdmin
    hr
    a.sidebar-btn.js-move-selection
      i.fa.fa-share
      span {{_ 'move-selection'}}
    a.sidebar-btn.js-archive-selection
      i.fa.fa-archive
      span {{_ 'archive-selection'}}

template(name="disambiguateMultiLabelPopup")
  p {{_ 'what-to-do'}}
  button.wide.js-remove-label {{_ 'remove-label'}}
  button.wide.js-add-label {{_ 'add-label'}}

template(name="disambiguateMultiMemberPopup")
  p {{_ 'what-to-do'}}
  button.wide.js-unassign-member {{_ 'unassign-member'}}
  button.wide.js-assign-member {{_ 'assign-member'}}

template(name="moveSelectionPopup")
  +boardLists
