{% extends "base.html" %}

{% block body %}
  <div class="container-fluid mt-5">
    <div class="row justify-content-center tab-content">
      <div class="col-sm col-lg-3">
        <form id="form" class="needs-validation" method="post">
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input id="email" name="email" type="email" class="form-control" required>
{#            <div class="invalid-feedback">You must enter an email.</div>#}
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input id="password" name="password" type="password" class="form-control" required>
{#            <div class="invalid-feedback">You must enter a password.</div>#}
          </div>
          <div class="mb-3">
            <label for="password_confirm" class="form-label">Retype Password</label>
            <input id="password_confirm" name="password_confirm" type="password" class="form-control" required>
{#            <div class="invalid-feedback">You must confirm your password.</div>#}
          </div>
          <button id="submit" name="submit" type="submit" class="btn btn-primary">Register</button>
        </form>
      <div class="mt-3">
        Already have an account? <a href="{{ url_for('login') }}">Login</a>
      </div>
        {% with messages = get_flashed_messages() %}
          {% if messages %}
            <div class="alert alert-danger mt-2" role="alert">
              {{ messages[0] }}
            </div>
          {% endif %}
        {% endwith %}
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
      let form = $("#form");
      let email = $("#email");
      let password = $("#password");
      let password_confirm = $("#password_confirm");

      {#$("input[type='password']").attr("minlength", 4)#}

      function password_validate() {
          let password_val = password.val();
          if (password_val.length < 4) {
              return "Password must be at least 4 characters long!";
          }
          return "";
      }

      function password_confirm_validate() {
          let password_val = password.val();
          let password_confirm_val = password_confirm.val();
          if (password_confirm_val !== password_val) {
              return "passwords do not match!";
          }
          return "";
      }

      function form_valid() {
          let password_result = password[0].setCustomValidity(password_validate());
          let password_confirm_result = password_confirm[0].setCustomValidity(password_confirm_validate());
          return form[0].checkValidity();
      }

      {#form.on("submit", (event) => {#}
      {#    if (!form_valid()) {#}
      {#        event.preventDefault();#}
      {#        event.stopPropagation()#}
      {#    }#}
      {#    form.addClass("was-validated");#}
      {#})#}
  </script>
{% endblock %}