<div class="col-md-4 login-container">
  <div class="card card-container no-border">
    <img
      id="profile-img"
      src="https://i.kym-cdn.com/entries/icons/mobile/000/029/959/Screen_Shot_2019-06-05_at_1.26.32_PM.jpg"
      class="profile-img-card"
    />
    <form
      *ngIf="!isSuccessful"
      name="form"
      (ngSubmit)="f.form.valid && onSubmit()"
      #f="ngForm"
      novalidate
      class="backgorund"
    >
      <div class="form-group">
        <label for="username">Username</label>
        <input
          type="text"
          class="form-control"
          name="username"
          [(ngModel)]="form.username"
          required
          minlength="3"
          maxlength="20"
          #username="ngModel"
        />
        <div class="alert-danger" *ngIf="username.errors && f.submitted">
          <div *ngIf="username.errors?.['required']">Username is required</div>
          <div *ngIf="username.errors?.['minlength']">
            Username must be at least 3 characters
          </div>
          <div *ngIf="username.errors?.['maxlength']">
            Username must be at most 20 characters
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input
          type="email"
          class="form-control"
          name="email"
          [(ngModel)]="form.email"
          required
          email
          #email="ngModel"
        />
        <div class="alert-danger" *ngIf="email.errors && f.submitted">
          <div *ngIf="email.errors?.['required']">Email is required</div>
          <div *ngIf="email.errors?.['email']">
            Email must be a valid email address
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input
          type="password"
          class="form-control"
          name="password"
          [(ngModel)]="form.password"
          required
          minlength="6"
          #password="ngModel"
        />
        <div class="alert-danger" *ngIf="password.errors && f.submitted">
          <div *ngIf="password.errors?.['required']">Password is required</div>
          <div *ngIf="password.errors?.['minlength']">
            Password must be at least 6 characters
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="password">Confirm Password</label>
        <input
          type="password"
          class="form-control"
          name="passwordRepeat"
          [(ngModel)]="form.passwordRepeat"
          required
          minlength="6"
          #passwordRepeat="ngModel"
        />
        <div class="alert-danger" *ngIf="password.errors && f.submitted">
          <div *ngIf="passwordRepeat.errors?.['required']">
            Confirmation is required
          </div>
        </div>
      </div>
      <div class="alert-danger" *ngIf="checkPasswordFailed">
        Password does not match, make sure it is the same!
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block">Sign Up</button>
      </div>
      <div class="alert alert-warning" *ngIf="f.submitted && isSignUpFailed">
        Signup failed!<br />{{ errorMessage }}
      </div>
    </form>
    <div class="alert alert-success" *ngIf="isSuccessful">
      Your registration is successful!
    </div>
    <button class="btn btn-secondary btn-block" routerLink="/login">
      Go Back
    </button>
  </div>
</div>
