  <turbo-stream action="update" target="guest-login-modal-content"><template>
    <div class="flex flex-col gap-5">
  <div class="flex items-center justify-between right-5 top-5 absolute w-[92%]">
    <a data-turbo-stream="true" class="flex cursor-pointer" href="/login-modal?type=signin">
      <i class="icon-arrow-left text-[24px] text-[#2F2C25]"></i>
</a>    <a data-turbo-stream="true" class="flex cursor-pointer" href="/login-modal?type=close">
      <i class="anron-cross text-[24px] text-[#2F2C25]"></i>
</a>  </div>
  <div class="flex flex-col gap-4">
    <div class="flex flex-col items-center gap-4">
      <img src="https://topline.com/assets/logo-94740f7e.png" alt="logo">
    </div>
    <form class="flex flex-col gap-[12px]" data-turbo="false" data-controller="phone-input" data-action="submit-&gt;phone-input#handleSignupPhoneSubmit" action="/users" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="zCA_Xl3zTftSMNagpYeJRrlXLBqtrJs6_MMhom2yq1cdi66R0AavIeH7gnUoH6RtQeXrisJkT8FWPljHaEfM0g" autocomplete="off" />
      <div class="form-group">
        <div class="koyp-ezalsf_1784641638"><style media="screen">.koyp-ezalsf_1784641638 {position:absolute!important;height:1px;width:1px;overflow:hidden;}</style><label for="koyp-ezalsf">If you are a human, ignore this field</label><input type="text" name="koyp-ezalsf" id="koyp-ezalsf" autocomplete="off" tabindex="-1" /><input type="hidden" name="spinner" value="0d0b0cbf4a68b27b5d660cfc461f42e9" autocomplete="off" /></div>
      </div>
      <div class="form-group w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
        <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Full name</label>
        <input autofocus="autofocus" placeholder="Enter Full Name" id="mdl_join_fullname" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="text" value="" name="user[name]" />
      </div>
      <div class="form-group w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
        <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Email</label>
        <input autocomplete="email" id="mdl_join_email_address" placeholder="Enter Email Address" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="email" value="" name="user[email]" />
        <span class="block text-[rgba(47,44,37,0.60)] text-[12px] leading-4 font-normal font-manrope mt-1">Later you can login with this email address</span>
      </div>
      <div class="form-group w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
        <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1">Password</label>
        <input autocomplete="new-password" id="mdl_join_password" placeholder="Enter Password" class="w-full text-[16px]! font-normal! rounded-lg! border-[rgba(47,44,37,0.20)]! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px]" type="password" name="user[password]" />
      </div>
      <div class="form-group db-required w-full cursor-pointer [&_label]:font-semibold! [&_label]:text-[#2F2C25]">
        <label class="text-[#2F2C25] text-sm not-italic leading-5! font-manrope! mb-1" for="signup_phone">Phone</label>
        <div class="relative w-full [&>.iti]:w-full border bg-white rounded-lg border-solid border-[rgba(47,44,37,0.20)]">
          <input type="tel" id="signup_phone" name="phone_number" value="" required="required" autocomplete="tel" placeholder="Enter Phone Number" class="w-full text-[16px]! font-normal! rounded-lg! leading-6! text-[#2F2C25]! placeholder:text-[rgba(47,44,37,0.50)]! h-[40px] custom-phone-input" data-phone-input-target="phoneInput">
          <input autocomplete="off" value="" data-phone-input-target="formattedNumber" type="hidden" name="user[phone]" id="user_phone" />
        </div>
        <p id="signup-phone-number-error" class="hidden text-[#FD306E] text-xs not-italic font-normal leading-4 mt-1 font-manrope" role="alert">Please enter a valid phone number</p>
      </div>
      <div class="checkboxtwo checkbox flex items-start gap-2.5">
        <input name="user[terms_of_service]" type="hidden" value="0" autocomplete="off" /><input id="tos" class="form-checkbox mt-1 w-[18px] h-[18px] shrink-0" type="checkbox" value="1" name="user[terms_of_service]" />
        <label for="tos" class="text-[rgba(47,44,37,0.80)] text-xs not-italic font-normal leading-[140%] font-manrope pt-0.5 select-none">
          I accept the <a target="_blank" id="signup_tos" class="text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="https://company.topline.com/terms-of-service/">terms of service</a> &amp; <a target="_blank" class="text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="https://topline.com/privacy-policy/">privacy policy</a>
        </label>
      </div>
      <div class="checkboxtwo checkbox flex items-start gap-2.5">
        <input name="user[sms_2fa_opt_in]" type="hidden" value="0" autocomplete="off" /><input id="sms_2fa" class="form-checkbox mt-1 w-[18px] h-[18px] shrink-0" type="checkbox" value="1" name="user[sms_2fa_opt_in]" />
        <label for="sms_2fa" class="text-[rgba(47,44,37,0.80)] text-xs not-italic font-normal leading-[140%] font-manrope pt-0.5 select-none">
          By clicking this checkbox, you consent to receive <strong>2FA text messages from Topline. Text STOP to opt out. Text HELP for support. Terms and rates may apply.</strong>
        </label>
      </div>
      <div id="turnstile-widget" class="cf-turnstile" data-controller="cloudflare-turnstile"
              data-sitekey="0x4AAAAAAA6CqrkTPt2fbvMv"
              data-callback="cloudflareTurnstileCallback" data-size="flexible" data-theme="light">
      </div>
      <div class="form-group w-full mt-1">
        <button name="button" type="submit" class="db-btn-primary-v2 w-full justify-center">
          <div class="content" data-hover-text="Signup">
            <span>Signup</span>
          </div>
</button>      </div>
</form>  </div>
  <div class="flex items-center justify-between border-t border-solid border-[rgba(47,44,37,0.08)] p-[20px_30px] lg:m-[0_-30px_-30px] m-[0_-20px_-20px] max-[480px]:flex-col max-[480px]:gap-2 max-[480px]:items-start">
    <a data-turbo-stream="true" class="cursor-pointer text-[#2F2C25] font-semibold underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="/login-modal?type=signin">
      Sign in
</a>    <a data-turbo-stream="true" class="text-[#2F2C25] text-sm not-italic font-semibold leading-[140%] underline decoration-solid decoration-auto underline-offset-auto font-manrope" href="/login-modal?type=password">
      Lost password?
</a>  </div>
</div>


</template></turbo-stream>