{% extends './dev.html' %}

{% load static %}

{% block title %}
  Sign Up | Devnoms
{% endblock %}

{% block style %}
  <link rel="stylesheet" href="{% static 'chat/css/signup.css' %}" />
  <script src="{% static 'chat/js/signup.js' %}" defer></script>
{% endblock %}

{% block content %}
  <div class="main_box">
    <div class="signup-box">
      <div class="logo">
        <img src="https://pdf813.netlify.app/chat/img/logo.png" alt="DevNoms Logo" />
      </div>
      <h2>Create an Account</h2>
      <form id="signup-form" action="/signup" method="POST">
        <!-- Name Field -->
        <div class="form-group">
          <label for="name">Username</label>
          <div class="input-group">
            <input type="text" name="name" id="name" placeholder="Enter your username" />
          </div>
          <div class="error-message" id="name-error"></div>
        </div>

        <!-- Email Field -->
        <div class="form-group">
          <label for="email">Email</label>
          <div class="input-group">
            <input type="text" name="email" id="email" placeholder="Enter your email" />
          </div>
          <div class="error-message" id="email-error"></div>
        </div>

        <!-- Password Field -->
        <div class="form-group">
          <label for="password">Password</label>
          <div class="input-group">
            <input type="password" name="password" id="password" placeholder="Enter your password" />
            <span id="toggle-password" class="eye-icon" onclick="togglePasswordVisibility('password')"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-eye-48.png" alt="Toggle Password Visibility" /></span>
          </div>
          <div class="error-message" id="password-error"></div>
        </div>

        <!-- Confirm Password Field -->
        <div class="form-group">
          <label for="confirm-password">Confirm Password</label>
          <div class="input-group">
            <input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm your password" />
            <span id="toggle-confirm-password" class="eye-icon" onclick="togglePasswordVisibility('confirm-password')"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-eye-48.png" alt="Toggle Password Visibility" /></span>
          </div>
          <div class="error-message" id="confirm-password-error"></div>
        </div>

        <!-- Signup Button -->
        <div class="signup-btn">
          <button type="submit" id="signup-btn">Sign Up</button>
        </div>

        <!-- Login Link -->
        <div class="login-link">
          <p>
            Already have an account? <a href="/login">Login</a>
          </p>
        </div>
      </form>
    </div>
  </div>
{% endblock %}