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

<div class="topDiv">
  <div id="toast">
    <!-- <div id="desc">{{data_descip}}</div> -->
  </div>
  <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 List' | 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: 15px; 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>

<!-- this.total_vech = this.devicess.Total_Vech;
this.idle_vech = this.devicess["Ideal Devices"];
this.off_vech = this.devicess["OFF Devices"];
this.maintanance = this.devicess["Maintance Device"];
this.expiredDevices = this.devicess["expire_status"];
this.OutOfReach = this.devicess["OutOfReach"];
this.no_data = this.devicess["no_data"]?this.devicess["no_data"]:0;
this.Running = this.devicess["running_devices"];
this.expire_status -->
  <div class="col-sm-9 col-md-9 col-lg-9">

    <div class="row">
      <div class="col-md-02">
      <div class="card shadow-sm rounded" style="background: #f0810f;">
        <h6>Total Vehicle</h6>
        <span>{{total_vech}}</span>

      </div>
      </div>
      <div class="col-md-02" >
       <div class="card shadow-sm rounded " style="background: #f5be41;">
        <h6>Idle </h6>
        <span>{{idle_vech}}</span>

      </div>
      </div>
      <div class="col-md-02">
        <div class="card shadow-sm rounded " style="background: red;">
      <h6>Stopped </h6>
      <span>{{off_vech}}</span>
      </div>
      </div>
     
      <div class="col-md-02">
       <div class="card shadow-sm rounded" style="background:green;"> 
        <h6>Running </h6>
        <span>{{Running}}</span>

      </div>
      </div>
      <div class="col-md-02">
       <div class="card shadow-sm rounded " style="background: #712d33;">
      <h6>Expired </h6>
      <span>{{expiredDevices}}</span>

      </div>
      </div>
      <div class="col-md-02">
       <div class="card shadow-sm rounded " style="background: #4897d8;">
        <h6>Out Of Reach </h6>
        <span>{{OutOfReach}}</span>

      </div>
      </div>
      <div class="col-md-02">
       <div class="card shadow-sm rounded " style="background: #5b7065;">
        <h6>No data </h6>
        <span>{{no_data}}</span>

      </div>
      </div>

    </div>


    <div class="loading" *ngIf="Load">Loading&#8230;</div>
    <div style="width: 100%;height:70vh;margin-top: 32px;">
      <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 Name' | translate}}</th>
            <th style="text-align: left;">{{'Device IMEI' | translate}}</th>
            <th style="text-align: left;">{{'User' | translate}}</th>
            <th style="text-align: left;">{{'Distributer' | translate}}</th>
            <th style="text-align: left;">{{'Distributer Mob' | translate}}</th>
            <th style="text-align: left;">{{'Creation Date' | translate}}</th>
            <th style="text-align: left;">{{'Expiration Date' | translate}}</th>
            <th style="text-align: left;">{{'Renewed On' | translate}}</th>
            <th style="text-align: left;">{{'Dealer name' | translate}}</th>
            <th style="text-align: left;">{{'Is Supended' | translate}}</th>
            <th style="text-align: left;">{{'Is Deleted' | translate}}</th>
            <th style="text-align: left;">{{'Deleted On' | translate}}</th>
            <th style="text-align: left;">{{'Integration Id' | translate}}</th>
            <!-- <th style="text-align: left;">{{'Organization name' | translate}}</th> -->

          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

</div>