<app-layout>
  <mat-toolbar class="page-header" role="heading">
    <h1>Service {{service.serviceName}} {{service.version}}</h1>
  </mat-toolbar>
  <div class="tabs-wrapper">
    <mat-card>
      <mat-card-content>
        <mat-tab-group mat-align-tabs="start">
          <mat-tab label="Apis ({{service.apis().length}})">
            <app-swagger-ui [schema]="service.schemas[0].schemaObj"></app-swagger-ui>
          </mat-tab>
          <mat-tab label="Kie Conf(2)">chassis.longwaiting=1 <br/>
            mesher.retry=2
          </mat-tab>
          <mat-tab label="Instances ({{service.instances.length}})">
            <app-instances-table [instancesTableData$]="instances$"></app-instances-table>
          </mat-tab>
          <mat-tab label="Consumers ({{service.consumers.length}})">
            <app-services-table [servicesTableData$]="consumers$"></app-services-table>
          </mat-tab>
          <mat-tab label="Providers ({{service.providers.length}})">
            <app-services-table [servicesTableData$]="providers$"></app-services-table>
          </mat-tab>
        </mat-tab-group>
      </mat-card-content>
    </mat-card>
  </div>
  <app-footer></app-footer>
</app-layout>