<div [style.background]="isFile ? '#002' : '#022'" [style.marginLeft]="level * 20 + 'px'" class="card">
  <div *ngIf="!isNew && isFile" class="title">{{file.filename}}{{file.language}}</div>
  <div *ngIf="!isNew && !isFile" class="title">{{directory.name}}</div>
  <div *ngIf="!isNew && !isFile" class="dir-desc">{{directory.dirs.length}} directories, {{directory.files.length}}
    files
  </div>

  <div *ngIf="isNew" class="title">
    <input (input)="isErrorCreating = false" [(ngModel)]="newName" [disabled]="creating" id="newFilenameInput"
           [placeholder]="'Name of new ' + (isFile ? 'file' : 'directory')" type="text">
    <label for="newFilenameInput" *ngIf="isFile" (click)="lang = (lang + 1) % 3">{{extensions[lang]}}</label>
  </div>

  <div *ngIf="isNew || isFile"></div>
  <div *ngIf="!isNew" class="file-buttons">
    <button (click)="onDelete()" [class.disabled]="deleting || isErrorDeleting"
            [disabled]="deleting || isErrorDeleting">{{isErrorDeleting ? 'Error' : (deleting ? 'Deleting...' : 'Delete')}}</button>
    <button (click)="isExpanded = !isExpanded" *ngIf="!isFile">{{isExpanded ? 'Collapse' : 'Expand'}}</button>
    <button (click)="isExpanded = true; creatingNewSub = 1" *ngIf="!isFile">New Directory</button>
    <button (click)="isExpanded = true; creatingNewSub = 2" *ngIf="!isFile">New File</button>
    <button *ngIf="isFile" [routerLink]="getRouterLink()">Edit</button>
    <button *ngIf="isFile">Run</button>
  </div>

  <div *ngIf="isNew" class="file-buttons">
    <button (click)="cancelled.emit(true)" [class.disabled]="creating" [disabled]="creating">Cancel</button>
    <button (click)="isFile ? onCreateFile() : onCreateDir()"
            [class.disabled]="newName==='' || creating || isErrorCreating"
            [disabled]="newName==='' || creating || isErrorCreating">{{isErrorCreating ? 'Error' : (creating ? 'Creating...' : 'Create')}}</button>
  </div>

</div>

<div *ngIf="!isNew && !isFile" [style.display]="isExpanded ? 'block' : 'none'" class="subs">

  <app-file-dir-card (cancelled)="creatingNewSub = 0" (createDir)="createDirExec($event)" (createFile)="createFileExec($event)"
                     *ngIf="creatingNewSub !== 0" [isFile]="creatingNewSub === 2" [level]="level + 1"
                     [isNew]="true" [parentPath]="directory.path + directory.name + '/'"></app-file-dir-card>

  <app-file-dir-card (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)"
                     *ngFor="let dir of directory.dirs" [directory]="dir"
                     [isFile]="false" [isNew]="false" [level]="level + 1"
                     [trace]="addToTraceDir(dir)"></app-file-dir-card>

  <app-file-dir-card (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)"
                     *ngFor="let file of directory.files" [file]="file"
                     [isFile]="true" [isNew]="false" [level]="level + 1"
                     [trace]="addToTraceFile(file)"></app-file-dir-card>
</div>
