<div class="wrapper">
    <div class="wrapper-add">
      <div class="container">
        <h2>Rozsypanka wyrazowa</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 <b>kolejno</b> wszystkie elementy rozsypanki:</p>
          <div>
            <div *ngFor="let answer of answersCorrect; let i = index" class="row">
                <label class="col-md-5">
                    <b>{{ i + 1 }}. element rozsypanki</b>
                    <input [(ngModel)]="answer['correct']" class="form-control" type="text" name="{{ answer['correct'] }}"/>
                </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 class="mobile col-md-2">
                <b>Przesuń</b>
                <br />
                <button *ngIf="i != 0" class="button min" (click)="moveUp(i + 1)"><i class="fas fa-angle-up"></i> Góra</button>
                <button *ngIf="i != answersCorrect.length - 1" class="button min" (click)="moveDown(i + 1)"><i class="fas fa-angle-down"></i> Dół</button>
                <span *ngIf="(i == 0) && (i == answersCorrect.length - 1)" >---</span>
              </div>
            </div>
            <br />
            <div class="row">
                <label class="col-md-5">
                    <b>Nowy element rozsypanki</b>
                    <input type="text" name="{{ newAttribute['correct'] }}" class="form-control" [(ngModel)]="newAttribute['correct']"/>
                </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>
