<turbo-stream action="update" target="one_time_code_form"><template>
  <div class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <!--
      Background backdrop, show/hide based on modal state.

      Entering: "ease-out duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in duration-200"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div
      class="fixed inset-0 bg-gray-500/75 transition-opacity"
      aria-hidden="true"
      data-views--turbo-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 w-screen">
      <div class="flex min-h-full justify-center p-4 text-center items-center sm:p-0">
        <!--
          Modal panel, show/hide based on modal state.

          Entering: "ease-out duration-300"
            From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            To: "opacity-100 translate-y-0 sm:scale-100"
          Leaving: "ease-in duration-200"
            From: "opacity-100 translate-y-0 sm:scale-100"
            To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        -->
        <div
          class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all md:mx-4 w-full md:max-w-xl max-h-[calc(100dvh-4rem)]"
          data-views--turbo-modal-target="panel"
          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"
        >
          <!-- Header -->
          <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 flex justify-between items-center">
            <div class="mx-auto text-white">
              <h1 class="text-lg font-bold flex items-center space-x-2">
                <span>🔐</span>
                <span class="tracking-widest">ワンタイムコードを取得</span>
              </h1>
            </div>
          </div>
          <div class="max-h-[calc(100dvh-11.25rem)] p-6 overflow-y-auto space-y-8">
            <form data-action="turbo:submit-end-&gt;views--turbo-modal#hide" action="/signin" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="wAnhjUUwfjPD3-LNJ8YA5xf90_677L1qz7_psiQcL74vuhlx3liwxxOR8yGjWBOnCSd6hxd24Gk3lF8cdxMYWQ" autocomplete="off" />
              <div class="w-full md:max-w-xs mx-auto space-y-4">
                <div>
                  <label class="block text-sm md:text-base font-medium text-gray-700 required-label" for="email_address">メールアドレス</label>
                  <input class="w-full mt-2 border-2 border-purple-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-0 focus:border-blue-500 transition" placeholder="hi@complee.day" required="required" type="email" name="email_address" id="email_address" />
                </div>
                <!-- Action Buttons -->
                <div>
                  <input type="submit" name="commit" value="取得する" class="w-full py-3 px-6 rounded-xl font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition flex-1 text-center flex items-center justify-center cursor-pointer" data-disable-with="取得する" />
                </div>
              </div>
</form>          </div>
        </div>
      </div>
    </div>
  </div>
</template></turbo-stream>