<div class="row">
  <div class="col-12 nicknameFilter">
    <input type="text"
           class="rounded p-1 w-100 mb-3"
           [placeholder]="'component.nickname_categories.filter' | translate"
           [title]="'component.nickname_categories.filter' | translate"
           (input)="filterForKeyword($event)"/>
  </div>
  <div class="col-12 nickCategoryWrapper"
       [class.col-sm-4]="hasSelectedCategory()"
       [class.col-md-6]="hasSelectedCategory()">
    <div class="row">
      <div *ngFor="let cat of availableNickCategories()"
           class="nickCategory pointer col-6"
           [class.disabled]="!getNumberOfAvailableNicksForCategory(cat)"
           [class.selectedCategory]="hasSelectedCategory(cat)"
           [class.col-sm-12]="hasSelectedCategory()"
           [class.col-sm-6]="!hasSelectedCategory()"
           (click)="toggleSelectedCategory(cat)">
        <div class="nickCategoryText">
          <p class="mb-0"
             [innerHTML]="('component.nickname_categories.category.' + cat) | translate"></p>
          <p class="mb-0">({{getNumberOfSelectedNicksOfCategory(cat)}} / {{getNumberOfAvailableNicksForCategory(cat)}})</p>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="hasSelectedCategory()"
       class="col-12 col-sm-8 col-md-6">
    <div class="nickNameWrapper pt-2 mt-2 mt-sm-0">
      <div class="mx-2">
        <button class="btn btn-block pointer"
                [class.btn-warning]="hasSelectedAllNicks()"
                [class.btn-success]="!hasSelectedAllNicks()"
                (click)="toggleAllNicks()">
          <span *ngIf="hasSelectedAllNicks()">{{'component.nickname_categories.remove_all' | translate}}</span>
          <span *ngIf="!hasSelectedAllNicks()">{{'component.nickname_categories.choose_all' | translate}}</span>
        </button>
      </div>
      <div *ngFor="let nick of availableNicks[selectedCategory]"
           (click)="selectNick(nick)"
           class="nickStyle nickName pointer"
           [class.selectedNickName]="hasSelectedNick(nick)">
      <span [innerHTML]="parseAvailableNick(nick)"
            class="nickName d-inline-block pb-1"></span>
      </div>
    </div>
  </div>
</div>
