<div id="tray">
  <button routerLink="/arena/file/new" routerLinkActive="active" style="margin-right: 10px;">Create A File</button>
  <button (click)="uploadPopupActive = true" id="myBtn" style="margin-left: 10px;">Upload A File</button>
</div>

<div class="container">
  {{mainDir.dirs.length}} directories, {{mainDir.files.length}} files:
</div>

<app-file-dir-card *ngFor="let dir of mainDir.dirs" [isFile]="false" [directory]="dir" [level]="0" [trace]="[mainDir.dirs.indexOf(dir)]" (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)"></app-file-dir-card>
<app-file-dir-card *ngFor="let file of mainDir.files" [isFile]="true" [file]="file" [level]="0" [trace]="[mainDir.files.indexOf(file)]" (deleteDir)="deleteDirExec($event)" (deleteFile)="deleteFileExec($event)"></app-file-dir-card>

<div [class.open]="uploadPopupActive" id="file-upload-cover"></div>

<div [class.open]="uploadPopupActive" id="file-upload-popup">
  <p>Upload a file:</p>
  <input (change)="onChange($event)" id="file-upload-input" type="file">
  <div *ngIf="shortLink !== ''" style="margin-top: 10px">
    <a href="{{shortLink}}" target="_blank">Link to last upload</a>
  </div>
  <p *ngIf="!loading">
    <button (click)="uploadPopupActive = false;" id="upload-cancel-btn">Close</button>
    <button (click)="onUpload()" id="file-upload-btn" [class.disabled]="fileToUpload == null || fileToUpload == undefined">Upload</button>
  </p>
  <p *ngIf="loading" style="margin-top: 20px; text-align: center">
    Uploading...
  </p>
</div>
