<h1 mat-dialog-title class="prevent-select">Seleccione una función</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" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font mt-50">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="w-100 animated fadeIn pv-8" *ngIf="functions.length > 0 && !isLoading && !hasError">
    <button mat-button style="width: 100%;" *ngFor="let func of functions" [mat-dialog-close]="func">
      <mat-icon>{{ func.ICONOFUNCION }}</mat-icon> {{ func.NOMBREFUNCION }}
    </button>
  </div>
  <div class="animated fadeIn" *ngIf="functions.length == 0 && !isLoading && !hasError">
    <h3 class="ml-20"><b>Su perfil no cuenta con los permisos necesarios para utilizar las funciones de este submódulo.</b></h3>
  </div>
</div>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close cdkFocusInitial>Cerrar</button>
</mat-dialog-actions>
