<div>
  <h2>
    <span id="user-management-page-heading" data-cy="userManagementPageHeading" jhiTranslate="userManagement.home.title">Utilizadores</span>

    <div class="d-flex justify-content-end">
      <button class="btn btn-info me-2" (click)="loadAll()" [disabled]="isLoading()">
        <fa-icon icon="sync" [spin]="isLoading()"></fa-icon>
        <span jhiTranslate="userManagement.home.refreshListLabel">Refresh list</span>
      </button>
      <button class="btn btn-primary jh-create-entity" [routerLink]="['./new']">
        <fa-icon icon="plus"></fa-icon> <span jhiTranslate="userManagement.home.createLabel">Adicionar</span>
      </button>
    </div>
  </h2>

  <jhi-alert-error></jhi-alert-error>

  <jhi-alert></jhi-alert>

  @if (users()) {
    <div class="table-responsive">
      <table class="table table-striped" aria-describedby="user-management-page-heading">
        <thead>
          <tr jhiSort [sortState]="sortState" (sortChange)="transition($event)">
            <th scope="col" jhiSortBy="id"><span jhiTranslate="global.field.id">Código</span> <fa-icon icon="sort"></fa-icon></th>
            <th scope="col" jhiSortBy="login"><span jhiTranslate="userManagement.login">Login</span> <fa-icon icon="sort"></fa-icon></th>
            <th scope="col" jhiSortBy="email"><span jhiTranslate="userManagement.email">Email</span> <fa-icon icon="sort"></fa-icon></th>
            <th scope="col"></th>
            <th scope="col" jhiSortBy="langKey">
              <span jhiTranslate="userManagement.langKey">Linguagem</span> <fa-icon icon="sort"></fa-icon>
            </th>
            <th scope="col"><span jhiTranslate="userManagement.profiles">Perfis</span></th>
            <th scope="col" jhiSortBy="createdDate">
              <span jhiTranslate="userManagement.createdDate">Criado em</span> <fa-icon icon="sort"></fa-icon>
            </th>
            <th scope="col" jhiSortBy="lastModifiedBy">
              <span jhiTranslate="userManagement.lastModifiedBy">Alterado por</span> <fa-icon icon="sort"></fa-icon>
            </th>
            <th scope="col" jhiSortBy="lastModifiedDate">
              <span jhiTranslate="userManagement.lastModifiedDate">Alterado em</span> <fa-icon icon="sort"></fa-icon>
            </th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          @for (user of users(); track trackIdentity) {
            <tr>
              <td>
                <a [routerLink]="['./', user.login, 'view']">{{ user.id }}</a>
              </td>
              <td>{{ user.login }}</td>
              <td>{{ user.email }}</td>
              <td>
                @if (!user.activated) {
                  <button class="btn btn-danger btn-sm" (click)="setActive(user, true)" jhiTranslate="userManagement.deactivated">
                    Inativo
                  </button>
                } @else {
                  <button
                    class="btn btn-success btn-sm"
                    (click)="setActive(user, false)"
                    [disabled]="!currentAccount() || currentAccount()?.login === user.login"
                    jhiTranslate="userManagement.activated"
                  >
                    Ativo
                  </button>
                }
              </td>
              <td>{{ user.langKey }}</td>
              <td>
                @for (authority of user.authorities; track $index) {
                  <div>
                    <span class="badge bg-info">{{ authority }}</span>
                  </div>
                }
              </td>
              <td>{{ user.createdDate | date: 'dd/MM/yy HH:mm' }}</td>
              <td>{{ user.lastModifiedBy }}</td>
              <td>{{ user.lastModifiedDate | date: 'dd/MM/yy HH:mm' }}</td>
              <td class="text-end">
                <div class="btn-group">
                  <button type="submit" [routerLink]="['./', user.login, 'view']" class="btn btn-info btn-sm">
                    <fa-icon icon="eye"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.view">Visualizar</span>
                  </button>

                  <button
                    type="submit"
                    [routerLink]="['./', user.login, 'edit']"
                    queryParamsHandling="merge"
                    class="btn btn-primary btn-sm"
                  >
                    <fa-icon icon="pencil-alt"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Editar</span>
                  </button>

                  <button
                    type="button"
                    (click)="deleteUser(user)"
                    class="btn btn-danger btn-sm"
                    [disabled]="!currentAccount() || currentAccount()?.login === user.login"
                  >
                    <fa-icon icon="times"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Eliminar</span>
                  </button>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>

    <div>
      <div class="d-flex justify-content-center">
        <jhi-item-count [params]="{ page: page, totalItems: totalItems(), itemsPerPage: itemsPerPage }"></jhi-item-count>
      </div>

      <div class="d-flex justify-content-center">
        <ngb-pagination
          [collectionSize]="totalItems()"
          [(page)]="page"
          [pageSize]="itemsPerPage"
          [maxSize]="5"
          [rotate]="true"
          [boundaryLinks]="true"
          (pageChange)="transition()"
        ></ngb-pagination>
      </div>
    </div>
  }
</div>
