
<turbo-stream action="update" target="portal_booking_modal"><template>
  <div id="booking-login-modal" class="modal hidden flex z-[140]!" data-booking-modal-target="modal">
  <div id="booking-login-modal-wrapper"></div>
</div>

</template></turbo-stream>
  <turbo-stream action="replace" target="booking-login-modal-wrapper"><template>
    
<div id="booking-login-modal-wrapper" data-controller="booking-modal" data-booking-modal-modal-id-value="booking-login-modal" data-booking-modal-open-on-connect-value=&quot;true&quot; class="relative max-w-[700px] m-auto w-full pointer-events-auto shadow-xl bg-white rounded-lg overflow-hidden">
  <button type="button" class="close-modal bg-[#FAFAFB] rounded-md border border-solid border-border_color w-[36px] h-[36px] grid place-items-center text-[#051237]/[0.6] text-[18px] absolute top-[16px] right-[16px] z-10" data-action="click->booking-modal#close">
    <i class="icon-x"></i>
  </button>
  <div class="p-[20px] sm:p-[30px]">
    <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="/booking-login-modal?modal_id=booking-login-modal&amp;type=social">
      <i class="icon-arrow-left text-[24px] text-[#2F2C25]"></i>
</a>    <a data-action="click-&gt;booking-modal#close" class="flex cursor-pointer" href="#">
      <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="2ijuCqBYNLEPFmprjn3KMFqDT2UH6TgKOGmyVy6mJSKB_iCo8AxL9msqsoTSp73Y6m4fgs4esJJO7UU16I7EtQ" autocomplete="off" />
      <div class="form-group">
        <div class="snomxik-tycqzpjfh_1784144201"><style media="screen">.snomxik-tycqzpjfh_1784144201 {position:absolute!important;height:1px;width:1px;overflow:hidden;}</style><label for="snomxik-tycqzpjfh">If you are a human, ignore this field</label><input type="text" name="snomxik-tycqzpjfh" id="snomxik-tycqzpjfh" autocomplete="off" tabindex="-1" /><input type="hidden" name="spinner" value="2649faf539919acc3e25d60ef305c4ab" 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="/booking-login-modal?modal_id=booking-login-modal&amp;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="/booking-login-modal?modal_id=booking-login-modal&amp;type=password">
      Lost password?
</a>  </div>
</div>


  </div>
</div>

</template></turbo-stream>