{% assign start_time = page.timeline | first %}
{% capture offset %}{% include minutes.liquid time=start_time %}{% endcapture %}
<div class="schedule">
  <ul class="schedule-timeline" style="min-width: {{ page.schedule | size | times: 120 }}px">
    {% for time in page.timeline %}
    <li class="schedule-time">{{ time }} </li>
    {% endfor %}
  </ul>
  <ul class="schedule-group">
    {% for day in page.schedule %}
    <li class="schedule-day">
      <h2 class="schedule-header">{{ day.name }}</h2>
      {% if day.events %}
      <ul class="schedule-events" style="height: {{ page.timeline | size | times: 40 }}px">
      {% for event in day.events %}
        {% capture start %}{% include minutes.liquid time=event.start %}{% endcapture %}
        {% capture end %}{% include minutes.liquid time=event.end %}{% endcapture %}
        {% assign top = start | minus: offset | times: 40 | divided_by: 30 %}
        {% assign height = end | minus: start | times: 40 | divided_by: 30 %}
        <li class="schedule-event {% if event.class %}{{ event.class }}{% else %}{{ event.name | slugify }}{% endif %}"
            style="top: {{ top }}px; height: {{ height }}px;">
          <div class="name">{{ event.name }}</div>
          <div class="time">{{ event.start }}–{{ event.end }}</div>
          {% if event.location %}
          <div class="location">{{ event.location }}</div>
          {% endif %}
        </li>
      {% endfor %}
      </ul>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>