<div class="page-unauthorized page-login bg-splash">
    <div class="unauthorized-content vh-sm-100">
      <div class="row flex-column h-100 align-items-center justify-content-between">
        <section id="header" class="col">
          <img src="{{rootURL}}assets/images/logo.svg" alt="Hino" class="unauthorized-logo-hino">
        </section>
        <section id="main" class="col">
          <img
            src="{{rootURL}}assets/images/logo-heart-horizontal.svg"
            class="unauthorized-logo-heart"
            alt="Hearts">
          {{#if errorMessage}}
              <div class="alert on alert-danger alert-dismissible fade show" role="alert">
                  {{ errorMessage }}
              </div>
          {{/if}}
          {{#if errorMessages}}
              <div class="alert on alert-danger alert-dismissible fade show" role="alert">
                  <ul class="mb-0 ml-2">
                  {{#each errorMessages as |item| }}
                      <li>{{ item }}</li>
                  {{/each}}
                  </ul>
              </div>
          {{/if}}
          <form>
            <div class="form-group">
              <Input @value={{ identification }} type="text" id="inputUser" name="UserName" class="form-control bg-white" placeholder="Username" required="" autofocus="" />
            </div>
            <div class="form-group">
              {{password-toggle password=password  buttonClass="btn" inputClass="form-control bg-white" placeholder="Password"}}
            </div>
            <button class="btn btn-block btn-hino-red-darker font-weight-bold rounded-pill {{if userinfo "" "disabled" }}" type="submit" {{ action "authenticateWithOAuth2" }}>Login</button>
          </form>
          <p class="m-0 mt-8 text-center">
            <LinkTo @route="forgot-password">Forgot Password?</LinkTo>
          </p>
        </section>
        <section id="footer" class="col">
          <div class="text-center mt-5 pb-2">
            <small>Copyright 2020 HINO New HEARTS. All Rights Reserved.</small>
          </div>
        </section>
      </div>
    </div>
</div>