<main class="np-box-container np-open-access">
  <div class="np-box">
    {% include "header_minimal" %}
    <div class="np-box-content-container">
      <form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
        {% form_authenticity_token %}
        <div class="np-form-headline">
          {% t shared.welcome_to_school, school_name: current_school.name %}
        </div>
        <div class="np-form-subheadline">
          {% t .headline, key: current_school.course_vocabulary %}
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_first_name">
            {% t shared.first_name %}
          </label>
          <input
            class="np-input"
            autofocus="autofocus"
            type="text"
            name="first_name"
            id="learner_first_name"
            value="{{ form.first_name }}"
          />
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_last_name">
            {% t shared.last_name %}
          </label>
          <input
            class="np-input"
            type="text"
            name="last_name"
            id="learner_last_name"
            value="{{ form.last_name }}"
          />
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_email">
            Company Email
          </label>
          <input
            class="np-input"
            type="text"
            name="email"
            id="learner_email"
            value="{{ form.email }}"
          />
        </div>
        <p style="display: none;" id="bad_email_alert">PLEASE ENTER YOUR COMPANY EMAIL</p>
        <input
          type="submit"
          name="commit"
          value="{% t shared.enter %}"
          id="submit_button"
          class="np-button np-button-big np-form-action"
        />
      </form>
    </div>
  </div>
</main>
<script>
  // document.getElementById("header").scrollIntoView();

  function checkIfInputsExist (){
    window.setTimeout(function(){
      // Regular expression to check if string is email
      const regexExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      // Grabs Email Address Value
      const learnerEmail = $("#learner_email")[0].value;

      const blockedEmails = [
	"gmail.com", "yahoo.com", "hotmail.com", "aol.com", "outlook.com",
	"icloud.com", "me.com", "mac.com"
	]

      if ($("#learner_email")[0].value.length > 0){
        if(regexExp.test(learnerEmail) == true){
	  var slicedEmail = learnerEmail.split('@');
	  if (blockedEmails.indexOf(slicedEmail[1]) > -1) {
	    $("#learner_email").css("background", "salmon");
	    $("#bad_email_alert").css("color", "#f2f4f5");
	    $("#bad_email_alert").css("display", "block");
	    $("#submit_button").css("pointer-events","none");
          }
          else {
	    $("#learner_email").css("background", "#f2f4f5");
	    $("#bad_email_alert").css("display", "none");
	    $("#submit_button").css("pointer-events", "auto");
          }
        } else {
          $("#learner_email").css("background", "#f2f4f5");
          $("#bad_email_alert").css("display", "none");
          $("#submit_button").css("pointer-events", "auto");
        }
      }
    }, 500)
  }
  document.addEventListener('keyup', checkIfInputsExist);
  console.log(123213213);
</script>
<style>
  .np-input-label{
    color: #ffffff;
  }
</style>
