<div class="topDiv">
  <div id="toast">
    <!-- <div id="desc">{{data_descip}}</div> -->
  </div>
  <div class="row"
    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="col-2" style="position: absolute;top: -7px;">
        <md-select [(ngModel)]="travelPat_duration.interval" 
          placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
          <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
            {{path.label}}
          </md-option>
        </md-select>
      </div>
      <h4>{{'Travel Path Report' | translate}}</h4>
      <flash-messages style="float: center;"></flash-messages>
      <!-- <button class="btn btn-danger pull-right" style="position: absolute;top: -2px; right: 23px;" (click)="downloadPdf()">Export PDF</button> -->
    </div>
  </div>

  <div class="row rowStyle">


    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <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">
              <div class="loading" *ngIf="Load">Loading&#8230;</div>
              <div style="width: 100%;height:84vh;">
                <table id="travelPath" cellspacing="0" style="width: 100%;font-size: 14px;">
                  <thead style="background-color:#e0e0e0;color: #444444;">
                    <tr>
                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
                      <th style="text-align: left;">{{'IMEI' | translate}}</th>
                      <th style="text-align: left;">{{'Date' | translate}}</th>
                      <th style="text-align: left;">{{'ODO (K.M)' | translate}}</th>
                      <th style="text-align: left;">{{'DISTANCE (K.M)' | translate}}</th>
                      <th style="text-align: left;">{{'SPEED (K.M/Hr)' | translate}}</th>
                      <th style="text-align: left;">{{'AVG SPEED' | translate}}</th>
                      <th style="text-align: left;">{{'EXT BATTERY' | translate}}</th>
                      <th style="text-align: left;">{{'TEMP' | translate}}</th>
                      <th style="text-align: left;">{{'CUMM DISTANCE' | translate}}</th>
                      <th style="text-align: left;">{{'LOCATION' | translate}}</th>
                      <th style="text-align: left;">{{'ADDRESS' | translate}}</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
    
        </div>
    
      </div>
    </div>


</div>

  <table id="headerTable" style="border: 1px solid black;width: 100%;
      border-collapse: collapse;position: absolute;top: -62px;">
    <!-- <tr style="text-align:center">
      <div style="text-align:center">Table</div>
    </tr> -->
    <tr style="height:30px;border-top:1px solid black;">
      <td>
        <span style="font-weight: 700;">Name</span>: {{device_name}}
      </td>
      <td>
        <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: 700;">Start Time</span>:{{f_date}}
         <!-- {{startTime}} -->
      </td>
      <td>
        <span style="font-weight: 700;">End Time</span>: {{t_date}}
        <!-- {{endTime}} -->
      </td>
    </tr>
    <tr style="height:30px;border-top:1px solid black">
      <td>
        <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
      </td>
      <td>
        <span style="font-weight: 700;">End Address</span>: {{endAddress}}
      </td>
    </tr>
  </table>
