<h1 mat-dialog-title class="prevent-select">Asociación de usuarios al panel '{{ panelName }}'</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError">
    <div class="panel-users-container">
      <div class="users-list-container">
        <p>Usuarios no relacionados</p>
        <div class="panel-users-list">
          <div class="panel-user-info animated fadeIn" *ngFor="let user of notRelatedUsersList">
            <span>{{ user.NOMBRE }}</span>
            <span> {{ user.APEPAT }}</span>
            <span *ngIf="user.APEMAT != null"> {{ user.APEMAT }}</span>
            <span> ({{ user.IDUSUARIO }})</span>
            <span> &bullet; </span>
            <span *ngIf="!user.TIENE_PANEL">Sin panel.</span>
            <span *ngIf="user.TIENE_PANEL">{{ user.PANEL_CONTROL }}</span>
            <span class="associate-button green_primary_font" (click)="updateUserAssociationStatus(user.IDUSUARIO, 'NA')">Asociar</span>
          </div>
          <span *ngIf="notRelatedUsersList.length == 0" class="animated fadeIn" style="text-align: center;font-weight: 500;">
            No se encontraron usuarios no relacionados.
          </span>
        </div>
      </div>
      <div class="users-list-container">
        <p>Usuarios relacionados</p>
        <div class="panel-users-list">
          <div class="panel-user-info animated fadeIn" *ngFor="let user of relatedUsersList">
            <span>{{ user.NOMBRE }}</span>
            <span> {{ user.APEPAT }}</span>
            <span *ngIf="user.APEMAT != null"> {{ user.APEMAT }}</span>
            <span> ({{ user.IDUSUARIO }})</span>
            <span> &bullet; </span>
            <span>{{ panelName }}</span>
            <span class="associate-button red_primary_font" (click)="updateUserAssociationStatus(user.IDUSUARIO, 'AS')">Desasociar</span>
          </div>
          <span *ngIf="relatedUsersList.length == 0" class="animated fadeIn" style="text-align: center;font-weight: 500;">
            No hay usuarios asociados.
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button (click)="savePanelAssociatedUsers()">Guardar</button>
</div>