<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">
      <i
        *ngIf="custtype || adbtn || superAdmin"
        class="fas fa-plus-circle"
        (click)="add_DeviceModel()"
        md-tooltip="Add Model"
        style="
          box-shadow: 3px 1px 5px 0px #b2b0ae;
          cursor: pointer;
          float: left;
          font-size: 30px;
          border-radius: 50px;
          margin-left: 20px;
        "
      ></i>
      <button
        md-tooltip="Export To Excel"
        (click)="exportToExcel()"
        style="
          box-shadow: 3px 1px 5px 0px #b2b0ae;
          cursor: pointer;
          float: left;
          font-size: 21px;
          border-radius: 50px;
          margin-left: 20px;
          height: 38px;
          width: 38px;
          margin-top: -3px;
        "
      >
        <i class="far fa-file-excel"></i>
      </button>
      <h4>{{ "Device Model" | translate }}</h4>
    </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">
         
        </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;
          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:82vh;overflow: auto;"> -->
          <table
            id="deviceTable"
            class="table table-striped table-hover"
            style="font-size: 12px"
          >
            <thead style="background-color: #e0e0e0; color: #444444">
              <tr>
                <th></th>
                <th>{{ "Device Type" | translate }}</th>
                <th>{{ "Configuration Command" | translate }}</th>
                <th>{{ "Location Command" | translate }}</th>
                <th>{{ "Immobilzer Command" | translate }}</th>
                <th>{{ "Resume Command" | translate }}</th>
                <th>{{ "Reset Command" | translate }}</th>
                <th>{{ "Immoblizer Type" | translate }}</th>
                <th>{{ "Port" | translate }}</th>
                <th>{{ "SMS APN" | translate }}</th>
                <th>{{ "SMS Ip" | translate }}</th>
                <th>{{ "SMS Timezone" | translate }}</th>
                <th>{{ "Edit" | translate }}</th>
                <th>{{ "Delete" | translate }}</th>
              </tr>
            </thead>
          </table>
          <!-- </div>   -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- *ngIf="orgChk === true"
*ngIf="orgChk === true" -->

<!-- 
<app-all-menus></app-all-menus>
<div class="container-fluid" style="padding-top: 6%;">
  <div>
    <p style="text-align: center; font-size: 25px; font-weight: 500; margin-top: 20px;">{{'Device Model' | translate}}</p>
  </div>
  <div class="filterStyle">
    <div class="row">
      <div class="col-12" style="padding: 0;">
        <button md-tooltip="Add Device Model"
          style="border:1px solid transparent; background-color: transparent;margin-top:8px" (click)="add_DeviceModel()"
          *ngIf="custtype||adbtn||superAdmin">
          <md-icon style="float: right;width:30px;height:30px;">add</md-icon>
        </button>
        <div style="float: right;margin-top: 8px;margin-right: 30px;">
            <button [disabled]="lastcall" (click)="pre()"> < {{'Previous' | translate}} </button>
            <button [disabled]="firstcall" (click)="next()"> {{'Next' | translate}} > </button>
        </div>
      
        <input type="search" id="myInput" class="form-control" style="margin-top: 8px; border-radius: 4px; width: 201px; font-size: 16px; height: 30px; margin-right: 42px;" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)" placeholder="Device Search" />
      </div>
    </div>
      <div class="row">
        <div class="col-12">
          <flash-messages style="float: center;"></flash-messages>
        </div>
      </div>
      <div class="row" class="scrollbar" id="style-1" >
        <div class="col-12" style="padding: 0;">
          <table id="myTable" class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
            <thead style="background-color:#A2C523;color: white;">
              <tr>
                <th>{{'Device Type' | translate}}</th>
                <th>{{'Configuration Command' | translate}}</th>
                <th>{{'Location Command' | translate}}</th>
                <th>{{'Immobilzer Command' | translate}}</th>
                <th>{{'Resume Command' | translate}}</th>
                <th>{{'Reset Command' | translate}}</th>
                <th>{{'Immoblizer Type' | translate}}</th>
                <th>{{'Port' | translate}}</th>
                <th *ngIf="orgChk === true">{{'Edit' | translate}}</th>
                <th *ngIf="orgChk === true">{{'Delete' | translate}}</th>
              </tr>
            </thead>

            <tbody>

              <tr *ngFor="let data of deviceModel">

                <td style="cursor:pointer">{{data.device_type}}</td>
                <td style="cursor:pointer">{{data.configuration_command}}</td>
                <td style="cursor:pointer">{{data.location_command}}</td>
                <td style="cursor:pointer">{{data.immoblizer_command}}</td>
                <td style="cursor:pointer">{{data.resume_command}}</td>
                <td style="cursor:pointer">{{data.reset_command}}</td>
                <td style="cursor:pointer">{{data.imobliser_type}}</td>
                <td style="cursor:pointer">{{data.deviceport}}</td>
                <td>
                  <p *ngIf="orgChk === true"><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;text-align: center;cursor: pointer;" (click)="editDeviceModel(data)"> <md-icon>edit</md-icon> </button></p>
                </td>
                <td *ngIf="orgChk === true" style="float:left;cursor: pointer;"> <md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon> </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div> -->
