{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'accounts/css/otp.css' %}">
    <title>OTP Verification</title>
</head>
<body>    
    {% comment %} <form method="post">
        {% csrf_token %}
        <label for="email_otp">Enter OTP:</label>
        <input type="text" name="email_otp" id="email_otp" required>
        <button type="submit">Verify OTP</button>
    </form> {% endcomment %}
     <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">OTP Verification</h2>
          <p class="login-url">I didn’t receive code! <a href="{% url 'login' %}">Resend</a></p>
         </div>
        
        <form method="post" autocomplete='off'>
          {% csrf_token %}
          {% comment %} <input type="text" name="email_otp" id="email_otp" maxlength="6" required> {% endcomment %}
          <div id="inputs" class="inputs">
              <input class="input" type="number" name="email_otp1" id="email_otp1" inputmode="numeric" maxlength="1" required/>
              <input class="input" type="number" name="email_otp2" id="email_otp2" inputmode="numeric" maxlength="1" required/>
              <input class="input" type="number" name="email_otp3" id="email_otp3" inputmode="numeric" maxlength="1" required/>
              <input class="input" type="number" name="email_otp4" id="email_otp4" inputmode="numeric" maxlength="1" required/>
              <input class="input" type="number" name="email_otp5" id="email_otp5" inputmode="numeric" maxlength="1" required/>
              <input class="input" type="number" name="email_otp6" id="email_otp6" inputmode="numeric" maxlength="1" required/>
          </div>
          <div class="button">
            <input type="submit" value="Submit">
          </div>
        </form>
        {% if messages %}
            <ul class="errorlist">
                {% for message in messages %}
                    <li class="error-message">{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
      </div>
    </div>
    <script src="{% static 'accounts/js/otpScript.js' %}"></script>
</body>
</html>
