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

    <hr />
    <div class="dialog-content" id="scm-edit">
        <div *ngIf="componentLogData() as componentLogEntries" class="table output-data">
            <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>
            <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>
            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>
            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>

            <ng-container *ngFor="let entry of componentLogEntries; let index = index">
                <div class="bold">{{ entry.name.replaceAll('_', ' ').toLowerCase() }}</div>
                <div [id]="getValueCellId(index)">
                    <iqser-editable-input
                        (save)="saveEdit($event, entry.name)"
                        [canEdit]="canEdit"
                        [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
                        [editTooltip]="'component-log-dialog.actions.edit' | translate"
                        [id]="'value-' + index"
                        [parentId]="getValueCellId(index)"
                        [saveTooltip]="'component-log-dialog.actions.save' | translate"
                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
                        [attr.helpModeKey]="'scm_edit_DIALOG'"
                    >
                        <ng-container slot="editing">
                            <iqser-circle-button
                                (action)="undo(entry.name)"
                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
                                [showDot]="true"
                                [tooltip]="
                                    'component-log-dialog.actions.undo'
                                        | translate: { value: entry.componentValues[0].originalValue }
                                        | replaceNbsp
                                "
                                [attr.help-mode-key]="'scm_undo_DIALOG'"
                                class="ml-2"
                                icon="red:undo"
                            ></iqser-circle-button>
                        </ng-container>
                    </iqser-editable-input>
                </div>
                <div>{{ entry.componentValues[0].valueDescription }}</div>
                <div>
                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">
                        <li
                            *ngFor="let reference of entry.componentValues[0].entityReferences"
                            [innerHTML]="
                                'component-log-dialog.annotations'
                                    | translate
                                        : {
                                              type: entry.name,
                                              page: reference.page,
                                              ruleNumber: reference.entityRuleId
                                          }
                            "
                            class="mb-8"
                        ></li>
                    </ul>

                    <ng-template #noReferences>-</ng-template>
                </div>
            </ng-container>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            (action)="exportJSON()"
            [label]="'component-log-dialog.actions.export-json' | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
            [attr.help-mode-key]="'scm_export_DIALOG'"
        ></iqser-icon-button>

        <iqser-icon-button
            (action)="exportXML()"
            [label]="'component-log-dialog.actions.export-xml' | translate"
            [type]="iconButtonTypes.primary"
            [attr.help-mode-key]="'scm_export_DIALOG'"
        ></iqser-icon-button>

        <iqser-icon-button
            (action)="exportAllInDossier()"
            *ngIf="userPreferences.isIqserDevMode"
            [type]="iconButtonTypes.primary"
            label="Export All"
        ></iqser-icon-button>

        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>
        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"
            >{{ 'component-log-dialog.actions.display-by-default' | translate }}
        </mat-checkbox>
    </div>

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