{{ define "main" }}

<!--=================== contact section start ===================-->
<section class="section contact">
  <div class="container">
    {{ $bgImage:= resources.Get "images/map.png" }}
    {{ $bgImage:= $bgImage.Resize "1400x webp" }}
    <div class="row section-sm pt-0" style="background-image: url('{{ $bgImage.RelPermalink }}')">
      <div class="col-lg-6">
        <div class="content pt-lg-5 pb-3 pb-lg-0">
          <h2>{{ .Params.message | markdownify }}</h2>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="p-4 border rounded-4">
          <h3 class="h4 mb-5 text-capitalize">{{ .Params.instruction_a | markdownify }}
            <span class="text-primary">{{ .Params.instruction_b | markdownify }}<i class="fas fa-arrow-right ms-2"></i></span>
          </h3>
          <form action="{{site.Params.contact_form_action | safeURL}}" method="POST">
            <div class="form-group">
              <label for="name" class="form-label">{{ .Params.full_name_title | markdownify }}<small> *</small></label>
              <input type="text" class="form-control" name="name" id="name" placeholder="{{ .Params.full_name_placeholder | markdownify }}" required>
            </div>
            <div class="form-group">
              <label for="email" class="form-label">{{ .Params.email_title | markdownify }}<small> *</small></label>
              <input type="email" name="email" class="form-control" id="email" placeholder="{{ .Params.email_placeholder | markdownify }}" required>
            </div>
            <div class="form-group">
              <label for="name" class="form-label">{{ .Params.subject_title | markdownify }}<small> *</small></label>
              <input type="text" class="form-control" name="subject" id="subject" placeholder="{{ .Params.subject_placeholder | markdownify }}"
                required>
            </div>
            <div class="form-group">
              <label for="message" class="form-label">{{ .Params.content_title | markdownify }}<small> *</small></label>
              <textarea class="form-control" placeholder="{{ .Params.content_placeholder | markdownify }}" id="message"
                name="message" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">{{ .Params.button_text | markdownify }}</button>
          </form>
        </div>
      </div>
    </div>

    <div class="row g-4">
      {{ with site.Params.mobile }}
      <div class="col-lg-4">
        <div class="card text-center">
          <a href="tel:{{.}}"><i class="fas fa-user text-primary"></i>{{.}}</a>
        </div>
      </div>
      {{ end }}
      {{ with site.Params.email }}
      <div class="col-lg-4">
        <div class="card text-center">
          <a href="mailto:{{.}}"><i class="fas fa-envelope text-primary"></i>{{.}}</a>
        </div>
      </div>
      {{ end }}
      {{ with site.Params.address }}
      <div class="col-lg-4">
        <div class="card text-center">
          <li>
            <i class="fas fa-map-marker-alt text-primary"></i>{{ .| markdownify}}
          </li>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
<!--=================== contact section start ===================-->

{{ end }}