{% extends 'layouts/base-fullscreen.html' %}

{% block title %}Otp Login {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}



{% block content %}

<!-- Page content -->
<div class="container mt--8 pb-5">
  <div class="row justify-content-center">
    <div class="col-lg-5 col-md-7">
      <div class="card bg-secondary shadow border-0">
        <div class="card-header bg-transparent pb-5">
          <div class="text-muted text-center mt-2 mb-3">
            <h1>OTP based Login</h1>
            {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}">
              {{ message }}
            </div>
            {% endfor %}
            {% endif %}
            {% endwith %}
          </div>
        </div>
        <div class="card-body px-lg-5 py-lg-5">
          <form role="form" method="post" action="/otp_login" onsubmit="return validateLoginForm()">
            {{ form.hidden_tag() }}
            <div class="form-group mb-3">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-single-02"></i></span>
                </div>
                {{ form.email(placeholder="Email",autofocus=true,class="form-control",size=30) }}
              </div>
              <div id="email-error" class="text-danger"></div>
            </div>
            <div class="text-center">
              <button type="submit" name="login" class="btn btn-primary my-4">Send Code</button>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>
</div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

<script>
  function validateLoginForm() {
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    var emailRegex = /^[a-zA-Z0-9._%+-]+@parablu\.com$/;
    var valid = true;
  
    // Validate email
    if (!emailRegex.test(email)) {
      document.getElementById('email-error').innerHTML = 'Please enter a valid email address with parablu.com domain';
      valid = false;
    } else {
      document.getElementById('email-error').innerHTML = '';
    }
  
    // Validate password
    if (password.length < 8) {
      document.getElementById('password-error').innerHTML = 'Password should be at least 8 characters long';
      valid = false;
    } else {
      document.getElementById('password-error').innerHTML = '';
    }
  
    return valid;
  }
  </script>
  
{% endblock javascripts %}