<div class="head">
  <div id="count">{{problems.length}} problems available!</div>
  <button (click) = "openForm()">Post a Problem</button>
</div>

<div class="loginPopup">
  <div class="formPopup" id="popupForm">
    <form class="formContainer" (ngSubmit) = "submitForm()">

      <input type="text" id="title" placeholder="Problem Title" name="title" [(ngModel)]="questiontoPost.title" required>
      <textarea id="statement" placeholder="Problem Statement" rows="8" cols="80" required></textarea>
      <textarea id="tc1_i" cols="30" rows="8" placeholder="Testcase1 Input" style="margin-right: 20px;"></textarea>
      <textarea id="tc2_i" cols="30" rows="8" placeholder="Testcase2 Input" style="margin-left: 20px;"></textarea>
      <textarea id="tc1_o" cols="30" rows="4" placeholder="Testcase1 Output" style="margin-right: 20px;"></textarea>
      <textarea id="tc2_o" cols="30" rows="4" placeholder="Testcase2 Output" style="margin-left: 20px;"></textarea>

      <input type="datetime-local" id="start_time">
      <input type="datetime-local" id="end_time">
      
      <button type="submit" class="btn" (click) = "submitForm()">Submit</button>
      <button type="button" class="btn cancel" (click) ="closeForm()">Close</button>
    </form>
  </div>
</div>

<div *ngFor="let problem of problems" class="card">
  <div class="title">{{problem.title}}</div>
  <div class="details">{{problem.details}}</div>
  <button [routerLink]="['/arena/problem', problem.id]" class="attempt">Attempt</button>
  <span class="stats"><span *ngIf="problem.n_attempts != 0">{{problem.n_correct}} accepted out of
    {{problem.n_attempts}}
    ({{problem.n_correct / problem.n_attempts * 100}}%)</span><span *ngIf="problem.n_attempts === 0">No attempt
      yet</span></span>
</div>
