<turbo-stream action="update" target="user_info"><template>
  <h5 class='mt-2'>Account Owner/Parent Info</h5>
  <p class="opacity-75">Additional account users can be added after a succesful purchase.</p>
  <hr class='my-3'>
  

<form data-controller="password-validator" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ov0YVwruB2BMp5lqN0Xs708kc9NWiHRN6H4WWQVYlKPUkDstfiZDXMg5Uqy74dQqmkuZTpun59-reHtT_xBpZg" autocomplete="off" />
  <input type="hidden" name="product_id" id="product_id" value="34" autocomplete="off" />
  <input type="hidden" name="membership" id="membership" value="true" autocomplete="off" />
  <div class='form-floating'>
    <input placeholder="name_first" required="required" autocomplete="given-name" class="form-control form-control-sm mb-2" type="text" name="user[name_first]" id="user_name_first" />
    <label class="form-label" for="user_name_first">First Name</label>
  </div>
  <div class='form-floating'>
    <input placeholder="name_last" required="required" autocomplete="family-name" class="form-control form-control-sm mb-2" type="text" name="user[name_last]" id="user_name_last" />
    <label class="form-label" for="user_name_last">Last Name</label>
  </div>
  <div class='form-floating'>
    <input placeholder="email" required="required" autocomplete="email" class="form-control form-control-sm mb-2" type="email" name="user[email]" id="user_email" />
    <label class="form-label" for="user_email">Email</label>
  </div>
  <div class='form-floating'>
    <input placeholder="phone_number" required="required" autocomplete="tel" class="form-control form-control-sm mb-2" type="tel" name="user[phone_number]" id="user_phone_number" />
    <label class="form-label" for="user_phone_number">Phone number</label>
  </div>
  <div id='password_validator' class='mb-3'>
  <div class="row p-2">
    <div class="col-6 ps-0">
      <input class="form-check-input me-1" type="checkbox" value="" id="passwordShort" disabled>
      <label class="" for="passwordShort">8-20 characters</label>
    </div>
    <div class="col-6 ps-0">
      <input class="form-check-input me-1" type="checkbox" value="" id="passwordNumber" disabled>
      <label class="" for="passwordNumber">At least 1 number</label>
    </div>
    <div class="col-6 ps-0">
      <input class="form-check-input me-1" type="checkbox" value="" id="passwordLowercase" disabled>
      <label class="" for="passwordLowercase">1 lowercase letter</label>
    </div>
    <div class="col-6 ps-0">
      <input class="form-check-input me-1" type="checkbox" value="" id="passwordUppercase" disabled>
      <label class="" for="passwordUppercase">1 uppercase letter</label>
    </div>
    <div class="col-auto ps-0">
      <input class="form-check-input me-1" type="checkbox" value="" id="passwordsMatch" disabled>
      <label class="" for="passwordUppercase">Confirmation matches</label>
    </div>
  </div>
</div>
  <div class='form-floating'>
    <input placeholder="password" required="required" id="passwordField" autocomplete="new-password" class="form-control form-control-sm mb-2" type="password" name="user[password]" />
    <label class="form-label" for="user_password">Password</label>
  </div>
  <div class='form-floating'>
    <input placeholder="password_confirmation" id="passwordConfirmField" required="required" autocomplete="new-password" class="form-control form-control-sm mb-2" type="password" name="user[password_confirmation]" />
    <label class="form-label" for="user_password_confirmation">Confirm Password</label>
  </div>
  <div class='d-flex justify-content-center'>
      <script src="https://www.recaptcha.net/recaptcha/api.js?render=6Le-70QqAAAAALPlZwwpQqC_RAunqJYsXytMzglm"   ></script>
        <script>
          // Define function so that we can call it again later if we need to reset it
          // This executes reCAPTCHA and then calls our callback.
          function executeRecaptchaForMemberSignUp() {
            grecaptcha.ready(function() {
              grecaptcha.execute('6Le-70QqAAAAALPlZwwpQqC_RAunqJYsXytMzglm', {action: 'member_sign_up'}).then(function(token) {
                setInputWithRecaptchaResponseTokenForMemberSignUp('g-recaptcha-response-data-member-sign-up', token)
              });
            });
          };
          // Invoke immediately
          executeRecaptchaForMemberSignUp()

          // Async variant so you can await this function from another async function (no need for
          // an explicit callback function then!)
          // Returns a Promise that resolves with the response token.
          async function executeRecaptchaForMemberSignUpAsync() {
            return new Promise((resolve, reject) => {
             grecaptcha.ready(async function() {
                resolve(await grecaptcha.execute('6Le-70QqAAAAALPlZwwpQqC_RAunqJYsXytMzglm', {action: 'member_sign_up'}))
              });
            })
          };

                  var setInputWithRecaptchaResponseTokenForMemberSignUp = function(id, token) {
          var element = document.getElementById(id);
          if (element !== null) element.value = token;
        }

        </script>
<input type="hidden" name="g-recaptcha-response-data[member_sign_up]" id="g-recaptcha-response-data-member-sign-up" data-sitekey="6Le-70QqAAAAALPlZwwpQqC_RAunqJYsXytMzglm" class="g-recaptcha g-recaptcha-response "/>

  </div>
  <div class="text-center my-3">
    <input type="submit" name="commit" value="Create User" id="submit" class="btn btn-outline-danger mt-1 w-75 shadow" disabled="disabled" data-disable-with="Create User" />
  </div>
</form>
  <script nonce="">
    document.addEventListener('DOMContentLoaded', function() {
      if (typeof grecaptcha !== 'undefined') {
        grecaptcha.ready(function() {
          grecaptcha.execute('6Le-70QqAAAAALPlZwwpQqC_RAunqJYsXytMzglm', { action: 'member_sign_up' }).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
          });
        });
      }
    });
  </script>

</template></turbo-stream>


