<div class="card" [style.marginLeft]="level * 20 + 'px'" [style.background]="isFile ? '#002' : '#022'">
  <div class="title" *ngIf="isFile">{{file.filename}}{{file.language}}</div>
  <div class="title" *ngIf="!isFile">{{directory.name}}</div>
  <div class="dir-desc" *ngIf="!isFile">{{directory.dirs.length}} directories, {{directory.files.length}} files</div>
  <div *ngIf="isFile"></div>
  <div class="file-buttons">
    <button (click)="onDelete()" [disabled]="deleting" [class.disabled]="deleting">Delete</button>
    <button *ngIf="!isFile" (click)="isExpanded = !isExpanded">{{isExpanded ? 'Collapse' : 'Expand'}}</button>
    <button *ngIf="isFile">Edit</button>
    <button *ngIf="isFile">Run</button>
  </div>
</div>
<div class="subs" *ngIf="!isFile" [style.display]="isExpanded ? 'block' : 'none'">
  <app-file-dir-card *ngFor="let dir of directory.dirs" [isFile]="false" [directory]="dir" [level]="level + 1" [trace]="addToTraceDir(dir)" (deleteFile)="deleteFileExec($event)" (deleteDir)="deleteDirExec($event)"></app-file-dir-card>
  <app-file-dir-card *ngFor="let file of directory.files" [isFile]="true" [file]="file" [level]="level + 1" [trace]="addToTraceFile(file)" (deleteFile)="deleteFileExec($event)" (deleteDir)="deleteDirExec($event)"></app-file-dir-card>
</div>
