<h1 mat-dialog-title class="prevent-select">{{ file }}</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 fast" *ngIf="!isLoading && hasError">
    <mat-icon  class="red_primary_font">error</mat-icon>
    <h3>{{ errorStr }}</h3>
  </div>
  <div class="share-access-continer animated fadeIn" *ngIf="!isLoading && !hasError">
    <mat-form-field appearance="outline" class="w-100">
      <input matInput placeholder="Filtrar usuarios..." #filter (input)="filterUsers(filter.value)">
      <button mat-icon-button matSuffix *ngIf="filter.value != '' && filter.value != undefined && filter.value != null" (click)="clearFilter()">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>
    <div class="permissions-container">
      <div class="permissions-row" *ngFor="let item of sharedUsers" [ngClass]="{ hidden: !item.SHOW }">
        <div class="permission-icon" [style.background]="item.COLOR">{{ item.ICON }}</div>
        <div class="permission-info">
          <div class="permission-info-name">{{ item.NAME }}</div>
          <div class="permission-info-email">{{ item.EMAIL }}</div>
        </div>
        <div class="permission-enabled">
          <mat-checkbox [(ngModel)]="item.SHARED" [disabled]="item.OWNER" [matTooltip]="item.SHARED ? 'Denegar accesso' : 'Conceder acceso'"></mat-checkbox>
        </div>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button (click)="closeDigalog()">Guardar cambios</button>
</div>