<h4>{{header}}</h4>

<table class="card-rows-table">
    <colgroup>
        <col [style.width.%]="colWidthRatioInPercent">
        <col>
    </colgroup>
    <ng-container *ngFor="let attributeChange of $any(eventAttributes | filter:searchQuery:'searchParam')">
        <tr class="card-row">
            <td left-card-col [cardRowInitIndent]="0" rowspan="2">
                {{attributeChange.attributeName}}
            </td>
            <td right-card-col class="overflow-ellipsis no-padding" [class.multi-value-wrapper]="attributeChange.newValuesArr?.length > 1">
                <application-attribute-value *ngFor="let value of attributeChange.newValuesArr"
                                             [attribute]="value"
                                             [isHistorical]="true"
                                             [appendUnit]="true"
                                             [useParsedDoubleParams]="true">
                </application-attribute-value>
            </td>
        </tr>
        <tr class="card-row">
            <td right-card-col class="overflow-ellipsis no-padding" [class.multi-value-wrapper]="attributeChange.oldValuesArr?.length > 1">
                <application-attribute-value *ngFor="let value of attributeChange.oldValuesArr"
                                             [attribute]="value"
                                             [isHistorical]="true"
                                             [appendUnit]="true"
                                             [useParsedDoubleParams]="true"
                                             [deprecated]="true">
                </application-attribute-value>
            </td>
        </tr>
    </ng-container>
</table>