@if ((board$ | async); as board) {
  <div
    class="boards-list--container"
    [ngClass]="{ '-free' : board.isFree }"
    #container
    cdkDropList
    [cdkDropListDisabled]="!board.editable"
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="moveList(board, $event)"
    >
    @for (boardWidget of boardWidgets; track trackByQueryId($index, boardWidget)) {
      <div
        class="boards-list--item"
        cdkDrag
        [cdkDragData]="boardWidget"
        >
        @if (board.editable) {
          <span
            class="boards-list-item-handle icon icon-drag-handle"
          cdkDragHandle></span>
        }
        <board-list [resource]="boardWidget"
          [board]="board"
          (onRemove)="removeList(board, boardWidget)"
          (visibilityChange)="changeVisibilityOfList(board, boardWidget, $event)" />
      </div>
    }
    @if (showHiddenListWarning) {
      <span class="boards-list--tooltip">
        <i id="boards-list--warning" class="icon icon-attention"></i>
        <tool-tip
          class="sr-only position-absolute"
          popover="manual"
          for="boards-list--warning"
          id="boards-list--warning-tooltip"
          data-direction="s"
        >{{ text.hiddenListWarning }}</tool-tip>
      </span>
    }
    @if (board.editable) {
      <div class="boards-list--add-item -no-text-select"
        role="button"
        tabindex="0"
        (click)="addList(board)"
        (keydown.enter)="addList(board)"
        (keydown.space)="addList(board)">
        <div class="boards-list--add-item-text">
          <op-icon icon-classes="icon-add icon-context" />
          <span [textContent]="text.addList"></span>
        </div>
      </div>
    }
  </div>
}