<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">
  You have {{files.length}} files stored on the server:
</div>

<div *ngFor="let file of files" class="card">
  <span class="title">{{file.filename}}{{file.language}}</span>

  <button>Delete</button>
  <button>Edit</button>
  <button>Run</button>

</div>

<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>
