<mat-card>
  <mat-card-header>
    <mat-card-title>Container Info</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    
    <mat-form-field style="margin-top: 3em; width: 100%;">
      <mat-label>Filter</mat-label>
      <input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
    </mat-form-field>

    <div *ngFor="let section of kvDatasources">
      <div style="margin-top: 3em;" *ngIf="section.datasource.filteredData.length > 0">
        <h3>{{section.name}}</h3>
        <table mat-table [dataSource]="section.datasource" class="mat-elevation-z8">

          <ng-container matColumnDef="k">
            <th mat-header-cell *matHeaderCellDef> Property </th>
            <td mat-cell *matCellDef="let element"> {{element.k}} </td>
          </ng-container>

          <ng-container matColumnDef="v">
            <th mat-header-cell *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let element"> {{element.v}} </td>
          </ng-container>

          <tr mat-row *matRowDef="let row; columns: displayedKVColumns;"></tr>

          <!-- Row shown when there is no matching data. -->
          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="2">No data matching the filter "{{input.value}}"</td>
          </tr>
        </table>
      </div>
    </div>


      <div style="margin-top: 3em;" *ngIf="moduleDatasource.filteredData.length > 0">
        <h3>Modules</h3>
        <table mat-table [dataSource]="moduleDatasource" class="mat-elevation-z8">

          <ng-container matColumnDef="group">
            <th mat-header-cell *matHeaderCellDef> Group </th>
            <td mat-cell *matCellDef="let element"> {{element.group}} </td>
          </ng-container>
    
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
    
          <ng-container matColumnDef="versions">
            <th mat-header-cell *matHeaderCellDef> Versions </th>
            <td mat-cell *matCellDef="let element"> {{element.versions}} </td>
          </ng-container>
    
          <ng-container matColumnDef="files">
            <th mat-header-cell *matHeaderCellDef> Files </th>
            <td mat-cell *matCellDef="let element"> {{element.files}} </td>
          </ng-container>
    
          <tr mat-header-row *matHeaderRowDef="displayedModuleColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedModuleColumns;"></tr>
    
          <!-- Row shown when there is no matching data. -->
          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
          </tr>
        </table>
      </div>

  </mat-card-content>
</mat-card>









<!--
<p>
    <input type="text" [(ngModel)]="infoFilter" placeholder="Filter..."/>
</p>

<ng-container *ngFor="let section of info">
    <mat-card *ngIf="(section.data|datafilter:infoFilter).length > 0">
        <mat-card-header>
            <mat-card-title>{{section.name}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <table style="table-layout: fixed;">
                <thead *ngIf="section.name == 'Modules'">
                    <tr>
                        <th>Group ID</th>
                        <th>Artifact ID</th>
                        <th>Version</th>
                        <th>POM</th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let r of section.data|datafilter:infoFilter">
                        <tr *ngIf="section.name != 'Modules'">
                            <th style="width: 25%;">{{r.k}}</th>
                            <td style="overflow-x: auto;"><pre style="margin: 0;">{{r.v}}</pre></td>
                        </tr>
                        <tr *ngIf="section.name == 'Modules'" ngClass="{'warning' : r.files.length > 1}">
                            <td>{{r.group}}</td>
                            <td>{{r.name}}</td>
                            <td class="text-monospace"><span *ngFor="let v of r.versions">{{v}}<br /></span></td>
                            <td class="text-monospace"><span *ngFor="let f of r.files">{{f}}<br /></span></td>
                        </tr>
                    </ng-container>
                </tbody>
            </table>
        </mat-card-content>

    </mat-card>
</ng-container>
-->