<div dropdown placement="bottom left" class="dropdown c8y-child-assets-selector">
  <button
    class="btn dropdown-toggle d-flex a-i-center c8y-dropdown"
    type="button"
    title="{{ 'Status filter' | translate }}"
    dropdownToggle
  >
    <span *ngFor="let option of statusOptions" class="d-contents">
      <span class="text-truncate" *ngIf="option.selected">
        <i [c8yIcon]="option.option.icon" [ngClass]="option.option.styleClass"></i>
        <span class="m-l-4">{{ option.option.label | translate }}</span>
      </span>
    </span>
    <span class="text-truncate" *ngIf="isAllButtonSelected">
      <i c8yIcon="c8y-energy" class="m-r-4 text-info"></i>
      {{ 'All statuses' | translate }}
    </span>
  </button>
  <ul
    id="dropdown-status-filter"
    *dropdownMenu
    class="dropdown-menu"
    role="menu"
    aria-labelledby="status-filter"
  >
    <li *ngFor="let option of statusOptions" [ngClass]="{ active: option.selected }">
      <button
        type="button"
        [title]="option.option.label | translate"
        (click)="changeFilter(option)"
        c8yProductExperience
        inherit
        [actionData]="{
          action: ACTIONS.FILTER,
          filterBy: 'status',
          filterValue: option.option.label
        }"
      >
        <i [c8yIcon]="option.option.icon" [ngClass]="option.option.styleClass"></i>
        <span class="m-l-4">{{ option.option.label | translate }}</span>
      </button>
    </li>
    <li [ngClass]="{ active: isAllButtonSelected }">
      <button
        type="button"
        title="{{ 'All statuses' | translate }}"
        (click)="removeFilter()"
        c8yProductExperience
        inherit
        [actionData]="{
          action: ACTIONS.FILTER,
          filterBy: 'status'
        }"
      >
        <i c8yIcon="c8y-energy" class="m-r-4 text-info"></i>
        {{ 'All statuses' | translate }}
      </button>
    </li>
  </ul>
</div>