<div class="wrapper">
    <div class="content">
        <div class="buttons-container">
            <button class="button" routerLink="/flashcards/sets"><i class="fas fa-arrow-left"></i> WRÓĆ DO LISTY</button>
            <button class="button" routerLink="/flashcards/add/table"><i class="fas fa-table"></i> DODAJ ZA POMOCĄ TABELI</button>
        </div>
</div>
  <div class="wrapper-add">
    <div class="container">
      <h1>Importowanie zestawu z pliku CSV</h1>
      <br />
      <h3>Twój plik CSV powinien mieć poniższy format:</h3>
      <div class="wrapper-description">
        <div class="description row">
          <h4 class="col-8 ml-4">
            nazwa zestawu;kategoria <br />
            lewa strona fiszki;prawa strona fiszki <br />
            lewa strona fiszki;prawa strona fiszki <br />
            lewa strona fiszki;prawa strona fiszki <br />
            .....
          </h4>
          <p class="col-3 ml-4">
            <u>Przykład:</u> <br />
            zwierzęta;angielski <br />
            pies;dog <br />
            kot;cat <br />
            królik;rabbit <br />
            ryba;fish <br />
          </p>
        </div>

      </div>
      <div *ngIf="currentFileUpload" class="progress">
        <div class="progress-bar progress-bar-info progress-bar-striped"
          role="progressbar" attr.aria-valuenow="{{progress.percentage}}"
          aria-valuemin="0" aria-valuemax="100"
          [ngStyle]="{width:progress.percentage+'%'}">
          {{progress.percentage}}%</div>
      </div>
        <label>
          <p>Wybierz plik:</p>
          <input type="file" accept=".csv" (change)="selectFile($event)">
        </label>
        <div>
        <br />
        <input type="checkbox" name="{{ permission }}" class="form-control" [checked]="permission" (change)="changePermission()"/><b>Udostępnij publicznie</b>
        </div><br />
        <button class="button" style="font-size: x-large;" [disabled]="!selectedFiles" (click)="upload()"><i class="fas fa-check-circle"></i> Dodaj fiszki!</button>
        <br /><br />
        <button class="button" routerLink="/flashcards/sets/"><i class="fas fa-arrow-left"></i> Powrót</button>
    </div>
  </div>
</div>
