<!-- Begin Speakers List-->
<section id="speakers" class="speakers">
    <div class="content-wrapper">
        <div class="col-lg-10 col-lg-offset-1">
            <div class="row text-left appear-animation-trigger">
                {% for speaker in site.data.speakers %}
                <div class="effect-wrapper appear-animation col-md-4 col-sm-6 col-xs-12">
                    <div class="lily-effect ribbon-activator">
                        <div class="lily-head" data-toggle="modal" data-target="#speakerDetail-{{ speaker.id }}">
                            <figure class="waves-effect waves-block waves-light" style="background-image: url({{ site.baseurl | append: site.thumbnailsFolder | append: speaker.thumbnailUrl }})">
                                <div class="overlay solid-overlay"></div>
                                {% if speaker.ribbon != null %}
                                <ul class="ribbon-wrapper">
                                    {% for ribbon in speaker.ribbon %}
                                    <li class="{{ ribbon["abbr"] | downcase }}">
                                        <p class="ribbon abbr">{{ ribbon["abbr"] }}</p>
                                        <p class="ribbon full-title">{{ ribbon["title"] }}</p>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                                {% if site.showSessions %}
                                <figcaption>
                                    <h2 class="name">{{ speaker.name }} <span>{{ speaker.surname }}</span></h2>
                                    <p class="position">{{ speaker.company }}</p>
                                </figcaption>
                                {% endif %}
                            </figure>
                        </div>
                        <div class="lily-bottom">
                            <ul class="slider">
                                {% if site.showSessions %} 
                                    {% for session in site.data.sessions %} 
                                        {% for session_speaker in session.speakers %} 
                                            {% if session_speaker == speaker.id %}
                                                <li class="title slider-item animated fadeInRight hidden">{{ session.title }}</li>
                                            {% endif %} 
                                        {% endfor %} 
                                    {% endfor %} 
                                {% else %}
                                    <h2 class="name">{{ speaker.name }} <span>{{ speaker.surname }}</span></h2>
                                    <p class="position">{{ speaker.company }}</p>
                                {% endif %}
                            </ul>
                        </div>
                        <a href="#" class="slider-next-item hidden">Next</a>
                    </div>
                </div>
                {% endfor %}
            </div> 
            <a href="{{ site.c4pUrl }}" class="bottom-section-link btn btn-primary waves-effect waves-button waves-light waves-float" target="_blank">Become a speaker</a>     
        </div>
    </div>
</section>
<!-- End Speakers List -->