<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="YGgCMi19W-StQUlEkfvgsJiaZyBpL0ggSgn_7rRnmum-wU5aHs_ahYSY63jMXSeOKwPX-LDXT8yFhWr-euCg6A" autocomplete="off" />
  <input autocomplete="off" class="d-none" type="text" name="user[user_name_field]" id="user_user_name_field" />

  <input type="hidden" name="product_id" id="product_id" value="3" autocomplete="off" />
  <input type="hidden" name="membership" id="membership" value="true" autocomplete="off" />
  <div class='form-floating'>
    <input placeholder="name_first" required="required" 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" 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" 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" 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" 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" 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?onload=executeRecaptchaForMemberSignUp&render=6Le-70QqAAAAALPlZwwpQqC_RAunqJYsXytMzglm"   ></script>
        <script>
          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)
              });
            });
          };
                  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>
</template></turbo-stream>