<%= tag.div class: "card-columns hide-scrollbar", data: {
controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list",
drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
collapsible_columns_board_value: board.id,
collapsible_columns_collapsed_class: "is-collapsed",
collapsible_columns_no_transitions_class: "no-transitions",
collapsible_columns_title_not_visible_class: "is-off-screen",
navigable_list_supports_vertical_navigation_value: false,
navigable_list_has_nested_navigation_value: true,
navigable_list_prevent_handled_keys_value: true,
navigable_list_auto_select_value: false,
navigable_list_auto_scroll_value: false,
action: "
keydown->navigable-list#navigate
dragstart->drag-and-drop#dragStart
dragover->drag-and-drop#dragOver
dragenter->drag-and-strum#dragEnter
drop->drag-and-drop#drop
dragend->drag-and-drop#dragEnd
click@document->navigable-list#deselectWhenClickingOutside" } do %>
<%= render "boards/show/not_now", board: board %>
<%= render "boards/show/stream", board: board, page: page %>
<%= render partial: "boards/show/column", collection: board.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %>
<%= render "boards/show/closed", board: board %>
<%= render "boards/show/menu/columns", board: board %>
<% end %>