<!-- <app-all-menus></app-all-menus> -->
<div class="topDiv">
  <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>{{'Device SOS Report' | translate}}</h4>
    </div>
  </div>  
  <!-- <div class="row rowStyle" >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <app-report-filter></app-report-filter>
    </div>
  </div> -->
  <div class="row rowStyle">
    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
    
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div> -->
    <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 *ngIf="Load" class="loading">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 ID' | translate}}</th>
                      <th style="text-align:left;">{{'Vehicle No.' | translate}}</th> 
                      <th style="text-align:left;">{{'Time' | translate}}</th>
                      <th style="text-align:left;">{{'Address' | translate}}</th>         
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>





<!-- <html>
  <head>
      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  

      
    </head>
  <body>

      <app-all-menus></app-all-menus>



 <div class="small">
  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
<md-menu #menu="mdMenu">

      <a href="#">
        <h6>DASHBOARD
        <md-icon style="float:right">dashboard</md-icon>
      </h6>
    </a>  
         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a>        
  </md-menu> 
</div> 
  <div style="min-height:100vh;padding-top: 5%;">
    <p class="headStyle" style="margin-top: 0%;">{{'SOS Report' | translate}}</p>
     <div class="loading" *ngIf="Load"></div>
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-3">
            <md-input-container>
            <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
            #state="ngModel" [(ngModel)]="option"
           (ngModelChange)="filterStates(option)">
           <md-autocomplete #tdAuto="mdAutocomplete">
              <md-option *ngFor="let option of dataSelect" [value]="option.value">
                <span>{{ option.value }}</span>
              </md-option>
            </md-autocomplete>   
          </md-input-container>
     
        </div>
        <div class="col-md-3">
          <span>{{'From Date' | translate}}</span>
          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
        <div class="col-md-3">
          <span>{{'To Date' | translate}}</span>
          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
        <div class="col-md-3" style="top: 16px;">
            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'SEARCH' | translate}}</button>
            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
           
          </div>
      </div>
    </div>
    <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
      <thead style="background-color:#A2C523;color: white;">
          <tr>
              <th style="text-align:center;">{{'Device ID' | translate}}</th>
              <th style="text-align:center;">{{'Vehicle No.' | translate}}</th>
              <th style="text-align:center;">{{'Time' | translate}}</th>
              <th style="text-align:center;">{{'Address' | translate}}</th>         
          </tr>
      </thead>  
  </table>

    
  </div>
</body>
</html> -->