<div class="align-container">
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Status de Plantas
      </mat-panel-title>
    </mat-expansion-panel-header>

    <div class="container-fluid">
      <div class="row">
        <div *ngFor="let item of listData; index as i;" class="col-lg-3 col-md-4 col-sm-6">
          <div [ngClass]="item.state == true ? 'card border-success': 'card border-danger'">
            <div class="card-body">
              <h5 class="card-title">{{item.name}}</h5>
              <h6 class="card-subtitle mb-2 text-muted">{{item.city}}, {{item.country}}</h6>
              <div class="card-text">
                Status:
                <div *ngIf="item.state; then thenBlock else elseBlock"></div>
                <ng-template #thenBlock><span class="badge badge-pill badge-success">&nbsp;</span></ng-template>
                <ng-template #elseBlock><span class="badge badge-pill badge-danger">&nbsp;</span></ng-template>
              </div>
              <br>
              <p class="card-text">
                Capacidad instalada: <b>{{item.installedCapacity}} kw</b>
                <br>
                Fecha instalación: <b>{{item.installDate}}</b>
              </p>
              <a href="#" class="btn btn-sm btn-primary float-right">Ir a planta</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </mat-expansion-panel>
</div>
<br>
