{{ define "main" }}
<section class="talk">

	<header class="tag-{{ anchorize (delimit .Params.tags "" ) }}">
	<div class="tags">
		{{ range .Params.tags }}
			{{ range first 1 (where $.Site.Data.categories "key" .) }}
			<span>{{ .name }}</span>
			{{ end }}
		{{ end }}
	</div>

	<h1 class="text">{{ .Title }}</h1>
	<span class="language {{ anchorize .Params.language }}"></span>
	</header>

	<div class="info">
		<div class="complexity">{{ .Params.level }}</div>
		<div class="type type-{{ anchorize .Params.format }}">{{ .Params.format }}</div>

		<div class="detail">
			<ul class="speakers">
				{{ range where .Site.RegularPages "Params.key" "in" .Params.speakers }}
				<li>
					<a class="visually-hidden" aria-hidden="true" href="/speakers/{{ .Params.key }}">{{ .Params.name }}</a>
					<a class="speaker" href="/speakers/{{ .Params.key }}">
						<div class="speaker-img" style="background-image: url({{ .Params.photoURL }});"></div>
						<strong class="speaker-name">{{ .Params.name }}</strong>
						<span class="speaker-country">{{ .Params.city }}</span>
						<div class="speaker-company">{{ .Params.company }}</div>
					</a>
				</li>
				{{ end }}
			</ul>
			<div class="content">{{ .Content }}</div>
		</div>

	</div>


	<div class="media">
		{{ if .Params.videoId }}
		<div class="video" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
			<iframe src="//www.youtube.com/embed/{{ .Params.videoId }}?autoplay=1"
			        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen
			        title="YouTube Video"></iframe>
		</div>
		{{ end }}

		{{ if .Params.presentation }}
		<a class="social-slides"
		   href="{{ .Params.presentation }}"
		   rel="noreferrer"
		   target="_blank">
			{{ partial "icon.html" "slides" }}
			Voir les slides
		</a>
		{{ end }}

	</div>

</section>
{{ end }}