<!-- <app-all-menus></app-all-menus> -->
<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">
      <h4>{{'Distance Report' | translate}}</h4>
    </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">
              <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 style="width: 100%;height:84vh;">
                <table id="deviceTable" 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;">{{'From Date' | translate}}</th>
                      <th style="text-align: left;">{{'To Date' | translate}}</th>
                      <th style="text-align: left;">{{'Start Location' | translate}}</th>
                      <th style="text-align: left;">{{'End Location' | 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>
</div>
<table id="headerTable" style="border: 1px solid black;width: 100%;
      border-collapse: collapse;position: absolute;top: -62px;">
  <tr style="height:30px;border-top:1px solid black;">
    <td>
      <span style="font-weight: 700;">Report Interval from</span> {{Fromdate | date:"medium"}} to {{todate | date:"medium"}}
    </td>
    <!-- <td>
      <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
    </td> -->
  </tr>

</table>
