{{ define "main" }}
  <section class="mb-8">
    <div class="container flex flex-col gap-5">
      <div>
        <h2>{{ .Params.Title }}</h2>
      </div>

      <div class="flex flex-col lg:flex-row gap-5">
        <div class="flex-grow flex flex-col gap-5">
          <div class="content-container">
            <img src="/images/meetups/envelope.png" width="50%" height="50%" />
          </div>

          <div class="content-container">
            {{ .Params.Description }}
          </div>
          
          <form action = "{{ .Params.Api_endpoint }}" method = "POST">
          <input type = "email" class="col-8 text-black" id = "email" name = "email" placeholder='Email...' required/>
          <br>
          <br>
          <button type="submit" class="btn text-white meetups-bg col-3">Subscribe</button>
          </form>
        </div>
        <div class="flex flex-col gap-5 lg:w-1/3">
          <div class="dark:text-white content-container content">
            {{ .Content }}
            <a class="btn btn-outline-primary" href="/discord">Discord</a>
          </div>

          {{ $hasGoodHost := false }}
          {{ range .Params.Hosts }}
            {{ if or .bio .image }}
              {{ $hasGoodHost = true }}
            {{ end }}
          {{ end }}
          {{ if $hasGoodHost }}
            <div>
              <h4 class="mb-2">Meetup host{{ if (gt (len .Params.Hosts) 1) }}s{{ end }}</h4>
              <div class="flex flex-col gap-3">
                {{ range .Params.Hosts }}
                  <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>
      </div>
    </div>
  </section>
{{ end }}