<!-- Page Header -->
<% content_for :header_scripts do %>
  <script src='https://www.google.com/recaptcha/api.js?onload=onRecaptchaElementLoad&render=explicit' async defer></script>
<% end %>
<header class="contacthead" style="background-image: url('/assets/header.jpg')">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="page-heading">
          <h1>Napisz do mnie<br>lub zadzwoń.</h1>
          <span class="subheading">Masz pytania? Udzielę odpowiedzi.</span>
          <br />
          <i class="fa fa-phone fa-4x mb-3 sr-contact" data-sr-id="8" style="; visibility: visible;  -webkit-transform: scale(1); opacity: 1;transform: scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; "></i>
          <h3>+48 781-810-655</h3>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Main Content -->
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-10 mx-auto">
      <p>Wypełnij poniższy formularz i wyślij go do mnie. Odpowiem najszybciej jak to możliwe.</p>
      <form name="sentMessage" id="contactForm" novalidate>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls">
            <label>Imię</label>
            <input type="text" class="form-control" placeholder="Imię" id="name" required data-validation-required-message="Proszę podać Imię.">
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls">
            <label>Adres Email</label>
            <input type="email" class="form-control" placeholder="Adres Email" id="email" required data-validation-required-message="Proszę wprowadzić adres email." data-validation-validemail-message="Błędny format adresu email.">
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div class="control-group">
          <div class="form-group floating-label-form-group controls">
            <label>Wiadomość</label>
            <textarea rows="5" class="form-control" placeholder="Wiadomość" id="message" required data-validation-required-message="Proszę wprowadzić wiadomość."></textarea>
            <p class="help-block text-danger"></p>
          </div>
        </div>
        <div id="recaptcha"></div>
        <br>
        <div id="success"></div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary" id="sendMessageButton">Wyślij</button>
        </div>
      </form>
    </div>
  </div>

</div>
<%= javascript_tag do %>
  var onRecaptchaElementLoad = function() {
    grecaptcha.render('recaptcha', {
      'sitekey' : '<%= j ENV["REACAPTCHA_SITE_KEY"]%>',
      'hl': 'pl'
    });
  };
<% end %>
<% content_for :footer_scripts do %>
  <%= javascript_include_tag  'jqBootstrapValidation', 'contact_me' %>
<% end %>
