wekan/client/components/boards/boardHeader.jade

template(name="boardHeaderBar")
  h1.header-board-menu
    with currentBoard
      if $eq title 'Templates'
        | {{_ 'templates'}}
      else
        +viewer
          = title

  .board-header-btns.left
    unless isMiniScreen
      if currentBoard
        if currentUser
          with currentBoard
            if currentUser.isBoardAdmin
              a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
                i.fa.fa-pencil-square-o

          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
            if showStarCounter
              span
                = currentBoard.stars

          a.board-header-btn.js-auto-width-board(
            title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}")
            i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}")

          a.board-header-btn.js-keyboard-shortcuts-toggle(
            title="{{#if isKeyboardShortcuts}}{{_ 'click-to-disable-keyboard-shortcuts'}}{{else}}{{_ 'click-to-enable-keyboard-shortcuts'}}{{/if}}")
            i.fa(class="fa-solid fa-{{#if isKeyboardShortcuts}}computer-mouse{{else}}keyboard{{/if}}")

          a.board-header-btn(
            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
            title="{{_ currentBoard.permission}}")
            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
            span {{_ currentBoard.permission}}

          a.board-header-btn.js-watch-board(
            title="{{_ watchLevel }}")
            if $eq watchLevel "watching"
              i.fa.fa-eye
            if $eq watchLevel "tracking"
              i.fa.fa-bell
            if $eq watchLevel "muted"
              i.fa.fa-bell-slash
            span {{_ watchLevel}}
          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
            i.fa.fa-sort
            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
            if isSortActive
              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                i.fa.fa-times-thin

        else
          a.board-header-btn.js-log-in(
            title="{{_ 'log-in'}}")
            i.fa.fa-sign-in
            span {{_ 'log-in'}}

  .board-header-btns.right
    if currentBoard
      if isMiniScreen
        if currentUser
          with currentBoard
            a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
              i.fa.fa-pencil-square-o

          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
            if showStarCounter
              span
                = currentBoard.stars

          a.board-header-btn.js-auto-width-board(
            title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}")
            i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}")

          a.board-header-btn.js-keyboard-shortcuts-toggle(
            title="{{#if isKeyboardShortcuts}}{{_ 'click-to-disable-keyboard-shortcuts'}}{{else}}{{_ 'click-to-enable-keyboard-shortcuts'}}{{/if}}")
            i.fa(class="fa-solid fa-{{#if isKeyboardShortcuts}}computer-mouse{{else}}keyboard{{/if}}")

          a.board-header-btn(
            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
            title="{{_ currentBoard.permission}}")
            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
            span {{_ currentBoard.permission}}

          a.board-header-btn.js-watch-board(
            title="{{_ watchLevel }}")
            if $eq watchLevel "watching"
              i.fa.fa-eye
            if $eq watchLevel "tracking"
              i.fa.fa-bell
            if $eq watchLevel "muted"
              i.fa.fa-bell-slash
            span {{_ watchLevel}}
          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
            i.fa.fa-sort
            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
            if isSortActive
              a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
                i.fa.fa-times-thin

        else
          a.board-header-btn.js-log-in(
            title="{{_ 'log-in'}}")
            i.fa.fa-sign-in
            span {{_ 'log-in'}}

      if isSandstorm
        if currentUser
          a.board-header-btn.js-open-archived-board
            i.fa.fa-archive
            span {{_ 'archives'}}

      //if showSort
      //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
      //    i.fa(class="{{directionClass}}")
      //    span {{_ 'sort'}}{{_ listSortShortDesc}}

      a.board-header-btn.js-open-filter-view(
          title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
          class="{{#if Filter.isActive}}emphasis{{/if}}")
        i.fa.fa-filter
        span {{#if Filter.isActive}}{{_ 'filter-on'}}{{else}}{{_ 'filter'}}{{/if}}
        if Filter.isActive
          a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
            i.fa.fa-times-thin

      a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
        i.fa.fa-search
        span {{_ 'search'}}

      unless currentBoard.isTemplatesBoard
        a.board-header-btn.js-toggle-board-view(
          title="{{_ 'board-view'}}")
          i.fa.fa-caret-down
          if $eq boardView 'board-view-swimlanes'
            i.fa.fa-th-large
          if $eq boardView 'board-view-lists'
            i.fa.fa-trello
          if $eq boardView 'board-view-cal'
            i.fa.fa-calendar
          span {{#if boardView}}{{_ boardView}}{{else}}{{_ 'board-view-swimlanes'}}{{/if}}

      if canModifyBoard
        a.board-header-btn.js-multiselection-activate(
            title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
            class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
          i.fa.fa-check-square-o
          span {{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}
          if MultiSelection.isActive
            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
              i.fa.fa-times-thin

      .separator
      a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
        i.fa.fa-navicon

template(name="boardVisibilityList")
  ul.pop-over-list
    li
      with "private"
        a.js-select-visibility
          i.fa.fa-lock.colorful
          | {{_ 'private'}}
          if visibilityCheck
            i.fa.fa-check
          span.sub-name {{_ 'private-desc'}}
    if notAllowPrivateVisibilityOnly
      li
        with "public"
          a.js-select-visibility
            i.fa.fa-globe.colorful
            | {{_ 'public'}}
            if visibilityCheck
              i.fa.fa-check
            span.sub-name {{_ 'public-desc'}}

template(name="boardChangeVisibilityPopup")
  +boardVisibilityList

template(name="boardChangeWatchPopup")
  ul.pop-over-list
    li
      with "watching"
        a.js-select-watch
          i.fa.fa-eye.colorful
          | {{_ 'watching'}}
          if watchCheck
            i.fa.fa-check
          span.sub-name {{_ 'watching-info'}}
    li
      with "tracking"
        a.js-select-watch
          i.fa.fa-bell.colorful
          | {{_ 'tracking'}}
          if watchCheck
            i.fa.fa-check
          span.sub-name {{_ 'tracking-info'}}
    li
      with "muted"
        a.js-select-watch
          i.fa.fa-bell-slash.colorful
          | {{_ 'muted'}}
          if watchCheck
            i.fa.fa-check
          span.sub-name {{_ 'muted-info'}}

template(name="boardChangeViewPopup")
  ul.pop-over-list
    li
      with "board-view-swimlanes"
        a.js-open-swimlanes-view
          i.fa.fa-th-large.colorful
          | {{_ 'board-view-swimlanes'}}
          if $eq Utils.boardView "board-view-swimlanes"
            i.fa.fa-check
    li
      with "board-view-lists"
        a.js-open-lists-view
          i.fa.fa-trello.colorful
          | {{_ 'board-view-lists'}}
          if $eq Utils.boardView "board-view-lists"
            i.fa.fa-check
    li
      with "board-view-cal"
        a.js-open-cal-view
          i.fa.fa-calendar.colorful
          | {{_ 'board-view-cal'}}
          if $eq Utils.boardView "board-view-cal"
            i.fa.fa-check

template(name="createBoard")
  form
    label
      | {{_ 'title'}}
      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
    if visibilityMenuIsOpen.get
      +boardVisibilityList
    else
      p.quiet
        if $eq visibility.get 'public'
          span.fa.fa-globe.colorful
          = " "
          | {{{_ 'board-public-info'}}}
        else
          span.fa.fa-lock.colorful
          = " "
          | {{{_ 'board-private-info'}}}
        a.js-change-visibility {{_ 'change'}}.
    a.flex.js-toggle-add-template-container
      .materialCheckBox#add-template-container
      span {{_ 'add-template-container'}}
    input.primary.wide(type="submit" value="{{_ 'create'}}")
    span.quiet
      | {{_ 'or'}}
      a.js-import-board {{_ 'import'}}
    span.quiet
      | /
      a.js-board-template {{_ 'template'}}

//template(name="listsortPopup")
//  h2
//   | {{_ 'list-sort-by'}}
//  hr
//  ul.pop-over-list
//    each value in allowedSortValues
//     li
//      a.js-sort-by(name="{{value.name}}")
//        if $eq sortby value.name
//           i(class="fa {{Direction}}")
//        | {{_ value.label }}{{_ value.shortLabel}}
//        if $eq sortby value.name
//           i(class="fa fa-check")

template(name="boardChangeTitlePopup")
  form
    label
      | {{_ 'title'}}
      input.js-board-name(type="text" value=title autofocus dir="auto")
    label
      | {{_ 'description'}}
      textarea.js-board-desc(dir="auto")= description
    input.primary.wide(type="submit" value="{{_ 'rename'}}")

template(name="boardCreateRulePopup")
  p {{_ 'close-board-pop'}}
  button.js-confirm.negate.full(type="submit") {{_ 'archive'}}


template(name="cardsSortPopup")
  ul.pop-over-list
    li
      a.js-sort-due {{_ 'due-date'}}
      hr
    li
      a.js-sort-title {{_ 'title-alphabetically'}}
      hr
    li
      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
      hr
    li
      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}