.board{ ":class" => '{ "is-draggable": !list.preset, "is-expandable": list.isExpandable, "is-collapsed": !list.isExpanded, "board-type-assignee": list.type === "assignee" }',
  ":data-id" => "list.id" }
  .board-inner
    %header.board-header{ ":class" => '{ "has-border": list.label && list.label.color }', ":style" => "{ borderTopColor: (list.label && list.label.color ? list.label.color : null) }", "@click" => "toggleExpanded($event)" }
      %h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' }
        %i.fa.fa-fw.board-title-expandable-toggle{ "v-if": "list.isExpandable",
          ":class": "{ \"fa-caret-down\": list.isExpanded, \"fa-caret-right\": !list.isExpanded }",
          "aria-hidden": "true" }
        = render_if_exists "shared/boards/components/list_milestone"

        %a.user-avatar-link.js-no-trigger{ "v-if": "list.type === \"assignee\"", ":href": "list.assignee.path" }
          -# haml-lint:disable AltText
          %img.avatar.s20.has-tooltip{ height: "20", width: "20", ":src": "list.assignee.avatar", ":alt": "list.assignee.name" }

        %span.board-title-text.has-tooltip.block-truncated{ "v-if": "list.type !== \"label\"",
          ":title" => '((list.label && list.label.description) || list.title || "")', data: { container: "body" } }
          {{ list.title }}

        %span.board-title-sub-text.prepend-left-5.has-tooltip{ "v-if": "list.type === \"assignee\"",
          ":title" => '(list.assignee && list.assignee.username || "")' }
          @{{ list.assignee.username }}

        %span.has-tooltip{ "v-if": "list.type === \"label\"",
          ":title" => '(list.label ? list.label.description : "")',
          data: { container: "body", placement: "bottom" },
          class: "badge color-label title board-title-text",
          ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.textColor ? list.label.textColor : \"#2e2e2e\") }" }
          {{ list.title }}

        - if can?(current_user, :admin_list, current_board_parent)
          %board-delete{ "inline-template" => true,
            ":list" => "list",
            "v-if" => "!list.preset && list.id" }
            %button.board-delete.has-tooltip.float-right{ type: "button", title: _("Delete list"), "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
              = icon("trash")
        .issue-count-badge.text-secondary{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"', ":title": "counterTooltip", "v-tooltip": true, data: { placement: "top" } }
          %span.issue-count-badge-count
            %icon.mr-1{ name: "issues" }
            {{ list.issuesSize }}
          = render_if_exists "shared/boards/components/list_weight"

        %button.issue-count-badge-add-button.btn.btn-sm.btn-default.ml-1.has-tooltip.js-no-trigger-collapse{ type: "button",
          "@click" => "showNewIssueForm",
          "v-if" => "isNewIssueShown",
          "aria-label" => _("New issue"),
          "title" => _("New issue"),
          data: { placement: "top", container: "body" } }
          = icon("plus", class: "js-no-trigger-collapse")

    %board-list{ "v-if" => 'list.type !== "blank" && list.type !== "promotion"',
      ":list" => "list",
      ":issues" => "list.issues",
      ":loading" => "list.loading",
      ":disabled" => "disabled",
      ":issue-link-base" => "issueLinkBase",
      ":root-path" => "rootPath",
      ":groupId" => ((current_board_parent.id if @group) || 'null'),
      "ref" => "board-list" }
    - if can?(current_user, :admin_list, current_board_parent)
      %board-blank-state{ "v-if" => 'list.id == "blank"' }
    = render_if_exists 'shared/boards/board_promotion_state'