{{ 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
          {{ end }}
          {{ range .Params.Speakers }}
              <a href="">{{ .name }}</a>
          {{ end }}
          at
          <a href="">{{ .Params.Conference }}</a>
        </div>
      </div>

      {{ 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 class="dark:text-white">
        {{ .Content }}
      </div>

      {{ $hasGoodSpeaker := false }}
      {{ range .Params.Speakers }}
        {{ if or .bio .image }}
          {{ $hasGoodSpeaker = true }}
        {{ end }}
      {{ end }}
      {{ if $hasGoodSpeaker }}
        <h4>About the speaker{{ if (gt (len .Params.Speakers) 1) }}s{{ end }}</h4>
        {{ range .Params.Speakers }}
          <div class="flex">
            <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 }}
              <div
                class="rounded-full aspect-square overflow-hidden shrink-0 w-32"
                style="background: url({{ $imageurl.RelPermalink }}) center top no-repeat; background-size: cover;"
                title="{{ .name }}"
              ></div>
            {{ end }}
          </div>
        {{ end }}
      {{ end }}

      {{ range .Params.Videos }}
        {{ if .download_link }}
          <a class="btn btn-outline-primary self-start" href="{{ .download_link }}">Download {{ .title }}</a>
        {{ end }}
      {{ end }}
    </div>
  </section>
{{ end }}