<turbo-stream action="update" target="modal"><template><div id="modal-component" data-controller="modal-component">
  <div
    class="fixed inset-0 bg-gray-400 z-10 opacity-30"
    data-action="click->modal-component#close"
  >
  </div>
  <div
    class="
      bg-white p-5 rounded-2xl modal-animation-open
      border fixed z-20 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
      transition-all max-h-[calc(100vh-2rem)] overflow-y-auto
      w-auto lg:w-[400px]
    "
    data-modal-component-target="container"
  >
    
  <h2 class="text-xl text-center font-bold mb-3 text-black">
    Sign up to continue
  </h2>
  <p class="mb-4 text-gray-600 text-center">
    Create an account to start your interview practice.
  </p>

  <div class="bg-gray-100 rounded-lg p-4 mb-6">
    <ul class="space-y-2">
        <li class="flex items-center gap-2">
          <i class="icon-check text-green-600 shrink-0"></i>
          <span class="text-gray-700">10 interviews per week</span>
        </li>
        <li class="flex items-center gap-2">
          <i class="icon-check text-green-600 shrink-0"></i>
          <span class="text-gray-700">$14.99 / month, cancel anytime</span>
        </li>
    </ul>
  </div>

  <div class="space-y-3">
    <form data-turbo="false" action="/auth/google_oauth2" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="r65Eqxtj9pmZWE3sj8VknCay8kcW7evvgUar_ocC2xQ-lO-iKTkAP9oewA5vRcKkPCfL-oqV7VXiVNSs1mCYjg" autocomplete="off" />
        <button name="button" type="submit" class="leading-none cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed block text-center whitespace-nowrap select-none focus:border-gray focus:outline-hidden focus:ring border leading-normal hover:no-underline rounded bg-white hover:bg-gray-100 border-gray-300 px-8 py-2  flex gap-2 items-center w-full justify-center">
    
        <img class="h-5" src="/assets/icons/google_logo_@2x-64609814.png" />
        Sign up with Google

</button></form>    <form data-turbo="false" action="/auth/microsoft_graph" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="7mP0Jz-jqExGPFu-DT3V_x1q8Af700_yC02r-Fc93hrGo8rlep7uDyakij0YpCozuk3lLHNFdY1gbzRU-MnIbg" autocomplete="off" />
        <button name="button" type="submit" class="leading-none cursor-pointer disabled:opacity-75 disabled:cursor-not-allowed block text-center whitespace-nowrap select-none focus:border-gray focus:outline-hidden focus:ring border leading-normal hover:no-underline rounded bg-white hover:bg-gray-100 border-gray-300 px-8 py-2  flex gap-2 items-center w-full justify-center">
    
        <img class="h-5" src="/assets/icons/microsoft_logo-1fc68ad8.png" />
        Sign up with Microsoft

</button></form>  </div>

    <div class="absolute right-4 top-4 sm:right-6 sm:top-6">
      <div
        class="icon-cross text-lg cursor-pointer"
        role="button"
        data-action="click->modal-component#close"
      >
      </div>
    </div>
  </div>
</div>
</template></turbo-stream>