{{ $contact := .Site.Params.contact }}
{{ "<!-- Contact Section -->" | safeHTML }}

<section id="contact">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">

        {{ with $contact.title }}
        <h2 class="section-heading">{{ . | markdownify }}</h2>
        {{ end }}

        {{ with $contact.subtitle }}
        <h3 class="section-subheading text-muted">{{ . | markdownify }}</h3>
        {{ end }}

      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <form
          method="POST"
          name="sentMessage"
          id="contactForm
          {{- if $contact.netlify -}}
            " netlify
          {{- else -}}
            " action="{{- $contact.postURL | default (printf "//formspree.io/%s" (or $contact.email .Site.Params.email)) -}}"
          {{- end -}}>

          <fieldset>
            <div class="row">
              <div class="col-md-6">

                {{ with $contact.form.name }}
                <div class="form-group">
                  <input class="form-control" id="name" required="required" type="text" name="name" placeholder="{{ with .text }}{{ .  | markdownify }}{{ end }}" data-validation-error-msg="{{ with .warning }}{{ . | markdownify }}{{ end }}">
                  <p class="help-block text-danger"></p>
                </div>
                {{ end }}

                {{ with $contact.form.email }}
                <div class="form-group">
                  <input class="form-control" id="email" required="required" type="email" name="email" placeholder="{{ with .text }}{{ . | markdownify }}{{ end }}" data-validation-error-msg="{{ with .warning }}{{ . | markdownify }}{{ end }}">
                  <p class="help-block text-danger"></p>
                </div>
                {{ end }}

                {{ with $contact.form.phone }}
                <div class="form-group">
                  <input class="form-control" id="phone" required="required" type="number" name="phone" placeholder="{{ with .text }}{{ . | markdownify }}{{ end }}" data-validation-error-msg="{{ with .warning }}{{ . | markdownify }}{{ end }}"></textarea>
                  <p class="help-block text-danger"></p>
                </div>
                {{ end }}
              </div>

              <div class="col-md-6">
              {{ with $contact.form.message }}
                <div class="form-group">
                  <textarea class="form-control" id="message" required="required" name="message" placeholder="{{ with .text }}{{ . | markdownify }}{{ end }}" data-validation-error-msg="{{ with .warning }}{{ . | markdownify }}{{ end }}"></textarea>
                  <p class="help-block text-danger"></p>
                </div>
                {{ end }}

              </div>
              <div class="clearfix"></div>
              <div class="col-lg-12 text-center">
                <div class="text-success" id="success" style="display:none;">
                  {{ with $contact.thanks }}
                    {{ . | markdownify }}
                  {{ else }}
                    Thank you for contacting us.
                  {{ end }}
                </div>
                <div class="captcha-error text-danger" id="captcha-error">
                  Message is not sendable due to captcha not loadable. Please contact us at {{ (or $contact.email .Site.Params.email) -}}.
                </div>
                <div class="text-danger" id="error" style="display:none;">
                  {{ with $contact.error }}
                    {{ . | markdownify }}
                  {{ else }}
                    Message could not be send. Please contact us at {{ (or $contact.email .Site.Params.email) }} instead.
                  {{ end }}
                </div><br />
                {{ with $contact.captcha }}
                  <div class="g-recaptcha-container">
                    <span class="g-recaptcha-filler"></span>
                    <button
                      type="submit"
                      value="Submit"
                      class="g-recaptcha btn btn-xl"
                      data-sitekey="{{ .sitekey }}"
                      data-size="invisible"
                      data-badge="inline"
                      data-callback="onContactCaptcha">
                      {{ print $contact.buttonText }}
                    </button>
                    <span class="filler"></span>
                  </div>
                {{ else }}
                  <button type="submit" value="Submit" class="btn btn-xl">
                    {{ print $contact.buttonText }}
                  </button>
                {{ end }}
              </div>
            </div>
            {{ range $contact.form.hidden }}
              {{ if eq .name "site" }}
                <input type="hidden" name="{{ .name }}" value="{{ $.Permalink }}"/>
              {{ else if eq .name "page" }}
                <input type="hidden" name="{{ .name }}" value="{{ $.URL }}"/>
              {{ else }}
                <input type="hidden" name="{{ .name }}" value="{{ .value }}"/>
              {{ end }}
            {{ end }}
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</section>