<div class="timeslot-calendar">
  <div class="calendar-heading">
    <%= link_to t('simple_calendar.previous', default: 'Previous'), calendar.url_for_previous_view %>
    <span class="calendar-title">
      <%= start_date.strftime(calendar.date_heading_format_string) %>
    </span>
    <%= link_to t('simple_calendar.next', default: 'Next'), calendar.url_for_next_view %>
  </div>
  <% if calendar.layout == :vertical || calendar.layout == :horizontal %>
  <div class="orientation-wrapper <%=calendar.layout%>">
    <div class="titles-heading">
    <% event_map = date_range.map { |day| calendar.split_into_buckets(sorted_events.fetch(day, [])) } %>
    <% date_range.each_with_index do |day, index| %>
      <div class="title-heading <%=calendar.td_classes_for(day).join(' ')%>" style="<%=calendar.day_height_style%>">
        <div class="day-heading">
          <div class="day-heading-inner">
            <span class="day-weekday">
              <%= t('date.abbr_day_names')[day.wday] %>
            </span>
            <span class="day-date">
              <%= calendar.date_format_string ? day.strftime(calendar.date_format_string) : day %>
            </span>
          </div>
        </div>
        <% if calendar.display_bucket_title %>
        <div class="buckets-heading">
          <% if calendar.layout == :vertical %>
          <div style="width:<%=calendar.grid_width%>"></div>
          <% else %>
          <div style="height:<%=calendar.grid_width%>"></div>
          <% end %>
          <% event_map[index].each do |bucket| %>
          <div class="bucket-heading">
            <%= bucket&.first&.send calendar.display_bucket_title %>
          </div>
          <% end %>
        </div>
        <% end %>
      </div>
    <% end %>
    </div>
    <div class="calendar-body" style="<%=calendar.body_style%>" >
    <% event_map.each_with_index do |buckets, index| %>
      <div class="day-wrapper">
        <% if calendar.layout == :vertical %>
        <div class="day-body <%=calendar.td_classes_for(date_range[index]).join(' ')%>" style="height:<%=calendar.day_size%>px">
        <% else %>
        <div class="day-body <%=calendar.td_classes_for(date_range[index]).join(' ')%>" style="width:<%=calendar.day_size%>px;height:<%=calendar.day_height_px%>px">
        <% end %>
          <% if calendar.display_grid %>
          <div class="hour-indicator-wrapper">
          <% (0..23).each do |hour| %>
            <% if calendar.layout == :vertical %>
            <div class="hour-indicator-cell tscal-vertical tscal-hour-cell" id="hour-<%=hour %>">
              <div class="hour-indicator" style="width:<%=calendar.grid_width%>">
            <% else %>
            <div class="hour-indicator-cell tscal-horizontal tscal-hour-cell" id="hour-<%=hour %>">
              <div class="hour-indicator" style="height:<%=calendar.grid_width%>">
            <% end %>
                <%=hour%>
              </div>
            </div>
          <% end %>
          </div>
          <% end %>
          <% if calendar.display_current_time_indicator %>
            <% if calendar.layout == :vertical %>
            <div class="tscal-current-time-indicator" style="top:<%=calendar.current_time_offset %>px;left:0;right:0;height:0;"></div>
            <% else %>
            <div class="tscal-current-time-indicator" style="left:<%=calendar.current_time_offset %>px;top:0;bottom:0;width:0;"></div>
            <% end %>
          <% end %>
          <% if calendar.layout == :vertical %>
          <div class="buckets-wrapper" style="left:<%=calendar.grid_width%>;right:0;top:0;bottom:0;">
          <% else %>
          <div class="buckets-wrapper" style="top:<%=calendar.grid_width%>;right:0;left:0;bottom:0;">
          <% end %>
          <% buckets.each do |bucket| %>
            <div class="bucket"> 
              <% events_size = calendar.slot_events(bucket, date_range[index]) %>
              <% bucket.each do |event| %>
              <% if calendar.layout == :vertical %>
              <div class="event-wrapper tscal-event-wrapper" style="width:<%=events_size[event][0]%>%;top:<%=events_size[event][3]%>px;left:<%=events_size[event][1]%>%;height:<%=events_size[event][2]%>px">
              <% else %>
              <div class="event-wrapper tscal-event-wrapper" style="height:<%=events_size[event][0]%>%;left:<%=events_size[event][3]%>px;top:<%=events_size[event][1]%>%;width:<%=events_size[event][2]%>px">
              <% end %>
                <% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
                  <% capture_haml(event, &passed_block) %>
                <% else %>
                  <% passed_block.call event %>
                <% end %>
              </div>
              <% end %>
            </div>
          <% end %>
          </div>
        </div>
      </div>
    <% end %>
    </div>
  </div>
  <% elsif calendar.layout == :horizontal_date_on_top %>
  <div class="orientation-wrapper <%=calendar.layout%>">
    <% event_map = date_range.map { |day| calendar.split_into_buckets(sorted_events.fetch(day, [])) } %>
    <% date_range.each_with_index do |day, index| %>
    <div class="outer-day-wrapper <%=calendar.td_classes_for(day).join(' ')%>">
      <div class="day-heading">
        <div class="day-heading-inner">
          <span class="day-weekday">
            <%= t('date.abbr_day_names')[day.wday] %>
          </span>
          <span class="day-date">
            <%= calendar.date_format_string ? day.strftime(calendar.date_format_string) : day %>
          </span>
        </div>
      </div>
      <div class="body-wrapper">
        <% if calendar.display_bucket_title %>
        <div class="buckets-heading">
          <% if calendar.layout == :vertical %>
          <div style="width:<%=calendar.grid_width%>"></div>
          <% else %>
          <div style="height:<%=calendar.grid_width%>"></div>
          <% end %>
          <% event_map[index].each do |bucket| %>
          <div class="bucket-heading">
            <%= bucket&.first&.send calendar.display_bucket_title %>
          </div>
          <% end %>
        </div>
        <% end %>

        <div class="calendar-body" style="<%=calendar.body_style%>" >
        <% buckets = event_map[index] %>
          <div class="day-wrapper">
            <div class="day-body <%=calendar.td_classes_for(date_range[index]).join(' ')%>" style="width:<%=calendar.day_size%>px;height:<%=calendar.day_height_px%>px">
              <% if calendar.display_grid %>
              <div class="hour-indicator-wrapper">
              <% (0..23).each do |hour| %>
                <div class="hour-indicator-cell tscal-horizontal tscal-hour-cell" id="hour-<%=hour %>">
                  <div class="hour-indicator" style="height:<%=calendar.grid_width%>">
                    <%=hour%>
                  </div>
                </div>
              <% end %>
              </div>
              <% end %>
              <% if calendar.display_current_time_indicator %>
                <div class="tscal-current-time-indicator" style="left:<%=calendar.current_time_offset %>px;top:0;bottom:0;width:0;"></div>
              <% end %>
              <div class="buckets-wrapper" style="top:<%=calendar.grid_width%>;right:0;left:0;bottom:0;">
              <% buckets.each do |bucket| %>
                <div class="bucket"> 
                  <% events_size = calendar.slot_events(bucket, date_range[index]) %>
                  <% bucket.each do |event| %>
                  <div class="event-wrapper tscal-event-wrapper" style="height:<%=events_size[event][0]%>%;left:<%=events_size[event][3]%>px;top:<%=events_size[event][1]%>%;width:<%=events_size[event][2]%>px">
                    <% if defined?(Haml) && respond_to?(:block_is_haml?) && block_is_haml?(passed_block) %>
                      <% capture_haml(event, &passed_block) %>
                    <% else %>
                      <% passed_block.call event %>
                    <% end %>
                  </div>
                  <% end %>
                </div>
              <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <% end %>
  </div>
  <% else %>
    <div>Unsupported layout for timeslot_calendar, please contact your webdeveloper</div>
  <% end %>
</div>