<!-- <div style="max-height: 550px;height: auto;border-radius: 8px">
  <div class="loading" *ngIf="Load">Loading&#8230;</div>
  <div *ngIf="showError">
    <p></p>
  </div>
  <table id="test" class="table table-striped table-hover" style="height: 500px ;overflow: auto;font-size:12px">
    <thead style="background-color:#A2C523;color: white;">
      <tr>
        <th style="text-align: center">{{'Vehicle' | translate}}</th>
        <th style="text-align: center">{{'On/Off' | translate}}</th>
        <th style="text-align: center">{{'Time' | translate}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let report of tableArr; let i=index;">
        <td style="text-align: center">{{report.vehicleName}}</td>
        <td style="text-align: center">{{report.action}}</td>
        <td style="text-align: center">{{report.actionTime | date : 'medium'}}</td>
      </tr>
    </tbody>
  </table>
</div> -->

<div style="height: 535px;">
  <div class="row" no-padding>
    <div class="col-9" no-padding>
      <h4 style="text-align: center; margin-left: 25%;">{{'Ac Report Details' | translate}}</h4>
    </div>
    <div class="col-3" style="text-align: right" no-padding>
      <i class="far fa-times-circle" style="font-size: 25px;color: red;margin-top: 2px;" (click)="cancel()"
        title="Close"></i>
    </div>
  </div>
  <!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
  <div>
    <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
      overflow-x: hidden;font-size:12px">
      <thead>
        <tr>
          <th>{{'Time' | translate}}</th>
          <th>{{'Vehicle Name' | translate}}</th>
          <th>{{'Ignition Status' | translate}}</th>
      </thead>
      <tbody>
        <tr *ngFor="let flobj of ignitionObj">
          <td>{{flobj.timestamp | date : 'd/M/yyyy, h:mm a'}}</td>
          <td>{{flobj.vehicleName}}</td>
          <td>{{flobj.switch}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>