<turbo-stream action="update" target="modal"><template>
  <div class="relative z-20" data-controller="modal" data-action="click->modal#closeIfOutside keydown.esc@window->modal#close">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 transition-opacity" data-modal-target="backdrop" data-transition-enter="ease-out duration-300" data-transition-enter-start="opacity-0" data-transition-enter-end="opacity-100" data-transition-leave="ease-in duration-200" data-transition-leave-start="opacity-100" data-transition-leave-end="opacity-0"></div>

  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex min-h-full items-end sm:items-center justify-center p-2 sm:p-0">
      <!-- Modal panel -->
      <div class="relative transform overflow-hidden rounded-2xl bg-white dark:bg-gray-800 dark:ring-1 dark:ring-white/10 px-4 pt-5 pb-4 text-left shadow-xl transition-all w-full sm:my-8 sm:w-full sm:max-w-sm sm:p-6" data-modal-target="content" data-transition-enter="ease-out duration-300" data-transition-enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" data-transition-enter-end="opacity-100 translate-y-0 sm:scale-100" data-transition-leave="ease-in duration-200" data-transition-leave-start="opacity-100 translate-y-0 sm:scale-100" data-transition-leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">

        <!-- Close button -->
        <div class="absolute top-0 right-0 pt-3 pr-3">
          <button type="button" class="rounded-full p-1.5 text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors focus:outline-hidden focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800" data-action="modal#close">
            <span class="sr-only">Close</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" class="size-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
</svg>

          </button>
        </div>

        

    <div>
      <div class="mt-2 mb-6 text-center">
        <img class="h-9 mx-auto mb-5 dark:hidden" alt="Startup Jobs" src="/assets/logo_square-d6d6c676.svg" />
        <img class="h-9 mx-auto mb-5 hidden dark:block" alt="Startup Jobs" src="/assets/logo_square-white-5c4bbb76.svg" />
        <h2 class="text-2xl font-bold mb-2 text-balance text-gray-900 dark:text-white">Log in or create an account</h2>
          <p class="text-pretty text-gray-600 dark:text-gray-400">New here? Your account is created automatically.</p>
      </div>

      <form class="button_to" method="post" action="/auth/google_oauth2"><button class="inline-flex items-center justify-center w-full px-4 py-3 text-lg font-semibold text-white dark:text-black bg-gray-900 dark:bg-gray-100 rounded-xl hover:bg-gray-800 dark:hover:bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200" data-turbo="false" type="submit"><img class="size-5" alt="Google" src="/assets/icons/social/google-668a9918.svg" /><span class="ml-2">Continue with Google</span></button><input type="hidden" name="authenticity_token" value="XUv3HfvB4bEhcOrWik1QNNgQ5QRgNEyLdSHklSLxzoYg2vhaWIFcMSOhnU1qWfNTrLNYGiNoxGRSYsCjUhUXGw" autocomplete="off" /></form>

      <form class="mt-3 flex flex-col gap-3" data-turbo-frame="_top" data-controller="disclosure" action="/login" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="m00QgmGkiJbHX8RTg7wivS6IikkizpGEhDEVHt6d3Ea5Wknu0RU2lMiDqFVFsX8rmvzyX9DsyRNvGUJhuuklQQ" autocomplete="off" />
        <button type="button"
                data-action="disclosure#reveal"
                data-disclosure-target="trigger"
                class="flex items-center justify-center w-full px-4 py-3 text-lg font-semibold text-gray-900 dark:text-white border border-gray-300 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200">
          Continue with email
        </button>

        <div data-disclosure-target="content" class="hidden flex flex-col gap-3">
          <input placeholder="jane.doe@example.com" required="required" autocomplete="email" class="px-4 py-3 text-lg rounded-xl border border-gray-300 dark:border-gray-700 w-full focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-800 focus:border-gray-400 dark:focus:border-gray-600 focus:outline-hidden transition bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400" type="email" name="email" id="email" />

          <div class="absolute size-0 overflow-hidden" data-controller="turnstile" data-turnstile-site-key-value="0x4AAAAAAEEUW7xsZlu1CHaW" data-turnstile-action-value="sign_in" data-turnstile-auto-submit-value="false"></div><input type="hidden" name="cf_turnstile_widget" id="cf_turnstile_widget" value="invisible" autocomplete="off" />

          <button type="submit" class="group relative bg-gray-900 dark:bg-gray-100 hover:bg-gray-800 dark:hover:bg-white text-white dark:text-black text-lg font-semibold px-4 py-3 rounded-xl w-full transition-all duration-200"><div class="absolute inset-0 flex items-center justify-center invisible group-disabled:visible"><svg class="animate-spin size-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" /></svg><span class="sr-only">Loading…</span></div><div class="invisible group-enabled:visible">Email me a login code</div></button>
        </div>
</form>
      <p class="mt-5 text-center text-sm text-gray-500 dark:text-gray-500 text-balance">
        By continuing, you agree to our
        <a class="text-gray-700 dark:text-gray-300 hover:underline transition whitespace-nowrap" target="_blank" href="/terms">Terms of Service</a>
        and
        <a class="text-gray-700 dark:text-gray-300 hover:underline transition whitespace-nowrap" target="_blank" href="/privacy">Privacy Policy</a>.
      </p>
    </div>


</div>    </div>
  </div>
</div>
</template></turbo-stream>