{{ define "main" }}

<section class="section-padding" data-aos="fade-in" data-aos-delay="150">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6 col-md-9 text-center mb-40">
        <div class="content">{{ .Content }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">
        <div class="pricing-switch d-flex align-items-center justify-content-center w-100 mb-20">
          <label class="h5 m-0" id="monthly">{{ i18n "monthly" }}</label>
          <div class="toggle">
            <input class="pricing-check" type="checkbox"><b class="switch"></b>
          </div>
          <label class="h5 m-0" id="annually">{{ i18n "yearly"}}</label>
        </div>
        <!-- pricing-switcher -->
        {{with .Params.offer}} <p class="text-primary mb-30">{{ . | markdownify }}</p> {{end}}
      </div>
    </div>
    <div class="row">
      {{ range .Params.pricing_card }}
      <div class="col-xl-4 col-md-6">
        <div class="card rounded shadow border-0 mb-30">
          <div class="card-body p-30">
            <span class="h2 font-weight-bold d-inline-flex">
              $<span class="data-count" data-count-monthly="{{.monthly_price}}"
                data-count-annually="{{.yearly_price}}">{{.monthly_price}}</span>
            </span>
            <span class="text-monthly">\{{ i18n "month"}}</span>
            <span class="text-annually d-none">\{{ i18n "year"}}</span>

            <h3 class="font-weight-600 mt-15 mb-10">{{ .name }}</h3>
            <p class="border-bottom pb-15">{{ .content | markdownify}}</p>

            <ul class="list-unstyled check-list-2 mt-30 mb-40">
              {{ range .services }}
              <li class="mb-25">
                <span><svg width="16" height="11" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 6.125L6.91892 11L16 2" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                      stroke-linejoin="round" /></svg></span>
                {{ . |markdownify}}
              </li>
              {{ end }}
            </ul>
            {{ if .featured }}
            <a href="{{ .button_link | absLangURL }}" class="btn btn-primary has-icon d-block">{{ .button_label }}
              <span class="icon">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12.5522 6.66669L20.5522 14.6667C21.0329 15.1473 21.0699 15.9036 20.6632 16.4267L20.5522 16.5523L12.5522 24.5523L10.6666 22.6667L17.7228 15.6095L10.6666 8.55231L12.5522 6.66669Z"
                    fill="currentColor" />
                </svg>
              </span>
            </a>
            {{ else }}
            <a href="{{ .button_link | absLangURL }}" class="btn btn-outline-primary d-block">{{ .button_label }}</a>
            {{ end }}
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>

{{ end }}