<p-progressSpinner *ngIf="showLoader"></p-progressSpinner>

<div class="ui-g-12 ui-md-12" *ngIf="!showLoader && BO">
    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane show active" id="v-pills-details" role="tabpanel" aria-labelledby="v-pills-details-tab">
            <h3 class="tab-header">Audit Trail</h3>
            <div class="dashboard">
                <div class="chat">
                    <div class="event" *ngFor="let event of events">
                        <div class="ui-g-12 ui-md-6 ui-lg-6">
                            <h4 class="event-header">Audit Event:</h4>
                        </div>
                        <div class="ui-g-12 ui-md-6 ui-lg-6">&nbsp;</div>
                        <div class="ui-g-12 ui-md-6 ui-lg-6">
                            <div class="ui-g-12 ui-md-3 ui-lg-3">
                                <strong>User</strong>
                            </div>
                            <div class="ui-g-12 ui-md-3 ui-lg-3">{{event.UserName}}({{event.UserID}})</div>
                        </div>
                        <div class="ui-g-12 ui-md-6 ui-lg-6">
                            <div class="ui-g-12 ui-md-3 ui-lg-3">
                                <strong>Date</strong>
                            </div>
                            <div class="ui-g-12 ui-md-3 ui-lg-3">{{event.ObjectCreated | date: 'dd MMM yyyy hh:mm'}}</div>
                        </div>
                        <div class="ui-g-12 ui-md-6 ui-lg-6" *ngIf="event.Description">
                            <div class="ui-g-12 ui-md-6 ui-lg-6">
                                <strong>Description</strong>
                            </div>
                            <div class="ui-g-12 ui-md-6 ui-lg-6">{{event.Description}}</div>
                        </div>
                        <div *ngFor="let changeSet of event.DirectChangeSets">
                            <div class="ui-g-12 ui-md-6 ui-lg-6">
                                <div class="ui-g-12 ui-md-6 ui-lg-6">
                                    <p>Change Set : {{changeSet.ReferenceClass}} : {{changeSet.ReferenceID}} ({{changeSet.ObjectStatus?.Name}})</p>
                                </div>
                            </div>
                            <p-table #notesTablesTable [columns]="changeTablesCols" [value]="changeSet.Changes" [paginator]="false" >
                                <ng-template pTemplate="colgroup" let-columns>
                                    <colgroup>
                                        <col *ngFor="let col of columns" [style.width]="col.width">
                                    </colgroup>
                                </ng-template>
                                <ng-template pTemplate="header" let-columns>
                                    <tr>
                                        <th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.noSort">
                                            {{col.header}}
                                            <p-sortIcon [field]="col.field" *ngIf="!col.noSort"></p-sortIcon>
                                        </th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                                    <tr>                                   
                                        <td>
                                            <label> {{rowData.FieldName}} </label>
                                        </td>
                                        <td>
                                            <label> {{rowData.ChangeType.Description}} </label>
                                        </td>
                                        <td>
                                            <label> {{rowData.OldValue}} </label>
                                        </td>
                                        <td>
                                            <label> {{rowData.NewValue}} </label>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <br><br>
                        </div>
                        <div *ngFor="let changeSet of event.ChangeSet">
                            <div *ngFor="let affectedScope of changeSet.UnallocatedAffectedScopes">
                                <div class="ui-g-12 ui-md-12 ui-lg-12">
                                    <div class="ui-g-12 ui-md-6 ui-lg-6">
                                        {{affectedScope.Relationship}}
                                    </div>
                                </div>
                                <div class="ui-g-12 ui-md-12 ui-lg-12">
                                    <div class="ui-g-12 ui-md-6 ui-lg-6">
                                        Change Set : {{affectedScope.ChangeSet?.ReferenceClass}} : {{affectedScope.ChangeSet?.ReferenceID}} ({{affectedScope.ChangeSet?.ObjectStatus?.Name}})
                                    </div>
                                </div>
                                <p-table #notesTablesTable [columns]="changeTablesCols" [value]="affectedScope.ChangeSet?.Changes" [paginator]="false" >
                                    <ng-template pTemplate="colgroup" let-columns>
                                        <colgroup>
                                            <col *ngFor="let col of columns" [style.width]="col.width">
                                        </colgroup>
                                    </ng-template>
                                    <ng-template pTemplate="header" let-columns>
                                        <tr>
                                            <th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.noSort">
                                                {{col.header}}
                                                <p-sortIcon [field]="col.field" *ngIf="!col.noSort"></p-sortIcon>
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                                        <tr>                                   
                                            <td>
                                                <label> {{rowData.FieldName}} </label>
                                            </td>
                                            <td>
                                                <label> {{rowData.ChangeType.Description}} </label>
                                            </td>
                                            <td>
                                                <label> {{rowData.OldValue}} </label>
                                            </td>
                                            <td>
                                                <label> {{rowData.NewValue}} </label>
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <br><br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
