<!-- <flash-messages style="float: center;"></flash-messages>
<div style="height: 535px;padding-top: 6%;">
    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <div>
        <h4 style="text-align:center">{{'TRIP HISTORY' | translate}}</h4>
      </div>
      <button style="background-color: #427942;border: white;float:right;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>       
      <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
      overflow-x: hidden;font-size:12px">
      <thead>
          <tr>
      <th>{{'Event name' | translate}}</th>
      <th>{{'Event time' | translate}}</th>
      <th>{{'Location' | translate}}</th>
      <th>{{'Vehicle name' | translate}}</th>
      <th>{{'Driver' | translate}}</th>
      </thead>
      <tbody>
      <tr *ngFor="let history of populateHistory">
      <td style="cursor:pointer">{{history.item.sentence}}</td>
      <td style="cursor:pointer">{{history.timestamp|date:'short'}}</td>
      <td style="cursor:pointer">{{history.address}}</td>
      <td style="cursor:pointer">{{history.vehicleName}}</td>
      <td style="cursor:pointer">{{history.driver?history.trip.driver.name:'NA'}}</td>
      </tr>
      </tbody>
      </table>  
</div>
  -->

<div class="container">
    <div id="map" style="width:100%;height: 100%;"></div>
    <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index"
        style="position: absolute; top: 10px;background: white; border-radius: 2px;padding: 3px 20px;left: 215px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
        <div class="col-12">
            <div style="display: flex;">
                <div>
                    <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='init'" (click)="play(i)"
                        mdTooltip="{{'Play History' | translate}}"
                        style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                    <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='start'" (click)="play(i)"
                        mdTooltip="{{'Play History' | translate}}"
                        style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                    <i class="far fa-pause-circle" *ngIf="tempMapHistory[i].flag=='stop'" (click)="play(i)"
                        mdTooltip="{{'Pause' | translate}}"
                        style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                </div>
                <input type="range" min="0" max={{seekBarValue}} [(ngModel)]="sliderValue" class="slider" id="slider1"
                    style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"
                    (change)="zoomSet()">
                <!-- <div class="kWgQNm" id="myDIV">
              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa dfmgGo active" (click)="changeSpeed(1)">1x</div>
              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(2)">2x</div>
              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(5)">5x</div>
              <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" class="sc-bdVaJa bvKoMW" (click)="changeSpeed(10)">10x</div>
            </div> -->
            </div>
        </div>
    </div>
    <!-- <div class="row"
        style="padding:0;position: absolute;top: 432px;background: white;border-radius: 2px;padding: 10px 0px;width: 62%;left: 40px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
        <div class="col-3">
            <p style="font-weight: 700;text-align: center;margin: 0;">Distance</p>
            <p style="text-align: center;margin: 0;">{{tdistance}}</p>
        </div>
        <div class="col-5">
            <p style="font-weight: 700;text-align: center;margin: 0;">Cumulative Distance (Kms.)</p>
            <p style="text-align: center;margin: 0;">{{cummulative_Distance}}</p>
        </div>
        <div class="col-4">
            <p style="font-weight: 700;text-align: center;margin: 0;">Speed (Kmph)</p>
            <p style="text-align: center;margin: 0;">{{speeed2}}</p>
        </div>
        <div class="col-2">
          <p style="font-weight: 700;text-align: center;margin: 0;">Time</p>
          <p style="text-align: center;margin: 0;">{{triptime|date:'medium'}}</p>
        </div>
    </div> -->
</div>