<div class="controls" *ngIf="showToolbar">
  <div class="control">
    <label class="control__label" for="task-info">
      <input class="control__checkbox" id="task-info" type="checkbox" [(ngModel)]="isTaskChecked"
             (click)="updateViewType('task')">Task Information
    </label>
  </div>
  <div class="control">
    <label class="control__label" for="data-changes">
      <input class="control__checkbox" id="data-changes" type="checkbox" [(ngModel)]="isDataChecked"
             (click)="updateViewType('data')">Data Changes
    </label>
  </div>
  <div class="control">
    <label class="control__label" for="comments-log">
      <input class="control__checkbox" id="comments-log" type="checkbox" [(ngModel)]="isNoteChecked"
             (click)="updateViewType('note')">Note/Comments log
    </label>
  </div>
  <button (click)="loadAuditHistory()" type="button" df-button class="btn-blue controls__btn">Refresh View</button>
  <button (click)="exportToExcel()" type="button" df-button class="btn-blue controls__btn">Export to Excel</button>
</div>

<section *ngIf="auditHistory" class="section">
  <h2 class="section__header">Audit History - {{ auditHistory.instanceName }}</h2>
  <div class="section__info info" *ngIf="showInfo">
    <div class="row info__group">
      <div class="col-4">
        <span class="info__label">Created by:</span>
        <span class="info__content">{{ auditHistory.createdBy }}</span>
      </div>
    </div>
    <div class="row info__group">
      <div class="col-4">
        <span class="info__label">Started on:</span>
        <span class="info__content">{{ auditHistory.startedOn }}</span>
      </div>
      <div class="col-4">
        <span class="info__label">Completed on:</span>
        <span class="info__content">{{ auditHistory.completedOn }}</span>
      </div>
    </div>
    <div class="row info__group">
      <div class="col-4">
        <span class="info__label">Expected duration:</span>
        <span class="info__content">{{ auditHistory.expectedDuration }}</span>
      </div>
      <div class="col-4">
        <span class="info__label">Actual Duration:</span>
        <span class="info__content">{{ auditHistory.totalDuration }}</span>
      </div>
    </div>
    <div class="row info__group">
      <div class="col-4">
        <span class="info__label">Status:</span>
        <span class="info__content">{{ auditHistory.status }}</span>
      </div>
      <div class="col-4">
        <span class="info__label">Elapsed time:</span>
        <span class="info__content">{{ auditHistory.elapsedTime }}</span>
      </div>
    </div>
  </div>
  <div class="section__table">
    <div class="table-wrapper">
      <table df-table [data]="[]">
        <thead>
        <tr *ngIf="viewTypeCur != 'note'">
          <th>Date/Time</th>
          <th>Activity (Group By)</th>
          <th>Performer</th>
          <th>Description</th>
          <th *ngIf="viewTypeCur != 'data'">Data Changes</th>
        </tr>
        <tr *ngIf="viewTypeCur == 'note'">
          <th>Note/Comments log</th>
        </tr>
        </thead>
        <tbody *ngIf="viewTypeCur == 'task'">
        <tr class="audit" *ngFor="let audit of auditHistory.activityDetails"
            df-expandable-row
            [expandableContent]="detailRow"
            [data]="audit.dataSlotList">
          <td (click)="$event.stopPropagation()" class="audit__date ws-nowrap">{{audit.date}}</td>
          <td (click)="$event.stopPropagation()">
            <b>{{audit.activity}}</b>
          </td>
          <td (click)="$event.stopPropagation()" class="audit__performer ws-nowrap"
              [title]="audit.performer">{{audit.performer}}
          </td>
          <td (click)="$event.stopPropagation()">{{audit.description}}</td>
          <td (click)="!audit.dataSlotList.length > 0 && $event.stopPropagation()">
            <button type="button"
                    *ngIf="audit.dataSlotList.length > 0"
                    class="simple-btn expand-btn">
              <i class="fa fa-table pointer-events-none"></i>
            </button>
          </td>
        </tr>
        </tbody>
        <tbody *ngIf="viewTypeCur == 'data'">
        <ng-template ngFor let-audit of [ngForOf]="auditHistory.activityDetails">
          <tr class="audit">
            <td class="audit__date ws-nowrap">{{audit.date}}</td>
            <td>
              <b>{{audit.activity}}</b>
            </td>
            <td class="audit__performer ws-nowrap"
                [title]="audit.performer">{{audit.performer}}
            </td>
            <td>{{audit.description}}</td>
          </tr>
          <tr *ngIf="audit.dataSlotList.length > 0">
            <td colspan="4">
              <div class="row-detail">
                <table df-infinite-table class="row-detail__table" [data]="audit.dataSlotList">
                  <thead>
                  <tr>
                    <th>Dataslot Name</th>
                    <th>Value at Activation</th>
                    <th>Value at Completion</th>
                  </tr>
                  </thead>

                  <tbody>
                  <tr *ngFor="let obj of audit.dataSlotList">
                    <td>{{obj.name}}</td>
                    <td>{{obj.activationValue}}</td>
                    <td>{{obj.completionValue}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </td>
          </tr>
        </ng-template>
        </tbody>
        <tbody *ngIf="viewTypeCur == 'note'">
        <tr class="audit" *ngFor="let audit of auditHistory.activityDetails">
          <td *ngIf="audit.activity == null || audit.activity == ''"><b>Instance Level Note</b></td>
          <td *ngIf="audit.activity == null || audit.activity == ''">Activity: <b>{{ audit.activity }}</b></td>
        </tr>
        </tbody>
      </table>
      <div class="no-data" *ngIf="auditHistory.activityDetails == null || auditHistory.activityDetails.length === 0">
        <i class="fa fa-info-circle no-data__icon"></i> No records found
      </div>
    </div>
  </div>
</section>

<ng-template #detailRow let-data="data">
  <div df-row-detail>
    <div class="row-detail">
      <table df-infinite-table class="row-detail__table" [data]="data">
        <thead>
        <tr>
          <th>Dataslot Name</th>
          <th>Value at Activation</th>
          <th>Value at Completion</th>
        </tr>
        </thead>

        <tbody>
        <tr *ngFor="let obj of data">
          <td>{{obj.name}}</td>
          <td>{{obj.activationValue}}</td>
          <td>{{obj.completionValue}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</ng-template>