<span>{{ filterWithValue.filter.label | translate }}:</span>
<div>
    <ng-container *ngIf="filterWithValue.isSelect()">
        {{ filterWithValue.value?.join(', ') }}
    </ng-container>
    <ng-container *ngIf="filterWithValue.isText()">
        <span *ngIf="filterWithValue.value?.operator === 'contains'">{{
            'common.operator-contains' | translate
        }}</span>
        <span *ngIf="filterWithValue.value?.operator === 'eq'">{{ 'common.operator-eq' | translate }}</span>
        <span *ngIf="filterWithValue.value?.operator === 'notContains'">{{
            'common.operator-notContains' | translate
        }}</span>
        <span *ngIf="filterWithValue.value?.operator === 'notEq'">{{ 'common.operator-not-eq' | translate }}</span>
        <span *ngIf="filterWithValue.value?.operator === 'regex'">{{ 'common.operator-regex' | translate }}</span>
        <span> "{{ filterWithValue.value?.term }}"</span>
    </ng-container>
    <ng-container *ngIf="filterWithValue.isBoolean()">
        <span *ngIf="filterWithValue?.value">{{ 'common.boolean-true' | translate }}</span>
        <span *ngIf="!filterWithValue?.value">{{ 'common.boolean-false' | translate }}</span>
    </ng-container>
    <ng-container *ngIf="filterWithValue.isDateRange()">
        <span *ngIf="filterWithValue.value?.start && filterWithValue.value?.end">
            {{ filterWithValue.value?.start | localeDate : 'shortDate' }} - {{ filterWithValue.value?.end | localeDate : 'shortDate' }}
        </span>
        <span *ngIf="filterWithValue.value?.start && !filterWithValue.value?.end"> > {{ filterWithValue.value?.start | localeDate : 'shortDate' }} </span>
        <span *ngIf="filterWithValue.value?.end && !filterWithValue.value?.start"> < {{ filterWithValue.value?.end | localeDate : 'shortDate' }} </span>
    </ng-container>
    <ng-container *ngIf="filterWithValue.isNumber()">
        <span *ngIf="filterWithValue.value?.operator === 'eq'"> = </span>
        <span *ngIf="filterWithValue.value?.operator === 'gt'"> > </span>
        <span *ngIf="filterWithValue.value?.operator === 'lt'"> < </span>
        <span *ngIf="$any(filterWithValue.filter.type).inputType === 'currency'">{{ +filterWithValue.value?.amount | localeCurrency }}</span>
        <span *ngIf="$any(filterWithValue.filter.type).inputType !== 'currency'">{{ +filterWithValue.value?.amount }}</span>
    </ng-container>
</div>
