<div class="login-register-block np-hidden-mobile">
  {% if current_person.signed_in? %}
    <div class="welcome-block">
      <p class="welcome-block-header">Welcome {{current_person.first_name}}!</p>
      
    </div>
  {% else %}
    <div class="login-block">
      <p class="block-header">Login</p>
      <form class="np-form np-box-content homepage-login-form" action="{% route login %}" method="post" novalidate>
        {% 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-form-action">
          {% t shared.sign_in %}
        </button>
        <a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
          Forgot Password
        </a>
      </form>
    </div>
    <hr  style="margin-bottom:32px" />
    <div class="register-block">
      <p class="block-header">Register</p>
      <p class="register-block-subhead">If this is your first time visiting, please complete your registration</p>
      <a href="{% route sign_up %}" class="np-button register-btn">Register</a>
    </div>
  {% endif %}
</div>

<style>

  .login-register-block {
    background: #f3f3f3;
    padding: 32px;
    color: #212121;
    display: block;
    margin-bottom: 32px;
    text-decoration: none;
  }

  .login-register-block .np-input {
    background:#fff;
  }

  .homepage-login-form {
    width:auto;
    margin-bottom:32px;
    display:block;
  }

  .register-btn {
    color:#fff!important;
  }

</style>