{{ define "main" }}
  <section class="mb-8">
    <div class="container flex flex-col gap-5">
      <div>
        <h2>{{ .Params.Title }}</h2>
        <div>
          {{ 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 }}
          at
          <a href="">{{ .Params.Conference }}</a>
        </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">
              <iframe
                src="{{ .embed }}"
                frameborder="0"
                allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
                style="width:100%;height:100%;"
                title="{{ .title }}">
              </iframe>
            </div>
          {{ end }}
        </div>
        <div class="flex flex-col gap-5 lg:w-1/3">
          <div class="dark:text-white">
            {{ .Content }}
          </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="flex gap-8 items-center">
                    <div class="grow">
                      <div class="font-bold dark:text-white">{{ .name }}</div>
                      {{ if .bio }}
                        <div>
                          {{ .bio | markdownify }}
                        </div>
                      {{ end }}
                    </div>
                    {{ if .image }}
                      {{ $imageurl := resources.Get .image }}
                      {{ if $imageurl}}
                        <div
                          class="rounded-full aspect-square overflow-hidden shrink-0 w-24 self-start"
                          style="background: url({{ $imageurl.RelPermalink }}) center top no-repeat; background-size: cover;"
                          title="{{ .name }}"
                        ></div>
                      {{ end }}
                    {{ end }}
                  </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 }}