<div class="user-list">
  <div class="new-user-btn">
   <button  (click) = "newUser('ROLE_ADMIN')" class="btn btn-primary"> User Nou</button>
  </div>
<table class="table table-hover table-sm">
    <thead class="thead-dark">
      <tr>
        <th>Id</th>
        <th>Nume</th>
        <th>Prenume</th>
        <th>Email</th>
        <th>UserName</th>
        <th>Rol-Acces</th>
        <th>Actiuni</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of users">
        <td>
          <button type="button" class="btn btn-primary" (click)="setuserDetails(user)">
            {{user.id}}
          </button>
        </td>
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.email}}</td>
        <td>{{user.username}}</td>
        <td>
          <p *ngFor = "let role of user.roles">
          {{role.name}},
          </p>
        </td>
            <td>
                <button (click) = "updateUser(user.id)" class = "btn btn-info"> Editeaza</button>
                <button (click) = "deleteUser(user.id)" class = "btn btn-danger" style="margin-left: 5px"> Sterge</button>
                <button (click) = "userDetails(user.id)" class = "btn btn-info" style="margin-left: 5px"> Detalii</button>
<!--              <p-confirmDialog [style]="{width: '50vw'}" [baseZIndex]="10000"></p-confirmDialog>-->
<!--              <p-button (click)="confirm1()"  label="Confirm"></p-button>-->
            </td>
      </tr>
    </tbody>
  </table>

</div>

  <script>
    let pathname = window.location.pathname;
    if (pathname == "") {
      $(".nav .nav-item a:first").addClass("active");
      $(".nav .nav-item a:last").removeClass("active");
    } else if (pathname == "/users") {
      $(".nav .nav-item a:last").addClass("active");
      $(".nav .nav-item a:first").removeClass("active");
    }
    alert("ok");
  </script>