<body>
  {% include "header" %}
  <main class="np-main np-box-container">
    <div class="np-box">
      <img class="hero-image-left-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/SkuidSkool-RegisterHero.svg">
      <img class="hero-image-left-mobile" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/skuid+skool+V3.svg">
      <div class="np-box-content-container">
          <form class="np-form np-box-content" action="{% route login %}" method="post" novalidate>
            <div class="np-form-title"> Welcome to Skuid Skool </div>
            <div class="np-form-subtitle"> Login below </div>
              {% form_authenticity_token %}
              <div class="np-form-field">
                <label class="np-input-label" for="learner_email">
                  {% t shared.email_address %}
                </label>
                <input
                  class="np-input"
                  autofocus="autofocus"
                  type="email"
                  name="learner[email]"
                  id="learner_email"
                >
              </div>
              <div class="np-form-field">
                <label class="np-input-label" for="learner_password">
                  {% t shared.password %}
                </label>
                <input
                  class="np-input"
                  type="password"
                  name="learner[password]"
                  id="learner_password"
                >
              </div>
              <button type="submit" class="np-button np-button-big np-button-large-font np-form-action" style="border-radius: 56px;">
                {% t shared.sign_in %}
              </button>
              <a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
                {% t .forgot_password %}
              </a>
              {% if features.account_creation? %}
                <a class="np-form-link np-button-color" href="{% route sign_up %}">
                  {% t shared.sign_up %}
                </a>
              {% endif %}
              {% if features.request_access? %}
                <a
                  class="np-form-link np-button-color"
                  target="_blank"
                  href="{{ current_school.request_access_link }}"
                >
                  {{ current_school.request_access_label }}
                </a>
              {% endif %}
          </form>
          </a>
        </span>
      </div>
    </div>
  </main>
  {% include "footer" %}
</body>

<style>
  .np-main {
    margin: 25px 0;
  }
  .np-box {
    display: flex;
    flex-direction: row;
    width: unset !important;
    box-shadow: none;
  }
  .np-box-container {
    height: unset !important;
  }
  .hero-image-left-desktop {
    width: 60%;
  }
  .hero-image-left-mobile {
    width: 100%;
    display: none;
  }
  .np-box-content-container {
    margin-top: 0;
    margin-bottom: 0;
    padding: 2rem 0 2rem 2.25rem;
    display: flex;
    flex-direction: column;
  }
  .np-form-title {
    font-weight: 600;
    color: #1B1C1D;
    font-size: 28px;
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
  }
  .np-form-subtitle {
    color: #1B1C1D;
    font-size: 16px;
    justify-content: center;
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .np-input {
    background-color: #FFF6F0;
    border: none;
    border-radius: 4px;
  }
  .np-input::placeholder {
    color: #6F7277;
    font-size: 16px;
  }
  #default-option {
    color: #6F7277;
    font-size: 16px;
  }
  .selection-option {
    font-family: Inter;
  }
  .body {
    height: 100%;
  }
  #learner_role {
    color: #1B1C1D;
    text-align: left;
    text-align-last: left;
  }
  @media only screen and (min-width: 1190px) {
    .hero-image-left-desktop {
      min-width: 60%;
    }
    .np-box-content-container {
      margin-right: 40px;
    }
  }
  @media only screen and (max-width: 768px) {
    .np-box-content-container {
      padding: 2rem 2rem 2.25rem;
    }
    .hero-image-left-desktop {
      display: none;
    }
    .hero-image-left-mobile {
      display: block;
    }
    .np-box {
      flex-direction: column;
      margin: 0;
    }
    .np-main {
      margin: 0;
    }
    .np-box-content-container {
      margin-left: 0;
    }
  }
  #send_button {
    pointer-events: none;
    background-color: #6F7277;
  }
</style>

<script>
  document.getElementById("header").scrollIntoView();

  if ($('.np-alert-wrapper>div>p>strong').text() === 'Ooops! Please try again.') {
    $('.np-alert-wrapper>div>p>strong').text('Oops! Please try again.')
  }
</script>