<div id="tray">
    <button style="margin-right: 10px;" routerLink="/arena" routerLinkActive="active">Create A File</button>
    <button (click)="onClick()" 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">

  <!-- Modal content -->
  <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>

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

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

  </div>

</div>
