{{ partial "header.html" . }}
{{ partial "navbar.html" . }}

<main id="main" class="main join">
      <div class="container">
        <section id="intro">
          <div class="row">
            <h1 class="section-header my-3 my-md-5 text-center">{{ .Title }}</h1>
          
        <h2 class="mt-0 pt-0">{{ .Param "intro.subtitle" }}</h2>
                <p>{{ .Param "intro.p-2" }}</p>
                <p><b>{{ .Param "intro.p-3" }}</b></p>
                <p class="pb-0 mb-0">
                    <a class="btn-outline-primary btn" href="{{ .Param "join.cta.url" }}">{{ .Param "join.cta.title" }}</a>
                  </p>
                </div>
   </section>

    <section id="teaser">
    <div class="teaser__info">
        <h2>{{ .Param "join.teaser.title" }}</h2>
        <ul class="mb-0 pb-0">
                        
            {{ range .Param "join.options" }}
                <li>{{ .option }}</li>  
            {{ end }}
     </ul>
    </div>
  </section>

  <section id="membership-levels">
    <h2>{{ .Param "membership-levels.title" }}</h2>
    <p>{{ .Param "membership-levels.subtitle" }}</p>

    <ul class="mb-0 pb-0">
        {{ range .Param "membership-levels.options" }}
          <li>{{ .option }}</li>  
        {{ end }}
    </ul>
    <p class="membership-levels-text">{{ .Param "membership-levels.text" }}</p>
    <ul class="mb-0 pb-0">
        {{ range .Param "membership-levels.features" }}
           <li>{{ .feature }}</li>  
        {{ end }}
    </ul>
    <div class="membership-data mt-5">
      {{ .Content }}
    </div>
    </section>

    <section id="membership-benefits">
      <div class="teaser__info">
        <h2 class="text-center mb-5 pb-2">{{ .Param "membership-benefits.title" }}</h2>
        <div class="benefits-data">
        {{ range where .Site.Pages "Section" "join" }}
           {{if eq .Title "Membership Benefits"}}
             {{ .Content }}
          {{ end}}
        {{ end}}
        </div>
      </div>
    </section>

    <section id="become-member">
            <h2 class="text-center mb-5 pb-3">{{ .Param "become-member.title" }}</h2>
            <div class="row">
                {{ range .Param "become-member.options" }}
                        <article class="post__article col-md-6">
                            <div class="post__thumb">
                                    {{ $imagename := .image }}
                                    {{ $imagelocation := (printf "%s/%s" "images/join/" $imagename) }}
                                    {{ $imageresource := resources.Get $imagelocation }}
                                    {{ $image := $imageresource.Fit "600x390" }}
                                    <img class="img-fluid"  src="{{  $image.RelPermalink }}" alt="{{ .title }}" title="{{ .title }}">
                            </div>
                            <div class="h2">{{ .title }}</div>
                            <p>{{ .text }}</p>
                            <p><a class="btn-outline-primary btn-sm btn" href="{{ .cta_url }}">{{ .cta_text }}</a></p>
                        </article>
                  {{ end }}
            </div>
         </section>
     </div>
</main>

{{ partial "footer.html" . }}