<h1 mat-dialog-title class="prevent-select animated fadeIn">Subir plano</h1>
<div mat-dialog-content class="prevent-select animated fadeIn">
  <mat-form-field appearance="outline" class="w-100 mh-8">
    <mat-label>Nivel</mat-label>
    <mat-select [formControl]="planeLevelControl">
      <mat-option value="V">Vestíbulo</mat-option>
      <mat-option value="A">Andén</mat-option>
    </mat-select>
    <mat-error *ngIf="planeLevelControl.hasError('required')">
      Este campo es obligatorio.
    </mat-error>
  </mat-form-field>
  <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)" accept=".svg">
  <button mat-stroked-button class="w-100" (click)="file.click()">
    Seleccionar archivo
  </button>
  <h3 style="text-align: center;" class="animated fadeIn fast" *ngIf="!isUploading && tempFile == null">
    Aún no se ha subido ningún archivo
  </h3>
  <mat-progress-bar mode="indeterminate" class="w-100 mh-16 animated fadeIn fast" *ngIf="isUploading"></mat-progress-bar>
  <p *ngIf="!isUploading && tempFile != null" class="mh-16 animated fadeIn fast" style="text-align: center; font-size: 16px;">
    {{ tempFile.name }} &bullet; <span style="font-weight: 500;">{{ tempFile.size }}</span>&nbsp;<span class="red_primary_font delete_action" (click)="deleteFile(tempFile.id)">Eliminar</span>
  </p>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="tempFile == null || planeLevelControl.invalid" (click)="savePlane()">Guardar</button>
</div>