<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>Run File</button>
  <button>Edit File</button>
  <button>Remove From Database</button>

</div>

<!--<div id="myModal" class="modal" [class.open]="uploadPopupActive">-->

<!--  &lt;!&ndash; Modal content &ndash;&gt;-->
<!--  <div class="modal-content">-->
<!--    <span (click)="onClick2()" class="close">&times;</span>-->

<!--    <div class="text-center">-->
<!--      <input class="form-control" type="file"-->
<!--              (change)="onChange($event)">-->

<!--      <button (click)="onUpload()"-->
<!--          class="btn btn-success">-->
<!--          Upload-->
<!--      </button>-->
<!--    </div>-->

<!--    &lt;!&ndash; Shareable short link of  uoloaded file &ndash;&gt;-->
<!--    <div class="container text-center jumbotron"-->
<!--        *ngIf="shortLink">-->
<!--        <h2> Visit Here</h2>-->
<!--        <a href="{{shortLink}}">{{shortLink}}</a>-->
<!--    </div>-->

<!--    &lt;!&ndash;Flag variable is used here&ndash;&gt;-->
<!--    <div class="container" *ngIf="loading">-->
<!--        <h3>Loading ...</h3>-->
<!--    </div>-->

<!--  </div>-->

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