{% extends "layout.jinja2" %}

{% block content %}

<div class="row">
    <div class="col-lg-8">
        <div class="card mb-0">
            <div class="card-body">
                <form action="{{ request.route_url('home') }}" method="POST" class="form">
                    <div class="mb-3">
                        <label for="username" class="form-label required-field">Nom et prénom - Tên họ</label>
                        <input type="text" class="form-control" name="name" value="{{name}}"required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" required  value="{{email}} ">
                    </div>
                    <div class="mb-3">
                        <label for="comments" class="form-label">"Message - Tin nhắn"</label>
                        <textarea class="form-control" id="comments" name="comments" required rows="5"></textarea>
                        <br>
                        <div class="g-recaptcha" data-sitekey="6LeDvVUgAAAAAOqD_-h93kd5aW8CmpeVvKYu-m0p" data-callback='recaptchaCallback'></div>
                        <input type="hidden"  id="response" name="response" value="" />
                        <br>
                        <button class="btn btn-primary hidden" id="btnSubmit" type="submit" name="form.submitted">Envoyer</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
            <h5>Méditation Sunyata Paris</h5>
            <p>
              116 bd Maréchal Foch<br>
              93160 NOISY LE GRAND<br>
              <br>
              <span class="badge bg-danger">RER A</span>&nbsp;station Bry sur Marne<br>
              <br>
              <span class="badge bg-primary">Bus 220</span>&nbsp;arrêt Verdun<br>
              <br>
            </p>

    </div>
</div>

  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  <script>
    function recaptchaCallback() {
      var btnSubmit = document.getElementById("btnSubmit");
      var response = grecaptcha.getResponse();

      document.getElementById("response").value = response;
      if ( btnSubmit.classList.contains("hidden") ) {
          btnSubmit.classList.remove("hidden");
          btnSubmit.classList.add("show");
      }
    }

  </script>

{% endblock %}
