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

{% block title %} Reset Request Form {% 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>Reset Form</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="" 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>

                {% if form.email.errors %}
                {{ form.email(placeholder="Email",autofocus=true,class="form-control",size=30) }}
                <div id="email-error" class="text-danger">

                  {% for error in form.email.errors %}
                  <span>{{ error }}</span>
                  {% endfor %}
                </div>
                {% else %}
                {{ form.email(placeholder="Email",autofocus=true,class="form-control",size=30) }}
                {% endif %}
              </div>

            </div>

            <div class="text-center">
              <button type="submit" name="requestForm" class="btn btn-primary my-4">Sign in</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 = '';
    }

    return valid;
  }
</script>

{% endblock javascripts %}