<div class="wrapper">
  <div class="wrapper-add">
    <div class="container">
      <h2>Łączenie w pary</h2>
      <br />
      <div>
        <label class="block">
          <p>Określ liczbę punktów do zdobycia:</p>
          <input type="number" step="1" min="1" name="points" class="form-control" [(ngModel)]="points" required />
        </label>
        <label class="block">
          <p>Wprowadź treść pytania:</p>
          <input type="text" name="question" class="form-control" [(ngModel)]="question"/>
        </label>
        <label class="block">
          <p>Podaj czas na udzielenie odpowiedzi w sekundach (0 - brak limitu):</p>
          <input type="number" step="1" min="0" name="time" class="form-control" [(ngModel)]="time" required/>
        </label>
        <br />
        <p>Wpisz wszystkie dopasowania:</p>
        <div>
          <div *ngFor="let answer of answersCorrect; let i = index" class="row">
            <label class="col-md-5">
              <b>Pierwszy element dopasowania</b>
              <input [(ngModel)]="answer.first" class="form-control" type="text" name="{{ answer.first }}"/>
            </label>
            <label class="col-md-5">
              <b>Drugi element dopasowania</b>
              <input [(ngModel)]="answer.second" class="form-control" type="text" name="{{ answer.second }}"/>
            </label>
            <div class="col-md-2">
              <b>Akcja</b>
              <br />
              <button class="button min" type="button" (click)="deleteFieldValue(i)"><i class="fas fa-trash-alt"></i> Usuń</button>
            </div>
          </div>
          <br />
          <div class="row">
            <label class="col-md-5">
              <b>Pierwszy element dopasowania</b>
              <input type="text" name="{{ newAttribute.first }}" class="form-control" [(ngModel)]="newAttribute.first"/>            </label>
            <label class="col-md-5">
              <b>Drugi element dopasowania</b>
              <input type="text" name="{{ newAttribute.second }}" class="form-control" [(ngModel)]="newAttribute.second"/>
            </label>
            <div class="col-md-2">
              <b>Akcja</b>
              <br />
              <button class="button min" type="button" (click)="addFieldValue()"><i class="fas fa-check-circle"></i> Dodaj</button>
            </div>
          </div>
        </div>
        <br />
        <br />
        <button *ngIf='!edit' class="button max" type="submit" (click)="addTable()"><i class="fas fa-check-circle"></i> Dodaj pytanie!</button>
        <button *ngIf='edit' class="button max" type="submit" (click)="addTable()"><i class="fas fa-edit"></i> Edytuj pytanie!</button>
        <br />
        <button class="button" (click)="empty()"><i class="fas fa-arrow-left"></i> Powrót</button>
      </div>
    </div>
  </div>
</div>
