<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>
    All submitted Files are listed Below!
</div>

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

  <button style="margin-right: 15px;">Run File</button>
  <button style="margin-left: 15px; margin-right: 15px;">Edit File</button>
  <button style="margin-left: 15px;">Remove From Database</button>

  <!-- <button [routerLink]="['/arena', problem.id]" class="attempt">Attempt</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>