{{ define "main" }}

{{ partial "page-header.html" . }}
<section class="section">
  <div class="container pricing-container">
    <div class="row justify-content-center align-items-center">
      <div class="col-lg-4 mb-5 mb-lg-0 px-3 pl-3 px-lg-0">
        {{ with .Params.basic }}
        <div class="card shadow">
          <div class="card-body text-center py-5">
            <h3 class="mb-4">{{ .name | markdownify }}</h3>
            <!-- <span class="price">{{ .price }}</span><span>/{{ .price_per }}</span> -->
            <span class="mr-2" style="font-size:1.4rem;">{{ .fee | markdownify }}</span> <span class="price">{{ .price }}</span>
            <p class="lead">{{ .info | markdownify }}</p>
            <ul class="list-unstyled mb-5">
              {{ range .services }}
              <li>{{ . | markdownify }}</li>
              {{ end }}
            </ul>
            {{ if .button.enable }}
            {{ with .button }}
            <a href="{{ .link | absURL }}" class="btn btn-outline-primary">{{ .label }}</a>
            {{ end }}
            {{ end }}
          </div>
        </div>
        {{ end }}
      </div>
      <div class="col-lg-4 col-recommended">
        {{ with .Params.professional }}
        <div class="card border-0 shadow-lg">
          <div class="card-body text-center py-5">
            <h3 class="mb-4">{{ .name | markdownify }}</h3>
            <!-- <span class="price">{{ .price }}</span><span>/{{ .price_per }}</span> -->
            <span class="mr-2" style="font-size:1.4rem;">{{ .fee | markdownify }}</span> <span class="price">{{ .price }}</span>
            <p class="lead">{{ .info | markdownify }}</p>
            <ul class="list-unstyled mb-5">
              {{ range .services }}
              <li>{{ . | markdownify }}</li>
              {{ end }}
            </ul>
            {{ if .button.enable }}
            {{ with .button }}
            <a href="{{ .link | absURL }}" class="btn btn-primary">{{ .label }}</a>
            {{ end }}
            {{ end }}
          </div>
        </div>
        {{ end }}
      </div>
      <div class="col-lg-4 mb-5 mb-lg-0 px-3 pr-3 px-lg-0">
        {{ with .Params.business }}
        <div class="card shadow">
          <div class="card-body text-center py-5">
            <h3 class="mb-4">{{ .name | markdownify }}</h3>
            <!-- <span class="price">{{ .price }}</span><span>/{{ .price_per }}</span> -->
            <span class="mr-2" style="font-size:1.4rem;">{{ .fee | markdownify }}</span> <span class="price">{{ .price }}</span>
            <p class="lead">{{ .info | markdownify }}</p>
            <ul class="list-unstyled mb-5">
              {{ range .services }}
              <li>{{ . | markdownify }}</li>
              {{ end }}
            </ul>
            {{ if .button.enable }}
            {{ with .button }}
            <a href="{{ .link | absURL }}" class="btn btn-outline-primary">{{ .label }}</a>
            {{ end }}
            {{ end }}
          </div>
        </div>
        {{ end }}
      </div>
    </div>
  </div>
</section>

<!-- call to action -->
{{ if .Params.call_to_action.enable }}
{{ with .Params.call_to_action }}
<section class="section">
  <div class="container section shadow rounded-lg px-4">
    <div class="row align-items-center justify-content-center text-center text-md-left">
      <div class="col-lg-4 col-md-5 mb-4 mb-md-0">
        <img src="{{ .image | absURL }}" class="img-fluid">
      </div>
      <div class="col-lg-5 col-md-6">
        <h2 class="section-title action-title">{{ .title | markdownify }}</h2>
        {{with .content }}<p class="mb-4">{{ . | markdownify }}</p>{{ end }}
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link | absURL }}" class="btn btn-primary">{{ .label }}</a>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /call to action -->

{{ end }}