<div class="columns">
  <div class="column is-2 is-narrow">
    <aside class="menu">
      <p class="menu-label">
        Academiejaar
      </p>
      <ul class="menu-list">
        <% academic_years_event_items.each do |year, item| %>
        <% if @item_rep && @item_rep.path == item.path %>
        <li>
          <a href="#" class="is-active">
            <%= pretty_year(year) %>
          </a>
        </li>
        <% else %>
        <li>
          <%= link_to pretty_year(year), item %>
        </li>
        <% end %>
        <% end %>
      </ul>
      <p class="menu-label">
        Tag
      </p>
      <ul class="menu-list">
        <% tag_event_items.each do |tag, item| %>
        <% if @item_rep && @item_rep.path == item.path %>
        <li>
          <a href="#" class="is-active">
            <%= tag %>
          </a>
        </li>
        <% else %>
        <li>
          <%= link_to tag, item %>
        </li>
        <% end %>
        <% end %>
      </ul>
    </aside>
  </div>

  <div class="column">
    <% unless upcoming_events_in_year_or_tag(@item).empty? %>
      <div class="content">
        <h1>Upcoming events</h1>
      </div>
      <% upcoming_events_in_year_or_tag(@item).each_slice(1) do |slice| %>
      <div class="columns">
        <% slice.each do |event| %>
        <div class="tile is-parent ">
          <%= render '/partials/_events_tile.*', event: event %>
        </div>
        <% end %>
      </div>
      <% end %>
    <% end %>

    <% unless past_events_in_year_or_tag(@item).empty? %>
      <div class="content">
        <h1>Past events</h1>
      </div>
      <% past_events_in_year_or_tag(@item).each_slice(1) do |slice| %>
      <div class="columns">
        <% slice.each do |event| %>
        <div class="tile is-parent ">
          <%= render '/partials/_events_tile.*', event: event %>
        </div>
        <% end %>
      </div>
      <% end %>
    <% end %>

    <% if past_events_in_year_or_tag(@item).empty? and upcoming_events_in_year_or_tag(@item).empty? %>
      <div class="content has-text-centered">
        <h1>Sorry.</h1>
        <h2>No events planned yet this year.</h2>
        <h4 class="has-text-grey"><em>Soon™.</em></h4>
      </div>
    <% end %>
  </div>

  <% unless soon_events.empty? %>
    <div class="column is-3 is-narrow">
      <div class="menu">
        <div class="content">
          <h1>
            Soon™
          </h1>
        </div>
        <% soon_events.each do |event| %>
          <%= render '/partials/_soon_tile.*', event: event %>
        <% end %>
      </div>
    </div>
  <% end %>
</div>
