<app-student-navbar></app-student-navbar>
<div id="class-items" class="row">
  <div id="closed-papers" class="col-lg">
    <h3>Your Closed One-minute Papers</h3>
    <div *ngIf="closedPaperList.length <= 0">
      <h4>You have no closed one-minute papers!</h4>
    </div>
    <div class="pre-scrollable">
      <div *ngFor="let paper of closedPaperList; let i = index" [attr.data-index]="i" style="margin-top: 1%;">
        <div class="card border-primary" style="width: 25rem;">
          <div class="card-body">
            <h5 class="card-title">Class Code: {{paper.classCode}} </h5>
            <p class="card-text">Minute-paper Name: {{paper.name}}</p>
            <p class="card-text">Topic: {{paper.topic}}</p>
            <p class="card-text">Anonymous: {{paper.anonymous}}</p>
            <p class="card-text">Opened: {{paper.creationDate}}</p>
            <button class="btn btn-info" (click)="goToCompletedPage(paper.paperId)">View</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="open-papers" class="col-lg">
    <h3>Your Open One-minute Papers</h3>
    <div *ngIf="openClassPapers.length <= 0">
      <h4>You have no open one-minute papers!</h4>
    </div>
    <div class="pre-scrollable">
      <div *ngFor="let paper of openClassPapers; let i = index" [attr.data-index]="i" style="margin-top: 1%;">
        <div class="card border-primary" style="width: 25rem;">
          <div class="card-body">
            <h5 class="card-title">Class Code: {{paper.classCode}} </h5>
            <p class="card-text">Minute-paper Name: {{paper.name}}</p>
            <p class="card-text">Topic: {{paper.topic}}</p>
            <p class="card-text">Anonymous: {{paper.anonymous}}</p>
            <p class="card-text">Opened: {{paper.creationDate}}</p>
            <button class="btn btn-info" (click)="goToSubmissionView(paper.paperId)">Respond</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>