<!-- Begin Schedule Section -->
<section id="schedule" class="schedule">
    <div class="content-wrapper">
        {% for day in site.data.schedule %}
        <div class="schedule-table col-lg-8 col-md-10 col-md-offset-1">
            <h4 class="schedule-table-heading">{{ day.dateReadable }}</h4>
            <div class="timeslot track-header stick-header">
                <div class="track-header-label">Day {{ forloop.index }}</div>
                <div class="timeslot-elements flexbox-wrapper">
                    {% for track in day.tracks %}
                    {% assign trackColWidth = 12 | divided_by: forloop.length %}
                    <div class="track-header-slot col-md-{{ trackColWidth }} flexbox-item-height hidden-xs">
                        <h5 class="track-header-title">{{ track.title }}</h5>
                    </div>
                    {% endfor %}
                    <div class="track-header-slot col-xs-12 visible-xs">
                        <h5 class="slot-detail track-header-title"></h5>
                    </div>
                </div>
            </div>
            {% for timeslot in day.timeslots %}
            <div class="timeslot" itemtype="http://schema.org/subEvent">
                <div class="timeslot-label">
                    <time class="start-time" itemprop="startDate" datetime="{{ day.dateReadable }}T{{ timeslot.startTime }}">
                        {% assign startTime = timeslot.startTime | split: ":" %}
                        {{ startTime[0] }}<span>{{ startTime[1] }}</span>
                    </time>
                    <time class="end-time" itemprop="endDate" datetime="{{ day.dateReadable }}T{{ timeslot.endTime }}">
                        {% assign endTime = timeslot.endTime | split: ":" %}
                        {{ endTime[0] }}<span>{{ endTime[1] }}</span>
                    </time>
                </div>
                <div class="timeslot-elements flexbox-wrapper">
                    {% for slot in timeslot.sessionIds %}
                        {% assign slotColWidth = 12 | divided_by: forloop.length %}
                        {% assign slotIndex = forloop.index0 %}
                        {% if slot != 404 %}
                            {% for session in site.data.sessions %}
                                {% if slot == session.id and session.service == null %}
                                <div id="session-{{ session.id }}" class="slot col-md-{{ slotColWidth }} col-xs-12 flexbox-item-height" data-slot-detail="{{ day.tracks[slotIndex].title }}" data-toggle="modal" data-target="#sessionDetail-{{ session.id }}">
                                    <div class="color-line" style="background: {{ day.tracks[slotIndex].color }}"></div>
                                    <div class="slot-content" style="border-right-color: {{ day.tracks[slotIndex].color }}">
                                      <h5 class="slot-title" itemprop="name">{{ session.title }}</h5>
                                      <span class="slot-title" itemprop="description">{{ session.description }}</span>
                                        <span class="slot-language">{{session.language | upcase}}</span>
                                        <ul class="slot-speakers">
                                            {% for speaker in site.data.speakers %}
                                                {% for session_speaker in session.speakers %}
                                                    {% if session_speaker == speaker.id %}
                                                    <li itemprop="performer"><div class="speaker-img flow-img img-circle" style="background-image: url({{ site.baseurl | append: '/img/people/' | append: speaker.thumbnailUrl }})"></div>
                                                    <p class="speaker-name">{{ speaker.name }} {{ speaker.surname }}
                                                      <span class="speaker-position">{{ speaker.company }}</span>
                                                    </p>
                                                    </li>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                                {% elsif slot == session.id and session.service != null %}
                                <div class="slot col-md-{{ slotColWidth }} col-xs-12 service-slot flexbox-item-height" data-slot-detail="{{ session.place }}">
                                    <div class="color-line"></div>
                                    <div class="slot-content">
                                        <h5 class="slot-title" itemprop="name">{{ session.title }}</h5>
                                        {% if session.description != null %}
                                        <p class="service-description">{{ session.description }}</p>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endif %}
                            {% endfor %}
                        {% else %}
                        <div class="slot col-md-{{ slotColWidth }} hidden-xs blank-col flexbox-item-height"></div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</section>
<!-- End Schedule Section -->
