datamad2017/_includes/sessions-modals.html

<!-- Begin Sessions Modals -->
<div class="modals" class="modals">
	{% for session in site.data.sessions %}
		<div class="modal fade text-left people-modal" id="sessionDetail-{{ session.id }}" tabindex="-1" role="dialog" aria-labelledby="sessionDetailLabel-{{ session.id }}" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-body">
						<div class="close">
							<svg class="icon icon-cross" viewBox="0 0 32 32">
								<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-cross"></use>
							</svg>
							<div class="close-mask" data-dismiss="modal"></div>
						</div>
						<h4>{{ session.title }}</h4>
						{% if session.language != null %}
						<span class="theme-metadata"><span class="caption">Language: </span>{{ session.language }}</span>
						{% endif %}
						{% if session.complexity != null %}
						<span class="theme-metadata"><span class="caption">Complexity: </span>{{ session.complexity }}</span>
						{% endif %}
						{% if session.video %}
						<div class="theme-video embed-responsive embed-responsive-16by9">
						    <iframe class="embed-responsive-item" src="{{ session.video }}"></iframe>
						</div>
						{% endif %}
						<p class="theme-description">{{ session.description }}</p>
						{% if session.presentation %}
						<a class="theme-presentation" href="{{ session.presentation }}" title="Presentation" target="_blank">View presentation</a>
						{% endif %}
						<hr>
						<div class="people-details">
							{% for speaker in site.data.speakers %}
								{% for session_speaker in session.speakers %}
									{% if session_speaker == speaker.id %}
									<div class="row">
										<div class="col-md-2 col-sm-2">
											<div class="flow-img img-circle people-img" style="background-image: url({{ site.baseurl | append: '/img/people/' | append: speaker.thumbnailUrl }})"></div>
										</div>
										<div class="col-md-10 col-sm-10 details">
											<p class="name">{{ speaker.name }} {{ speaker.surname }}
												<span class="position">{{ speaker.title }}, {{ speaker.company }}</span>
											</p>
											{% if speaker.ribbon != null %}
											<div class="modal-ribbon-wrapper">
					                            {% for ribbon in speaker.ribbon %}
					                               <a class="modal-ribbon" href="{{ ribbon["url"] }}" target="_blank">{{ ribbon["title"] }}</a>   
					                            {% endfor %}
					                        </div>
					                        {% endif %}
											<p class="about">{{ speaker.bio }}</p>
											<ul class="social">
												{% for social in speaker.social %}
													<li>
														<a href="{{ social["link"] }}" target="_blank">
															<svg class="icon icon-{{ social["name"] }}" viewBox="0 0 30 32">
																<use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-{{ social["name"] }}"></use>
															</svg>
														</a>
													</li>
												{% endfor %}
											</ul>
										</div>
									</div>
									{% endif %}
								{% endfor %}
							{% endfor %}
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endfor %}
</div>
<!-- End Speakers Modals -->