<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <div class="fl-row" *ngIf="cloudSummaryKeys && cloudSummaryKeys.length; else noData">
    <div class="fl-col fl-margin-top-small" *ngFor="let key of cloudSummaryKeys">
      <h2 class="fl-heading-md fl-margin-top">{{cloudSummary[key].name}}</h2>
      <span class="fl-detail fl-margin-left-small" *ngIf="!cloudSummary[key].objects.length">&nbsp;-</span>
      <ul class="fl-margin-bottom-small">
        <ng-container *ngIf="cloudSummary[key].name === 'Instances'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/instances/">
              {{cloudObject.name}}
            </app-openstack-resource-link>
          </li>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'Database instances'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/database-instances/">
              {{cloudObject.name}}
            </app-openstack-resource-link>
          </li>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'SSH keys'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/ssh-keys/">
              {{cloudObject.name}}
            </app-openstack-resource-link>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'Volumes'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/volumes/">
              {{cloudObject.name || cloudObject.id}}
            </app-openstack-resource-link>
          </li>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'Networks'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/networks/">
              {{cloudObject.name}}
            </app-openstack-resource-link>
          </li>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'Routers'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/routers/">
              {{cloudObject.name || cloudObject.id}}
            </app-openstack-resource-link>
          </li>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'Images'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/images/">
              {{cloudObject.name || cloudObject.id}}
            </app-openstack-resource-link>
          </li>
        </ng-container>
        <ng-container *ngIf="cloudSummary[key].name === 'Ports'">
          <li *ngFor="let cloudObject of cloudSummary[key].objects"
              class="fl-list-element fl-margin-left">
            <app-openstack-resource-link [resourceId]="cloudObject.id" path="openstack/ports/">
              {{cloudObject.name || cloudObject.id}}
            </app-openstack-resource-link>
            <div>
              <ul>
                <li class="fl-list-element fl-margin-left" *ngFor="let fixed_ip of cloudObject.fixed_ips">
                  {{ fixed_ip.ip_address }}
                </li>
              </ul>
            </div>
          </li>
        </ng-container>
      </ul>
      <div class="fl-margin-bottom fl-margin-top"
           *ngIf="cloudSummary[key].count <= cloudSummary[key].load_count"></div>
      <app-openstack-resource-link [listButton]="true"
                                   [clientId]="object.id" [resourceType]="key" [projectId]="clientOsProjectId">
      </app-openstack-resource-link>
      <button class="fl-margin-top-small fl-margin-left-small" mat-button
              color="primary"
              [disabled]="disabledShowMoreButton[key] === true"
              *ngIf="cloudSummary[key].count > cloudSummary[key].load_count && !disabledShowMoreButton.hasOwnProperty(key)"
              (click)="showAll(key)" i18n>Show all</button>
    </div>
  </div>
  <ng-template #noData>
    <!-- if data could not be retrieved, show relevant error -->
    <div *ngIf="service; else noService" class="fl-detail" i18n>Service has no OpenStack project.</div>
    <ng-template #noService>
      <div class="fl-detail" i18n>No OpenStack service found.</div>
    </ng-template>
  </ng-template>
</div>
