<h1 mat-dialog-title class="prevent-select">Documentos del usuario {{ employeeName }}</h1>
<div mat-dialog-content class="prevent-select">
  
  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información" />

  @if (!isLoading && hasError) {
    <div class="has-error animated fadeIn pt-64">
      <mat-icon class="red_primary_font">error</mat-icon>
      <h2>{{ errorStr }}</h2>
    </div>
  }


  @if (!isLoading && !hasError) {
    <div class="animated fadeIn documents-details-column">
      <div class="attached-header">
        <div class="attached-cell expanded">Nombre</div>
        <div class="attached-cell w-100p">Peso</div>
        <div class="attached-cell w-85p">Acciones</div>
      </div>
      @for (file of attached; track file) {
        <div class="attached-row">
          <div class="attached-cell expanded">
            {{ file.name }}
          </div>
          <div class="attached-cell w-100p">
            {{ file.size }}
          </div>
          <div class="attached-cell w-85p">
            <button mat-mini-fab class="green_primary_background white_font override_no_shadow" matTooltip="Descargar archivo" (click)="downloadFile(file.id)">
              <mat-icon>download</mat-icon>
            </button>
          </div>
        </div>
      } @empty {
        <div class="mt-50" align="center">
          <object data="assets/img/empty_data.svg" width="150"></object>
          <h2>Sin datos</h2>
        </div>
      }
      <a class="hidden" id="file"></a>
    </div>
  }
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>