div.kanban-table(
    tg-kanban-squish-column,
    tg-kanban-sortable,
    ng-class="{'zoom-0': ctrl.zoomLevel == 0}"
)
    div.kanban-table-header
        div.kanban-table-inner
            h2.task-colum-name(ng-repeat="s in usStatusList track by s.id",
                               ng-style="{'border-top-color':s.color}",
                               tg-bo-title="s.name",
                               ng-class='{vfold:folds[s.id]}',
                               tg-class-permission="{'readonly': '!modify_task'}")
                span(tg-bo-bind="s.name")
                div.options
                    a.option(
                        href=""
                        ng-click='foldStatus(s)'
                        title="{{'KANBAN.TITLE_ACTION_FOLD' | translate}}"
                        ng-class='{hidden:folds[s.id]}'
                    )
                        tg-svg(svg-icon="icon-fold-column")
                    a.option.hunfold(
                        href=""
                        ng-click='foldStatus(s)'
                        title="{{'KANBAN.TITLE_ACTION_UNFOLD' | translate}}"
                        ng-class='{hidden:!folds[s.id]}'
                    )
                        tg-svg(svg-icon="icon-unfold-column")
                    a.option(
                        href=""
                        title="{{'KANBAN.TITLE_ACTION_ADD_US' | translate}}"
                         ng-click="ctrl.addNewUs('standard', s.id)"
                         tg-check-permission="add_us"
                         ng-hide="s.is_archived"
                    )
                        tg-svg.add-action(svg-icon="icon-add")

                    a.option(
                        href=""
                        title="{{'KANBAN.TITLE_ACTION_ADD_BULK' | translate}}"
                        ng-click="ctrl.addNewUs('bulk', s.id)"
                        tg-check-permission="add_us"
                        ng-hide="s.is_archived"
                    )
                        tg-svg.bulk-action(svg-icon="icon-bulk")

                    a.option.e2e-archived(
                        href=""
                        ng-attr-title="{{title}}"
                        ng-class="class"
                        ng-if="s.is_archived"
                        tg-kanban-archived-status-header="s")
                        tg-svg.bulk-action(svg-icon="{{class}}")

    div.kanban-table-body
        div.kanban-table-inner
            div.kanban-uses-box.task-column(ng-class='{vfold:folds[s.id]}',
                ng-repeat="s in ::usStatusList track by s.id",
                tg-kanban-wip-limit="s",
                tg-kanban-column-height-fixer,
                tg-bind-scope
            )
                .card-placeholder(
                    ng-if="ctrl.showPlaceHolder(s.id)"
                    ng-include="'common/components/kanban-placeholder.html'"
                )

                tg-card.card.ng-animate-disabled(
                    tg-repeat="us in usByStatus.get(s.id.toString()) track by us.getIn(['model', 'id'])",
                    ng-class="{'kanban-task-maximized': ctrl.isMaximized(s.id), 'kanban-task-minimized': ctrl.isMinimized(s.id), 'kanban-task-selected': ctrl.selectedUss[us.get('id')], 'ui-multisortable-multiple': ctrl.selectedUss[us.get('id')]}"
                    tg-class-permission="{'readonly': '!modify_task'}"
                    tg-bind-scope,
                    on-toggle-fold="ctrl.toggleFold(id)"
                    on-click-edit="ctrl.editUs(id)"
                    on-click-assigned-to="ctrl.changeUsAssignedTo(id)"
                    project="project"
                    item="us"
                    zoom="ctrl.zoom"
                    zoom-level="ctrl.zoomLevel"
                    archived="ctrl.isUsInArchivedHiddenStatus(us.get('id'))"
                    ng-click="$event.ctrlKey && ctrl.toggleSelectedUs(us.get('id'))"
                )

                div.kanban-column-intro(ng-if="s.is_archived", tg-kanban-archived-status-intro="s")