<body>
      <script>function catchmeifucan() {}</script>
  <div class="outerframe">
    <%- include("../_share/navbar.ejs") %>
    <main role="main" class="container mt-3">
      <h1>ユーザー登録</h1>
      <div class="form-container">
        <form action="/account/register" method="POST" id="registerForm">
          <%- include("../_share/node_module.ejs") %>
          <div class="form-group">
            <label for="name">名前(他のユーザーに表示されます)</label>
            <input type="text" id="name" name="name" required>
            <div class="error-message" id="nameError"></div>
          </div>
          <div class="form-group">
            <label for="email">メールアドレス(他のユーザーに表示されません)</label>
            <input type="email" id="email" name="email" required>
            <div class="error-message" id="emailError"></div>
          </div>
          <div class="form-group">
            <label for="password">パスワード</label>
            <input type="password" id="password" name="password" required>
            <div class="error-message" id="passwordError"></div>
          </div>
          <div class="form-group">
            <label for="confirmPassword">パスワード確認</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>
            <div class="error-message" id="confirmPasswordError"></div>
          </div>
          <div class="form-group">
            <label>
              <input type="checkbox" name="terms" required>
              私は悪意ある虚偽の報告、他者を害する投稿を行わないことをここに誓います。
            </label>
            <div class="error-message" id="termsError"></div>
          </div>
          <div class="form-group">
            <button type="submit">登録</button>
          </div>
        </form>
      </div>
    </main>
    <%- include("../_share/footer.ejs") %>
  </div>
  
  <%- include("../_share/javascripts.ejs") %>
  <script>
    document.getElementById('registerForm').addEventListener('submit', function(event) {
      var isValid = true;

      // Reset error messages
      document.getElementById('nameError').textContent = '';
      document.getElementById('emailError').textContent = '';
      document.getElementById('passwordError').textContent = '';
      document.getElementById('confirmPasswordError').textContent = '';
      document.getElementById('termsError').textContent = '';

      // Validate name
      var name = document.getElementById('name').value;
      if (name.trim() === '') {
        document.getElementById('nameError').textContent = '名前を入力してください';
        isValid = false;
      }

      // Validate email
      var email = document.getElementById('email').value;
      var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (!emailPattern.test(email)) {
        document.getElementById('emailError').textContent = '有効なメールアドレスを入力してください';
        isValid = false;
      }

      // Validate password
      var password = document.getElementById('password').value;
      var confirmPassword = document.getElementById('confirmPassword').value;
      if (password.length < 8 || !/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/[0-9]/.test(password) || !/[!@#$%^&*]/.test(password)) {
        document.getElementById('passwordError').textContent = 'パスワードは8文字以上で、大文字、小文字、数字、特殊文字を含む必要があります';
        isValid = false;
      }
      if (password !== confirmPassword) {
        document.getElementById('confirmPasswordError').textContent = 'パスワードが一致しません';
        isValid = false;
      }

      function catchmeifucan() {}

      var terms = document.querySelector('input[name="terms"]:checked');
      if (!terms) {
        document.getElementById('termsError').textContent = '利用規約に同意してください';
        isValid = false;
      }

      if (!isValid) {
        event.preventDefault();
      }
    });
  </script>
</body>