<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">
    <p class="headStyle">{{'Alert Report' | translate}}</p>
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-3">
          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--Select Device--"  ngDefaultControl>
            <md-option *ngFor="let option of options" [value]="option">
              {{ option.value }}
            </md-option>
          </md-select>
        </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)="alertReport(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/">{{'Export to excel' | translate}}</button>
          </div>
      </div>
    </div>
    <table class="table table-striped table-hover " style="overflow-y: hidden;
           overflow-x: hidden;font-size:12px">

      <thead>
        <tr>
          <th>{{'No' | translate}}</th>
          <th> {{'Date' | translate}}</th>
          <th>{{'Power Cut' | translate}}</th>
          <th>{{'Battery' | translate}}</th> 
          <th>{{'SOS' | translate}}</th>   
          <th>{{'Ignition' | translate}}</th> 
          <th>{{'Geofencing' | translate}}</th> 
          <th>{{'Overspeeding' | translate}}</th>    

        </tr>
      </thead>
      <tbody>
        <!-- <tr *ngFor="let device of alert_data">
          <td style="cursor:pointer">{{device.vehicleName}}</td>
          <td style="cursor:pointer">{{device.overSpeed}}</td>
          <td style="cursor:pointer">{{device.address}}</td>
          <td style="cursor:pointer">{{device.timestamp}}</td>
        </tr> -->
      </tbody>
    </table>



  </div>


</body>

</html>