{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>signup</title>
    <link rel="stylesheet" href="{% static 'accounts/css/signup.css' %}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
    <div class="container">
      <div class="content">
        <div class="box-header">
            {% comment %} <h1>X-SYS</h1> {% endcomment %}
            <img src="{% static '/assets/x-phy-new-logo-white.png' %}" alt="" id="logo"/>
            <div>
                <span class="email-details">>.  Encryption</span>
                <span class="email-details">>.  Support</span>
            </div>
        </div>
        <div class="login-title-box">
          <h2 class="login-text">Get started</h2>
          <p class="login-url">Already have an account? <a href="{% url 'login' %}">Login</a></p>
         </div>
        
        <form method="post">
          {% csrf_token %}
          <div class="user-details">        
            <div class="input-box">
              <div>
                  <span class="details">>.  Email</span>
                  <span class="details">...</span>
              </div>
              <input type="email" name="email" maxlength="254" id="id_email"  />
            </div>
            <div class="input-box">
              <div>
                  <span class="details">>.  Password</span>
                  <span class="details">...</span>
              </div>
              <input type="password" name="password" id="id_password"  />
            </div>
            <div class="input-box">
              <div>
                  <span class="details">>.  Phone Number</span>
                  <span class="details">...</span>
              </div>
              <input type="text" name="phone_number" maxlength="15"  id="id_phone_number"/>
            </div>
            <div class="input-box">
              <div>
                  <span class="details">>.  Li-phy card identifier</span>
                  <span class="details">...</span>
              </div>
              <input type="text" name="li_phy_card_identifier" maxlength="20"  id="id_li_phy_card_identifier"/>
            </div>          
            <div class="input-box">
              <div>
                  <span class="details">>.  Company name</span>
                  <span class="details">...</span>
              </div>
              <input type="text" name="company_name" maxlength="20"  id="id_company_name"/>
            </div>          
            <div class="input-box">
              <div>
                  <span class="details">>.  Country</span>
                  <span class="details">...</span>
              </div>
              <input type="text" name="country" maxlength="50"  id="id_country"/>
            </div>
            <div class="input-box">
              <div>
                  <span class="details">>.  State</span>
                  <span class="details">...</span>
              </div>
              <input type="text" name="state" maxlength="50"  id="id_state"/>
            </div>
            <div class="input-box">
              <div>
                  <span class="details">>.  Postal Code</span>
                  <span class="details">...</span>
              </div>
              <input type="text" name="postal_code" maxlength="10"  id="id_postal_code"/>
            </div>
            <div class="input-box" style="width: 738px;">
              <div>
                  <span class="details">>.  Full Address</span>
                  <span class="details">...</span>
              </div>
              <input name="full_address" cols="40" rows="10"  id="id_full_address"/>
            </div>
          </div>       
          <div class="button">
            <input type="submit" id="registerButton" value="Register">
          </div>
        </form>
      </div>
    </div>
    <script src="{% static 'navbar/js/jquery-3.7.0.js' %}"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        attachValidationHandlers()   
      });
      function attachValidationHandlers() {
        $('#registerButton').click(function(){
            $("#id_email").parent().removeClass("error-class");
            $("#id_password").parent().removeClass("error-class");
            checkValidation()
            
            var errorCount = $(".error-class").length;
            if(errorCount == 0){
                $('#registerButton').attr('type','submit')
                $("#formDevice").submit()
            }else{
                $('#registerButton').attr('type','button')
            }
        });
      }
  
      function checkValidation(){
        let id_email=$("#id_email").val();   
        let id_password=$("#id_password").val();   

        if(id_email.length <= 0){
            $("#id_email").parent().addClass("error-class");
        } else if(id_password.length <= 0){
            $("#id_password").parent().addClass("error-class");
        }
      }
    </script>
</body>
</html>
