<h2 class="floating-title">{{title}}</h2>
<div class="main-content">
  <div class="row align-container">
    <div class="col-12">    
      <label for="sel3">Plantas</label>
    </div>
  </div>
  <div class="row align-container" style="padding: 0 25px;">
    <div class="col-lg-6 col-sm-4 p-1">
      <div class="row">
        <div class="col-lg-12 col-sm-12">
          <select class="custom-select" (change)="onChangeObj($event)" name="sel3">
            <option *ngFor="let item of listAssets" [selected]="item.id===organizationId" [value]="item.id" >{{item.name}}</option>
          </select>
        
        </div>
      </div>
      <!--<div class="row">
        <div class="col-lg-12">
            <div class="widget environment-meters">
                <div class="mini-stats">
                  <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
                  <h5 *ngIf="eProduced">
                    {{eProduced.thisWeek.total_energy_kWh/1000 | number}}
                    <small>MWh</small>
                  </h5>
                </div>
              </div>
          </div>
      </div>
    -->  
    </div>

    <!-- Weather card -->
    <div class="col-lg-6 col-sm-8 p-1">
      <div class="row">
        <div class="col-lg-12">
          <app-weather-card></app-weather-card>
        </div>
      </div>
    </div>

  </div>

  <!-- Basic stats cards -->
  <div class="row align-container" style="padding: 0 25px;">

    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="sky-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyDay}}
            <small>kW</small>
          </h3>
          <p>Ultimo dia</p>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyWeek}}
            <small>MWh</small>
          </h3>
          <p>Ultima semana</p>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyMonth}}
            <small>MWh</small>
          </h3>
          <p>Ultimos 30 días</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="eProduced">
            {{energyYear}}
            <small>MWh</small>
          </h3>
          <p>Total</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Chartjs potency generation graphic -->
  <div class="row align-container">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="widget">
        <div class="mini-stats">

          <div class="chart-container">
            <canvas id="canvas">{{ chart1 }}</canvas>
          </div>

          <p>Seleccione un rango de visualización</p>

          <button class="btn" [class.btn-success]='isActive[0]' (click)="onMeasureClickRange('day')">Día</button>
          <button class="btn" [class.btn-success]='isActive[1]' (click)="onMeasureClickRange('week')">Semana</button>
          <button class="btn" [class.btn-success]='isActive[2]' (click)="onMeasureClickRange('month')">Mes</button>
          <button class="btn" [class.btn-success]='isActive[3]' (click)="onMeasureClickRange('year')">Año</button>
          <div class="input-box-container">
            <input class="input-box" placeholder="Click to select a date" 
              angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" 
              [(ngModel)]="model" [options]="myDpOptions" (dateChanged)="onDateChanged($event)" 
              #dp="angular-mydatepicker"/>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  <!-- Enviromental cool stats cards -->
  <div class="row align-container">

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/tv-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            La energía para operar un televisor durante
            <span>1,847,140</span>
            horas
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/car-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            Los gases de efecto invernadero que emiten 
            <span>57</span>
            usuarios de vehiculos en 1 año
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/desktop-pc-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            La energía para alimentar 
            <span>2044</span>
            computadoras por 1 año
          </div>
           
        </div>
      </div>
    </div>

  </div>

  <br>
  <br>

</div>
