<app-all-menus></app-all-menus>
<div style="padding-top: 6%;">
  <p class="headStyle">{{'CMD PACKETS' | translate}}</p>
  <div class="InputStyle">
    <div class="row">
      <div class="col-md-3" style="padding-left: 123px;">
          <md-input-container>
          <input mdInput placeholder="Search" [mdAutocomplete]="tdAuto" name="state" 
          #state="ngModel" [(ngModel)]="deviceName"
         (ngModelChange)="filterDevices(deviceName)">
         <md-autocomplete #tdAuto="mdAutocomplete">
           <!-- pending ngFor -->
            <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue">
              <span>{{device.viewValue}}</span>
            </md-option>
          </md-autocomplete>   
        </md-input-container>
        <!-- <ng-select [ngClass]="'ng-select'"  placeholder="Select user" [options]="dummyuserData" [(ngModel)]="option"> </ng-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="padding-left: 65px;padding-top:17px;">
          <button md-raised-button style="background-color:#3e3737;color:white;border:#fdfdfd;width: 120px;" class="btn btn-primary w3-button/" (click)="callfunction()">FIND</button>       
        </div>
    </div>
  </div>
  <table id="cmdTable" class="display" 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;">{{'Protocol ID' | translate}}</th>
            <th style="text-align:center;">{{'Command' | translate}}</th>
            <th style="text-align:center;">{{'Created on' | translate}}</th>
            <th style="text-align:center;">{{'ACC' | translate}}</th>
            <th style="text-align:center;">{{'Battery Status' | translate}}</th>
            <th style="text-align:center;">{{'GSM Signal' | translate}}</th>
        </tr>
    </thead>
      
</table>
</div>


