<div class="components-header">
    <span [translate]="'component-management.components'" [attr.help-mode-key]="'components_table'"></span>
    <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'" [attr.help-mode-key]="'filter_components'"></iqser-popup-filter>
</div>

<div *ngIf="displayedComponents$ | async as displayedComponents" class="components-container" id="components-view">
    <div class="component-row">
        <div class="header">
            <div class="component">{{ 'component-management.table-header.component' | translate }}</div>
            <div class="value">{{ 'component-management.table-header.value' | translate }}</div>
        </div>
        <div class="row-separator"></div>
    </div>

    <div *ngFor="let entry of displayedComponents" class="component-row">
        <redaction-editable-structured-component-value
            #editableComponent
            [entry]="entry"
            [canEdit]="canEdit"
            (deselectLast)="deselectLast()"
            (revertOverride)="revertOverride($event)"
            (overrideValue)="overrideValue($event)"
        ></redaction-editable-structured-component-value>
        <div class="row-separator"></div>
    </div>
</div>
