<div style="height: 535px;">
  <div class="row" no-padding>
    <div class="col-9" no-padding>
        <h4 style="text-align: center; margin-left: 25%;">{{'FUEL EVENTS' | translate}}</h4>
    </div>
    <div class="col-3" style="text-align: right" no-padding>
        <button md-raised-button style="width: 90px; background: red; color: white;text-align: right;margin-bottom: 10%;" (click)="cancel()">{{'CANCEL' | translate}}</button>
    </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 style="text-align:center">{{'Vehicle Name' | translate}}</th>
          <th style="text-align:center">{{'Event' | translate}}</th>
          <th style="text-align:center">{{'Fuel Change (L)' | translate}}</th>
          <th style="text-align:center">{{'Time' | translate}}</th>
          <th style="text-align:center">{{'Location' | translate}}</th>
      </thead>
      <tbody>
        <tr *ngFor="let flobj of fuelObject">
          <td style="text-align: center">{{flobj.vehicleName}}</td>
          <td style="text-align: center">{{flobj.pour}}</td>
          <td style="text-align: center">{{flobj.litres}}</td>
          <td style="text-align: center">{{flobj.timestamp | date :  'd/M/yyyy, h:mm a'}}</td>
          <td style="text-align: center;cursor:pointer">
              <div>
                  <img style="width: 25px" src='../../../assets/image/addressICON.png' (click)="getAddress(flobj)" md-tooltip="Click to get device's last location">
                  <span style="margin-top:2px;">{{flobj.locationAddress}}</span>
                </div>  
          </td>
        </tr>
      </tbody>
    </table>
  </div>
 
</div>