<section class="dialog">
    <div [translate]="'revert-value-dialog.title'" class="dialog-header heading-l"></div>

    <div class="dialog-content">
        <span [innerHTML]="valueDescription"></span>
        <div class="compare-values-container">
            <div>
                <span class="header">
                    {{ 'revert-value-dialog.original-values' | translate }}
                </span>
                <div class="values">
                    <p *ngFor="let value of entry.componentValues; let index = index">
                        {{ !!value.originalValue ? index + 1 + '. ' + value.originalValue : '' }}
                    </p>
                </div>
            </div>
            <div>
                <span class="header">
                    {{ 'revert-value-dialog.current-values' | translate }}
                </span>
                <div class="values">
                    <p *ngFor="let value of entry.componentValues; let index = index">
                        {{ !!value.value ? index + 1 + '. ' + value.value : '' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button (click)="save()" [label]="'revert-value-dialog.actions.revert' | translate" [type]="iconButtonTypes.primary" />

        <div [translate]="'revert-value-dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
    </div>

    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close" />
</section>
