{{ define "main" }}

<section class="section-padding contact-section has-shapes" 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 justify-content-center">
      <div class="col-xl-6 col-lg-7">
        <form method="POST" class="rounded shadow p-30" action="{{site.Params.contact_form_action}}">
          <div class="form-group mb-30">
            <label class="text-black-200 h5 font-weight-600 mb-2" for="fname">{{ i18n "name"}}</label>
            <input class="form-control shadow-none" type="text" placeholder="Jack Barker" id="fname" required>
          </div>
          <div class="form-group mb-30">
            <label class="text-black-200 h5 font-weight-600 mb-2" for="email">{{i18n "mail"}}</label>
            <input class="form-control shadow-none" type="email" placeholder="barker@email.com" id="email" required>
          </div>
          <div class="form-group mb-30">
            <label class="text-black-200 h5 font-weight-600 mb-2" for="website">{{i18n "website"}}</label>
            <input class="form-control shadow-none" type="url" placeholder="Subject">
          </div>
          <div class="form-group mb-30">
            <label class="text-black-200 h5 font-weight-600 mb-2" for="message">{{ i18n "message"}}</label>
            <textarea class="form-control shadow-none" name="comment" rows="5" id="message" required></textarea>
          </div>
          <button class="btn btn-primary w-100" type="submit">{{ i18n "submit"}}</button>
        </form>
      </div>
      <div class="col-xl-4 col-lg-5 mt-5 mt-lg-0">
        {{ if .Params.contact_info.enable }}
        {{ with .Params.contact_info }}
        <div class="rounded shadow p-30 mb-30">
          <h3 class="font-weight-600">
            <i class="ti-location-pin text-primary mr-2"></i>
            {{ .title | markdownify }}
          </h3>

          <ul class="list-unstyled check-list-primary mt-30">
            {{ range .address_list }}
            <li class="mb-20">
              <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>
        </div>
        {{ end }}
        {{ end }}


        {{ if .Params.services.enable }}
        {{ with .Params.services }}
        <div class="rounded shadow p-30">
          <h3 class="font-weight-600">
            <i class="ti-info-alt text-primary mr-2"></i>
            {{ .title | markdownify }}
          </h3>

          <ul class="list-unstyled check-list-primary mt-30">
            {{ range .service_list }}
            <li class="mb-20">
              <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>
        </div>
        {{ end }}
        {{ end }}
      </div>
    </div>
  </div>
</section>

{{ end }}