<div class="col-md-12 register-form">
  <div class="message" *ngIf="isLoggedIn">
    <h4> Pentru a te putea inregistra trebuie sa iesi din cont </h4>
    <a href class="nav-link" (click)="logout()">Logout</a>
  </div>
  <div class="card card-container" *ngIf="!isLoggedIn">
    <h1 class="text-center"><strong >AllfreeApp</strong></h1>
    <img
      id="profile-img"
      src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
      class="profile-img-card"
    />
    <h2> Inregistare </h2>

    <div class="role-acces">
      <h2 *ngIf="isAdminRequest()">Admin request</h2>
    </div>
    <form
      *ngIf="!isSuccessful"
      name="form"
      #userForm="ngForm"
      (ngSubmit)="userForm.form.valid && onSubmit()"
      novalidate
    >
      <!-- display test -->
      <!-- <p>FORM</p><br>
    {{userForm.value | json}}
    <br>
    <p>USER</p><br>-->
      <!-- {{user | json}}  -->
      <div class="form-group">
        <label for="lastName">Prenume</label>
        <input
          type="text"
          class="form-control"
          name="firstName"
          [(ngModel)]="user.firstName"
          #firstName="ngModel"
        />
      </div>
      <div class="form-group">
        <label for="lastName">Nume</label>
        <input
          type="text"
          class="form-control"
          name="lastName"
          [(ngModel)]="user.lastName"
          #lastName="ngModel"
        />
      </div>
      <div class="form-group">
        <label for="username">Username</label>
        <input
          type="text"
          class="form-control"
          name="username"
          [(ngModel)]="user.username"
          required
          minlength="3"
          maxlength="20"
          #username="ngModel"
        />
        <div
          class="alert-danger"
          *ngIf="userForm.submitted && username.invalid"
        >
          <div *ngIf="username.errors.required">
            Username-ul este obligatoriu
          </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)]="user.email"
          required
          email
          #email="ngModel"
        />
        <div class="alert-danger" *ngIf="userForm.submitted && email.invalid">
          <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)]="user.password"
          required
          minlength="6"
          #password="ngModel"
        />
        <div
          class="alert-danger"
          *ngIf="userForm.submitted && password.invalid"
        >
          <div *ngIf="password.errors.required">Password is required</div>
          <div *ngIf="password.errors.minlength">
            Parola trebuie sa contina minim 6 caractere
          </div>
        </div>
      </div>
      <div *ngIf="isAdminRequest()" class="form-group">
        <mat-form-field>
          <mat-label>ROL</mat-label>
          <mat-select
            [(ngModel)]="role"
            (selectionChange)="updateRole($event.value)">
            <mat-option value="ROLE_USER">USER</mat-option>
            <mat-option value="ROLE_ADMIN">ADMIN</mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div *ngIf="!isAdminRequest()" class="form-group">
        <button class="btn btn-primary btn-block">Inregistrare</button>
      </div>
      <div *ngIf="isAdminRequest()" class="form-group">
        <button class="btn btn-primary btn-block">Adauga user</button>
      </div>
      <div>
<!--        <button (click)="goBackFromRegister()" class="btn btn-danger btn-block">-->
<!--          Anulare-->
<!--        </button>-->
        <h4> Daca ai deja cont, logheaza-te <a href="/login"> <u> aici </u></a></h4>
      </div>

      <div
        class="alert alert-warning"
        *ngIf="userForm.submitted && isSignUpFailed"
      >
        Inregistrarea nu a reusit!<br/>{{ errorMessage }}
      </div>
    </form>

    <div class="alert alert-success" *ngIf="isSuccessful">
      Inregistrare cu succes!
    </div>
  </div>
</div>