<div class=modal-header style="margin-bottom: 6px;">
  <h4>Trip Details</h4>
  <div class="text-right">
    <button class="mat-raised-button" md-raised-button="" style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;
              width: 110px;" (click)="exportExcel()"><span class="mat-button-wrapper">Export To
        Excel</span>
      <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
        ng-reflect-centered="false" ng-reflect-disabled="false"></div>
      <div class="mat-button-focus-overlay"></div>
    </button>
    <button class="mat-raised-button" md-raised-button="" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;
                      width: 110px;" (click)="dialogRef.close()"><span class="mat-button-wrapper">Close &nbsp;&nbsp;<i
          class="fa fa-times" aria-hidden="true"></i>
      </span>
      <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
        ng-reflect-centered="false" ng-reflect-disabled="false"></div>
      <div class="mat-button-focus-overlay"></div>
    </button>
  </div>
</div>
<h5>{{DeviceName}} &nbsp;&nbsp;{{date | date}}</h5>
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">

<table style="margin-top: 35px;" class="table table-bordered">
  <tbody>
    <tr>
      <th>Distance</th>
      <td>{{mainData.today_odo | number:'1.1-2'}}</td>
     
    </tr>
    <tr>
      <th>Running</th>
      <td>{{Running}}</td>
    
    </tr>
    <tr>
      <th>Idle</th>
      <td>{{Idle}}</td>
     
    </tr>
    <tr>
      <th>Stop</th>
      <td>{{Stop}}</td>
     
    </tr>
  </tbody>
</table>

</div>
<div class="col-sm-9 col-md-9 col-lg-9">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <!-- <div class="col-sm-12 col-md-12 col-lg-12">
          <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
            style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
            | translate}} >></button>
          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
            style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
            << {{'Previous' | translate}}</button>
        </div> -->
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div class="loading" *ngIf="Load">Loading&#8230;</div>
          <div>
            <table id="dailyDetailsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
              <thead style="background-color:#e0e0e0;color: #444444;">
                <tr>
                  <th style="text-align: left;">{{'Event' | translate}}</th>
                  <th style="text-align: left;">{{'Start Time' | translate}}</th>
                  <th style="text-align: left;">{{'Start Location' | translate}}</th>
                  <th style="text-align: left;">{{'End Time' | translate}}</th>
                  <th style="text-align: left;">{{'End Location' | translate}}</th>
                  <th style="text-align: left;">{{'Duration' | translate}}</th>
                  <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
                  <!--<th style="text-align: left;">{{'Details' | translate}}</th> -->

                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>
</div>