{{ define "main" }}
  <section class="mb-8">
    <div class="container flex flex-col gap-5">
      <div>
        <h2>{{ .Params.Title }}</h2>
        <div class="content-container">
          {{ if eq .Params.Mediatype "talk" }}
            Presented by
          {{ else if eq .Params.Mediatype "demo" }}
            Presented by
          {{ else if eq .Params.Mediatype "chat" }}
            Fireside chat with
          {{ else if eq .Params.Mediatype "podcast" }}
            A podcast hosted by
          {{ end }}
          {{ $lastSpeaker := (add (len .Params.Speakers) -1) }}
          {{ range $i, $s := .Params.Speakers }}
            <a href="">{{ $s.name }}</a>{{ if not (eq $i $lastSpeaker) }},{{ end }}
          {{ end }}
          {{ with .GetPage (path.Join "/media" .Params.conference) }}
            at
            <a href="{{ .RelPermalink }}">{{ .Title }}</a>
          {{ end }}
        </div>
      </div>

      <div class="flex flex-col lg:flex-row gap-5">
        <div class="flex-grow flex flex-col gap-5">
          {{ range .Params.Videos }}
            <div class="video-container">
              {{ if eq .service "vimeo" }}
                <iframe
                  src="{{ .embed }}"
                  frameborder="0"
                  allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
                  style="width:100%;height:100%;"
                  title="{{ .title }}">
                </iframe>
              {{ else if eq .service "youtube" }}
                <iframe
                  src="{{ .embed }}"
                  title="{{ .title }}"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  referrerpolicy="strict-origin-when-cross-origin"
                  style="width:100%;height:100%;"
                  allowfullscreen>
                </iframe>
              {{ else }}
                <a href="{{ .embed }}">{{ .title }}</a>
              {{ end }}
            </div>
          {{ end }}
          {{ range .Params.Notes }}
            {{ partial "components/bignote.html" . }}
          {{ end }}
        </div>
        <div class="flex flex-col gap-5 lg:w-1/3">
          <div class="dark:text-white content-container content">
            {{ or .Content .Params.description }}
          </div>

          {{ $hasGoodSpeaker := false }}
          {{ range .Params.Speakers }}
            {{ if or .bio .image }}
              {{ $hasGoodSpeaker = true }}
            {{ end }}
          {{ end }}
          {{ if $hasGoodSpeaker }}
            <div>
              <h4 class="mb-2">About the speaker{{ if (gt (len .Params.Speakers) 1) }}s{{ end }}</h4>
              <div class="flex flex-col gap-3">
                {{ range .Params.Speakers }}
                  <div class="">
                    <div class="">
                      <div class="font-bold dark:text-white">{{ .name }}</div>
                      {{ if or .bio .image }}
                        <div class="content-container">
                          {{ if .image }}
                            {{ $imageurl := resources.Get .image }}
                            {{ if $imageurl}}
                              <div
                                class="rounded-full aspect-square overflow-hidden w-24 float-right ml-2 mb-2"
                                style="shape-outside: circle(50%); background: url({{ $imageurl.RelPermalink }}) center top no-repeat; background-size: cover;"
                                title="{{ .name }}"
                              ></div>
                            {{ end }}
                          {{ end }}
                          {{ if .bio }}
                            {{ .bio | markdownify }}
                          {{ end }}
                        </div>
                      {{ end }}
                    </div>
                  </div>
                {{ end }}
              </div>
            </div>
          {{ end }}

          <div class="flex flex-col gap-2">
            {{ range .Params.Videos }}
              {{ if .download_link }}
                <a class="btn btn-outline-primary" href="{{ .download_link }}">Download video: {{ .title }}</a>
              {{ end }}
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </section>
{{ end }}