@let vm = (model$ | async)!;
<p-table
  #usersTable
  [totalRecords]="vm.usersTotalCount"
  dataKey="id"
  [value]="!vm.usersAreLoading ? vm.users : defaultUsers"
  [columns]="cols"
  [showCurrentPageReport]="!vm.usersAreLoading"
  responsiveLayout="scroll"
  currentPageReportTemplate="Utenti {first} - {last} di {totalRecords}"
  [paginator]="true"
  [rows]="10"
  [rowsPerPageOptions]="[10, 50, 100]"
  [globalFilterFields]="['firstName', 'lastName', 'username']"
>
  <ng-template #caption>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold">Utenti</span>
      <button
        type="button"
        class="p-button-outlined p-button-rounded ml-2 mr-2 font-medium"
        pButton
        pRipple
        icon="pi pi-plus"
        (click)="createUser()"
        label="Crea nuovo utente"
        tooltipPosition="left"
      ></button>
    </div>
  </ng-template>

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th
        *ngFor="let col of cols"
        pResizableColumn
        [pSortableColumn]="col.sortField ?? ''"
        class="p-table-scrollable-header"
      >
        <div style="display: flex; align-items: center; text-wrap: nowrap">
          <div>
            {{ col.header }}
            <p-sortIcon
              *ngIf="col.sortField"
              [field]="col.sortField"
            ></p-sortIcon>
          </div>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'firstName'"
              type="text"
              display="menu"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'lastName'"
              type="text"
              display="menu"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'username'"
              type="text"
              display="menu"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>

          <ng-container [ngSwitch]="col.field">
            <p-columnFilter
              *ngSwitchCase="'ruolo'"
              type="text"
              display="menu"
              [showOperator]="false"
              [showAddButton]="true"
              [field]="col.field"
            ></p-columnFilter>
          </ng-container>
        </div>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row let-rowIndex="rowIndex">
    <ng-container *ngTemplateOutlet="table_placeholder"></ng-container>
    <tr *ngIf="!vm.usersAreLoading">
      <ng-container *ngFor="let col of cols" [ngSwitch]="col.field">
        <td *ngSwitchCase="'firstName'">
          <span class="font-light"> {{ row.firstName }}</span>
        </td>
        <td *ngSwitchCase="'lastName'">
          <span class="font-light"> {{ row.lastName }}</span>
        </td>
        <td *ngSwitchCase="'username'">
          <span class="font-light"> {{ row.username }}</span>
        </td>
        <td *ngSwitchCase="'ruolo'">
          <span class="font-light">
            {{ row.profiles[0].role.standardName }}</span
          >
        </td>

        <td *ngSwitchCase="'creationDate'">
          <span class="font-light">
            {{ row.creationDate | date: 'dd/MM/yyyy' }}</span
          >
        </td>
        <td *ngSwitchCase="'creationDate'">
          <span class="font-light">
            {{
              isFinalDate(row.expireDate)
                ? (row.expireDate | date: 'dd/MM/yyyy')
                : ''
            }}</span
          >
        </td>
        <td *ngSwitchCase="'status.standardName'">
          <p-tag
            [value]="row.status.standardName"
            [severity]="getSeverity(row.status.standardCode)"
          ></p-tag>
          <button
            pButton
            *ngIf="row.status.standardCode === 'Disabled'"
            pRipple
            type="button"
            icon="pi pi-send"
            pTooltip="Invia mail di primo accesso"
            tooltipPosition="top"
            class="p-button-rounded p-button-text p-button-secondary"
            (click)="sendFirstAccessMail($event, row.id)"
          ></button>
        </td>
        <td *ngSwitchCase="'azioni'">
          <div class="flex align-items-center">
            <button
              pButton
              pRipple
              type="button"
              pTooltip="Modifica account"
              tooltipPosition="top"
              icon="pi pi-pencil"
              class="p-button-rounded p-button-text"
              (click)="editUser(row)"
            ></button>
            <button
              pButton
              pRipple
              type="button"
              pTooltip="Associa stipulatori"
              tooltipPosition="top"
              icon="pi pi-file"
              class="p-button-rounded p-button-text"
              (click)="editStipulatori(row)"
            ></button>
            <button
              type="button"
              class="p-button-rounded p-button-text p-button-danger"
              pButton
              pTooltip="Cancella account"
              tooltipPosition="top"
              pRipple
              icon="pi pi-trash"
              pTooltip="Elimina"
              (click)="showDeleteDialog($event, row)"
            ></button>
          </div>
        </td>
      </ng-container>
    </tr>
  </ng-template>
</p-table>

<ng-template #table_placeholder>
  <tr *ngIf="vm.usersAreLoading" style="height: 57px">
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
    <td>
      <p-skeleton width="100%" height="2rem"></p-skeleton>
    </td>
  </tr>
</ng-template>

<p-messages
  [(value)]="messages"
  [enableService]="false"
  [closable]="false"
  [showTransitionOptions]="showTransitionOptions"
  [hideTransitionOptions]="'0ms'"
></p-messages>

<p-toast />

<p-confirmDialog
  #cd
  key="cd"
  icon="pi pi-exclamation-triangle"
  [style]="{ width: '425px' }"
>
  <p-footer>
    <button
      type="button"
      pButton
      (click)="cd.onReject()"
      [disabled]="vm.cdIsLoading"
    ></button>
    <button
      type="button"
      pButton
      (click)="cd.onAccept()"
      [disabled]="vm.cdIsLoading"
    ></button>
  </p-footer>
</p-confirmDialog>
