<div class="events__column">
  <h3 class="events__column-header">
    <span><%= column.title %></span>

    <% if column.events_by_hour.any? %>
      <%= link_to events_day_timeline_column_path(column, day: column.day_timeline.day.to_date), class: "events__maximize-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
        <%= icon_tag "grid", class: "translucent" %>
        <span class="for-screen-reader">Expand column</span>
      <% end %>
    <% end %>
  </h3>
  <% column.events_by_hour.each do |hour, events| %>
    <%= events_at_hour_container(column, hour) do %>
      <%= render partial: "events/event", collection: events, cached: true %>
      <%= local_datetime_tag events.first.created_at, class: "event__timestamp txt-small translucent" %>
    <% end %>
  <% end %>

  <% if column.has_more_events? %>
    <div class="events__column-footer fill-highlight txt-x-small border-radius" style="grid-column-start: <%= column.index %>">
      Showing the 100 most recent (<%= column.hidden_events_count %> are hidden)
    </div>
  <% end %>
</div>
