<%= tag.div data: {
      controller: "drag-and-drop drag-and-strum",
      drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
      drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
      action: "
        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" } do %>
  <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collection-value="<%= collection.id %>" data-collapsible-columns-collapsed-class="is-collapsed" data-collapsible-columns-no-transitions-class="no-transitions">
    <div class="card-columns__left">
      <%= render "collections/show/not_now", collection: collection %>
    </div>

    <%= render "collections/show/stream", collection: collection, page: page %>

    <div class="card-columns__right">
      <%= render partial: "collections/show/column", collection: collection.columns.sorted, cached: ->(column){ [ column, column.leftmost?, column.rightmost? ] } %>
      <%= render "collections/show/closed", collection: collection %>

      <%= render "collections/show/menu/columns", collection: collection %>
    </div>
  </div>
<% end %>

