<div class="list">
  <header class="list--header d-flex align-items-center gap-1 pl-3 py-2">
    <div class="flex-grow-1">
      <nb-checkbox
        *ngIf="!(distinctGeneratedSentencesLength === 0)"
        class="flex-grow-1 lineHeight-0 checkbox-all"
        [checked]="isAllSelectedGeneratedSentences"
        [indeterminate]="isSelectedGeneratedSentences"
        (checkedChange)="toggleAllSelectGeneratedSentences($event)"
        >Select all</nb-checkbox
      >
    </div>

    <div class="d-flex">
      <button
        class="ml-auto"
        nbButton
        nbTooltip="Regenerate"
        ghost
        shape="round"
        (click)="generate()"
      >
        <nb-icon icon="arrow-clockwise"></nb-icon>
      </button>
      <button
        nbButton
        nbTooltip="Options"
        ghost
        shape="round"
        (click)="backOptions()"
      >
        <nb-icon icon="sliders"></nb-icon>
      </button>
    </div>
  </header>

  <nb-list>
    <nb-list-item
      *ngFor="let generatedSentence of generatedSentences"
      class="grid gap-1"
    >
      <nb-checkbox
        *ngIf="generatedSentence.distinct && !generatedSentence.errorMessage"
        class="lineHeight-0"
        [(ngModel)]="generatedSentence.selected"
      ></nb-checkbox>
      <nb-icon
        *ngIf="generatedSentence.errorMessage"
        icon="exclamation-circle"
        status="danger"
        [nbTooltip]="generatedSentence.errorMessage"
      ></nb-icon>
      <nb-icon
        *ngIf="!generatedSentence.distinct && !generatedSentence.errorMessage"
        icon="check-circle"
        nbTooltip="Already present"
      ></nb-icon>
      <span
        *ngIf="generatedSentence.distinct && !generatedSentence.errorMessage"
        class="pointer"
        (click)="toggleSelectGeneratedSentence(generatedSentence)"
      >
        {{ generatedSentence.sentence }}
      </span>
      <span *ngIf="!generatedSentence.distinct || generatedSentence.errorMessage">{{ generatedSentence.sentence }}</span>
    </nb-list-item>
  </nb-list>
</div>
