{{ define "main" }}

<section class="section section-lg-bottom">
  <div class="container">

    {{ range $idx, $tbl := .Params.pricing_tables }}

      {{ $odd          := eq (mod $idx 2) 1 }}
      {{ $textOrderLg  := cond $odd "order-lg-1" "order-lg-2" }}
      {{ $tableOrderLg := cond $odd "order-lg-2" "order-lg-1" }}
      {{ $delay        := mul (add $idx 1) 100 }}
      {{ $textAOS      := cond $odd "fade-right" "fade-left" }}
      {{ $tableAOS     := "fade-up" }}

      <div class="row justify-content-center align-items-start mb-5 g-8">

        {{/* --------- TEKSTKOLOM (altijd boven op mobiel) --------- */}}
        <div class="col-lg-7 col-md-12 col-sm-12 p-sm-4 px-lg-6 order-1 {{ $textOrderLg }}"
            data-aos="{{ $textAOS }}" data-aos-delay="{{ $delay }}">
          {{ range $tbl.pricing_table_info }}
            {{ with .header }}
              {{ partial "image.html" (dict
                  "Src" . 
                  "Alt" (printf "Logo %s" $.Page.Title)
                  "Class" "img-fluid mb-3 logo-header img-product" 
              ) }}
            {{ end }}
            {{ with .subheader }}
              <h4 class="mt-2 {{ $textOrderLg }}" data-aos="{{ $textAOS }}" data-aos-delay="{{ $delay }}">{{ . }}</h4>
            {{ end }}

            {{ with .text }}
              <p class="{{ $textOrderLg }}" data-aos="{{ $textAOS }}" data-aos-delay="{{ $delay }}">{{ . | markdownify }}</p>
            {{ end }}
          {{ end }}
        </div>

        {{/* --------- TABELKOLOM (altijd onder op mobiel) --------- */}}
        <div class="col-lg-5 col-md-12 col-sm-12 my-4 order-2 {{ $tableOrderLg }}" data-aos="{{ $tableAOS }}" data-aos-delay="{{ $delay }}">
          <table class="pricing-table shadow-lg" style="width: 100%;">
            <tbody>

              {{/* PRIJS-REEKS (bovenste rij met kolommen) */}}
              <tr>
                {{ range $tbl.pricing_table_info }}
                <td>
                  {{ with .price }}<h6>{{ . | markdownify }}</h6>{{ end }}
                  {{ with .content }}<h6>{{ . | markdownify }}</h6>{{ end }}
                  {{ with .info }}<small>{{ . | markdownify }}</small>{{ end }}
                </td>
                {{ end }}
              </tr>

              {{/* BODY-REEKSEN */}}
              {{ range $tbl.pricing_table_data }}
              <tr>
                {{ range .table_row }}
                <td style="width:60%;">
                  <div>
                    {{ with .icon }}<i class="{{ . }}"></i>{{ end }}
                    {{ with .price }}<span class="d-flex align-items-center">{{ . }}</span>{{ end }}
                    <p><b>{{ .product | markdownify }}</b></p>
                    {{ with .info }}<small>{{ . | markdownify }}</small>{{ end }}
                  </div>
                </td>
                {{ end }}
              </tr>
              {{ end }}

            </tbody>
          </table>
        </div>

      </div>
    {{ end }}

    <!-- <div class="row justify-content-center" data-aos="fade-up" data-aos-delay="200">
      <div class="col-lg-8 col-md-8 col-sm-12 mb-40">
        {{ .Content }}
      </div>
    </div> -->

  </div>
</section>

{{ end }}