<div class="container" style="margin-top: 100px;">
  <div class="d-flex justify-content-center h-50">
    <div class="user_card">
      <div class="d-flex justify-content-center">
        <div style="margin-top: 10px;margin-bottom:-90px;">
          <h3>User Management Portal</h3>
        </div>
      </div>
      <div class="d-flex justify-content-center form_container">
        <form #registerForm="ngForm" (ngSubmit)="onRegister(registerForm.value)">

          <div class="input-group mb-3">
            <div class="input-group-append">
              <span class="input-group-text"><i class="fas fa-user"></i></span>
            </div>
            <input type="text" class="form-control" name="firstName" placeholder="First Name"
                   ngModel #firstNameInput="ngModel" required>
          </div>
          <span class="help-block" style="color:red;" *ngIf="firstNameInput.invalid && firstNameInput.touched">
            Please enter your First Name</span>

          <div class="input-group mb-3">
            <div class="input-group-append">
              <span class="input-group-text"><i class="fas fa-user"></i></span>
            </div>
            <input type="text" class="form-control" name="lastName" placeholder="Last Name"
                   ngModel #lastNameInput="ngModel" required>
          </div>
          <span class="help-block" style="color:red;" *ngIf="lastNameInput.invalid && lastNameInput.touched">
            Please enter your Last Name</span>

          <div class="input-group mb-3">
            <div class="input-group-append">
              <span class="input-group-text"><i class="fas fa-id-card"></i></span>
            </div>
            <input type="text" class="form-control" name="username" placeholder="Username"
                   ngModel #usernameInput="ngModel" required>
          </div>
          <span class="help-block" style="color:red;" *ngIf="usernameInput.invalid && usernameInput.touched">
            Please enter a username</span>

          <div class="input-group mb-2">
            <div class="input-group-append">
              <span class="input-group-text"><i class="fas fa-envelope"></i></span>
            </div>
            <input type="email" class="form-control" name="email" placeholder="Email"
                   ngModel #emailInput="ngModel" required>
          </div>
          <span class="help-block" style="color:red;"
                *ngIf="emailInput.invalid && emailInput.touched">Please enter an email.</span>

          <div class="d-flex justify-content-center mt-3 login_container">
            {{registerForm.invalid || showLoading}}
            <button type="submit" [disabled]="registerForm.invalid || showLoading" name="button" class="btn login_btn">
              <i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
              <span *ngIf="showLoading">{{showLoading ? 'Loading...' : 'Register'}}</span>
            </button>
          </div>
        </form>
      </div>
      <div class="mt-4">
        <div class="d-flex justify-content-center links">
          Already have an account? <a routerLink="/login" class="ml-2" style="color: #2C3E50;">Log In</a>
        </div>
      </div>
    </div>
  </div>
</div>


