<!-- additional actions - expand/collapse, apply -->
<div class="d-flex align-items-baseline pt-2">

    <!-- expand/collapse list -->
    <app-dropdown-toogle *ngIf="displayShowMore"
        [srTranslationKey]="srTranslationKey" 
        @toggleVertically  
        [isExpanded]="isExpanded"
        (toogleChange)="expandOptionList()">
    </app-dropdown-toogle>
    

    <!-- apply - active btn -->
    <button type="button" class="btn btn-link font-weight-bold ml-auto p-0" (click)="triggerApply()" *ngIf="enableApply">
        <span *ngIf="srTranslationKey" class="visually-hidden">
            {{ srTranslationKey | translate }}:
        </span>
        <span *ngIf="selectedCount" class="visually-hidden">
            {{ 'Filters.VarSelected' | translate: {param: selectedCount} }}.
        </span>
        <span *ngIf="!selectedCount" class="visually-hidden">
            {{ 'Filters.RemoveSelected' | translate }}.
        </span>

        {{ 'Filters.ApplyFilter' | translate }}

        <span *ngIf="selectedCount" aria-hidden="true">
            ({{ selectedCount }})
        </span>
        <span class="visually-hidden">
            ({{ 'Search.AutoContentReload' | translate }})
        </span>
    </button>

    <!-- apply - inactive btn -->
    <button type="button" class="btn disabled ml-auto p-0 border-0" *ngIf="!enableApply"
        [title]="'Filters.NoFiltersSelected' | translate">
        <span *ngIf="srTranslationKey" class="visually-hidden">
            {{ srTranslationKey | translate }}:
        </span>
        {{ 'Filters.ApplyFilter' | translate }}
    </button>

</div>
