<h2 class="floating-title">{{title}}</h2>

<div class="main-content">
  <div class="container-fluid">

    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="card dark-yellow-skin bg-gradient-danger card-img-holder text-white">
          <div class="card-body">
            <img alt="circle-image" class="card-img-absolute" src="assets/img/waves-opt.png">
            <h4 class="font-weight-normal mb-3">Total de plantas instaladas
              <i class="mdi mdi-chart-line mdi-24px float-right"></i>
            </h4>
            <h2 class="mb-3" *ngIf="listAssets">{{listAssets.length}}</h2>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="card sky-skin bg-gradient-danger card-img-holder text-white">
          <div class="card-body">
            <img alt="circle-image" class="card-img-absolute" src="assets/img/waves-opt.png">
            <h4 class="font-weight-normal mb-3">Capacidad instalada total
              <i class="mdi mdi-chart-line mdi-24px float-right"></i>
            </h4>
            <h2 class="mb-3">{{sumarize}} kW</h2>
          </div>
        </div>
      </div>


    </div>

    <div class="row ">
      <div *ngIf="error; then showAlert"></div>
      <ng-template #showAlert>
        <div class="col-lg-12">
          <div class= 'card border-danger'>
            <div class="card-body">
              Error en el servidor, no se pudo obtener el listado de plantas
            </div>
          </div>
        </div>
      </ng-template>
    </div>
    <br>

    <div class="row">
      <div class="col-md-8">
        <div class= 'card border-success'>
          <div class="card-body">
            <div style="height: 350px;" leaflet [leafletOptions]="options" [leafletLayers]="markers"
              (leafletMapReady)='onMapReady($event)'>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">

          <div class='plant-detail' *ngIf=selectedPlant>
            <div class= 'card border-success' style="height: 390px;">
              <div class="card-body">
                <h3><i class="fa fa-bolt"></i> {{selectedPlant.name}} </h3>

                <p class='h4'>País: {{selectedPlant.country}}</p>
                <p class='h4'>Ciudad: {{selectedPlant.city}}</p>
                <p class='h4'>Dirección: {{selectedPlant.address}}</p>
                <p class='h4'>Capacidad Instalada: {{selectedPlant.installedCapacity_kW}} kW</p>

                <button class="btn bg-yellow btn-flat" (click)="goToAsset(selectedPlant.id)">Ir a Planta</button>
              </div>

            </div>
          </div>

      </div>
    </div>
    <br>


  </div>
  <br>
