<div class="filter-menu-content-wrapper">
    <mat-accordion (keyup)="checkKeyEvent($event)">
        <mat-expansion-panel *ngFor="let filter of service.filterDefinitions">
            <mat-expansion-panel-header *ngIf="filter && filter.options && filter.options.length">
                <mat-panel-title>
                    <span>{{ service.getFilterName(filter) | translate }}</span>
                    <mat-basic-chip disableRipple class="lightblue filter-count" *ngIf="filter.count">
                        <span>{{ filter.count }}</span>
                    </mat-basic-chip>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <div class="indent" *ngIf="filter.options && filter.options.length">
                <mat-action-list class="filtermenu-expanded">
                    <div *ngFor="let option of filter.options">
                        <div *ngIf="isFilter(option)">
                            <mat-checkbox
                                [ngClass]="option.isChild ? 'filter-child' : ''"
                                [checked]="option.isActive"
                                (change)="service.toggleFilterOption(filter.property, option)"
                            >
                                {{ option.label | translate }}
                            </mat-checkbox>
                        </div>
                        <div class="filter-subtitle" *ngIf="!isFilter(option)">
                            <mat-divider *ngIf="option === '-'"></mat-divider>
                            <span *ngIf="option !== '-'"> {{ option | translate }}</span>
                        </div>
                    </div>
                </mat-action-list>
            </div>
        </mat-expansion-panel>
    </mat-accordion>
</div>
