
<turbo-stream action="update" target="modal"><template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50 backdrop-blur-sm"
     data-controller="modal"
     data-modal-auto-show-value="true"
     data-modal-close-on-backdrop-value="true"
     data-modal-target="backdrop">
  <div class="relative w-full max-w-md mx-4 sm:mx-auto bg-surface-secondary dark:bg-surface-dark-secondary shadow-md rounded-lg border border-gray-300 dark:border-gray-700 p-4 sm:p-6 max-h-[90vh] overflow-y-auto">
    <button class="absolute top-4 right-4 w-10 h-10 flex items-center justify-center text-foreground-muted dark:text-foreground-dark-muted hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
            data-action="click->modal#close">
      <span class="sr-only">閉じる</span>
      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
      </svg>
    </button>
    
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-700 dark:text-gray-200">
  会員登録
</h2>

  <p class="mt-2 text-sm">
    アカウントをお持ちでない場合は、以下のフォームに必要事項を入力してください。
  </p>


  <form action="/signup" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="EfOG2TKeGyqXfKEXpAn3U-jeigeJaD0pJZOCRabRxlwY-NUbqa9OebrlEBb3B5BS0us5JZIPJI-jrvP2nKI6wA" autocomplete="off" />
    <div class="mt-6">
      <label class="block text-gray-700 dark:text-gray-300 mb-1" for="user_registration_form_email">メールアドレス</label>
      <div class="mt-1">
        <input id="email" autocomplete="email" placeholder="tarou@example.com" required="required" class="w-full p-3 border rounded-lg bg-surface-elevated dark:bg-surface-dark-elevated dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" type="email" name="user_registration_form[email]" />
      </div>
      
    </div>

    <div class="mt-4" data-controller="password-strength-popover">
      <label class="block text-gray-700 dark:text-gray-300 mb-1" for="user_registration_form_password">パスワード</label>
      <div class="mt-1">
        <input id="password" autocomplete="new-password" placeholder="••••••••" required="required" class="w-full p-3 border rounded-lg bg-surface-elevated dark:bg-surface-dark-elevated dark:text-gray-200 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" data-popover-target="popover-password" data-popover-placement="bottom" data-password-strength-popover-target="input" data-action="input-&gt;password-strength-popover#updateStrength" type="password" name="user_registration_form[password]" />
        <div data-popover id="popover-password" role="tooltip" class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
          <div class="p-3 space-y-2">
            <h3 class="font-semibold text-foreground-primary dark:text-foreground-dark-primary">8文字以上入力してください。</h3>
            <div data-password-strength-popover-target="indicator" class="grid grid-cols-4 gap-2">
              <div class="bar h-1 bg-gray-200 dark:bg-gray-600"></div>
              <div class="bar h-1 bg-gray-200 dark:bg-gray-600"></div>
              <div class="bar h-1 bg-gray-200 dark:bg-gray-600"></div>
              <div class="bar h-1 bg-gray-200 dark:bg-gray-600"></div>
            </div>
            <p>推奨:</p>
            <ul>
              <li class="flex items-center mb-1" data-password-strength-popover-target="check1">
                <svg class="check w-4 h-4 mr-2 text-green-400 dark:text-green-500 hidden" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                <svg class="times w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                大文字と小文字を含む
              </li>
              <li class="flex items-center mb-1" data-password-strength-popover-target="check2">
                <svg class="check w-4 h-4 mr-2 text-green-400 dark:text-green-500 hidden" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                <svg class="times w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                数字を含む
              </li>
              <li class="flex items-center mb-1" data-password-strength-popover-target="check3">
                <svg class="check w-4 h-4 mr-2 text-green-400 dark:text-green-500 hidden" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                <svg class="times w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                記号を含む
              </li>
              <li class="flex items-center" data-password-strength-popover-target="check4">
                <svg class="check w-4 h-4 mr-2 text-green-400 dark:text-green-500 hidden" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                <svg class="times w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                12文字以上の長さ
              </li>
            </ul>
          </div>
          <div data-popper-arrow></div>
        </div>
      </div>
      
    </div>

    <p class="mt-6 text-sm text-gray-700 dark:text-gray-300">
      <a target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 hover:underline" href="/guide/tos">利用規約</a>
      をご確認いただき、同意の上で登録してください。
    </p>

    <div class="mt-6">
      <input type="submit" name="commit" value="規約に同意して登録する" class="w-full p-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700" data-disable-with="規約に同意して登録する" />
    </div>
</form>
<div class="mt-6 text-center">
  <a class="text-sm text-blue-600 dark:text-blue-400 hover:underline" data-turbo-stream="true" href="/login">ログインはこちら</a>
</div>


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


