<h2 mat-dialog-title class="prevent-select">Registrar nuevo catálogo</h2>
<div mat-dialog-content style="width: 460px;" class="pt-8 prevent-select">
  <mat-form-field class="w-100" appearance="outline">
    <mat-label>Tipo de catálogo</mat-label>
    <mat-select [formControl]="catalogueType" [errorStateMatcher]="errorMatcher">
      <mat-option *ngFor="let catalogue of catalogues" [value]="catalogue">
        {{ catalogue }}
      </mat-option>
    </mat-select>
    <mat-error *ngIf="catalogueType.hasError('required')">
      Este campo es <strong>requerido</strong>.
    </mat-error>
  </mat-form-field>
  <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)">
  <button type="button" mat-stroked-button class="w-100" *ngIf="!isUploading" (click)="file.click()">
    Adjuntar archivo
  </button>
  <div class="column-advices w-100" *ngIf="isUploading">
    <p class="w-100" style="text-align: center;">Subiendo archivo...</p>
    <mat-progress-bar mode="buffer" class="w-100"></mat-progress-bar>
  </div>
  <table mat-table [dataSource]="dataSource!" matSort style="width:100%" class="mt-8">
    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let i = index">{{ i + 1 }}</td>
    </ng-container>

    <ng-container matColumnDef="NOMBRE">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre del archivo</th>
      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
    </ng-container>

    <ng-container matColumnDef="PESO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Tamaño del archivo</th>
      <td mat-cell *matCellDef="let row">{{ row.size }}</td>
    </ng-container>

    <ng-container matColumnDef="ACCIONES">
      <th mat-header-cell *matHeaderCellDef>Acciones</th>
      <td mat-cell *matCellDef="let row">
        <button mat-mini-fab color="warn" class="no_shadow" (click)="deleteFile(row.id)">
          <mat-icon>delete</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="100%">Aún no se ha adjuntado nungún archivo</td>
    </tr>
  </table>
  <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close [disabled]="isUploading">Cancelar</button>
    <button mat-button (click)="saveCatalogue()" cdkFocusInitial [disabled]="isUploading">Guardar catálogo</button>
    <button class="hidden" [mat-dialog-close]="true" id="close-button"></button>
  </mat-dialog-actions>
</div>