<div class="fl-content fl-content-min-height fl-detail">
  <app-fl-backdrop *ngIf="loadingServices === true" overlayParent></app-fl-backdrop>
  <p *ngIf="needsSync" class="fl-red-color" i18n>No services found for at least one region, run "fleio sync --regions" to resync regions and services</p>
  <mat-accordion displayMode="flat" *ngIf="servicesVersions">
    <mat-expansion-panel *ngFor="let regionServices of servicesVersions"
                         class="field-group-panel">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <ng-container *ngIf="regionServices.supported">
            <i [attr.fl-tooltip]="compatibleTxt" fl-tooltip-direction="left"
               class="material-icons fl-green-color">
              check
            </i>
          </ng-container>
          <ng-container *ngIf="!regionServices.supported">
            <i [attr.fl-tooltip]="notCompatibleTxt" fl-tooltip-direction="left"
               class="material-icons fl-red-color">
              priority_high
            </i>
          </ng-container>
          <p class="fl-margin-left-small service-panel-title"
             i18n>{{regionServices.region}} - found {{regionServices.found_services_count}} of {{regionServices.total_services_count}} services. <span *ngIf="regionServices.supported">No unsupported services found.</span>
            <span *ngIf="!regionServices.supported">Some found services are not supported.</span>
          </p>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <table class="fl-table fl-smaller-rows-table">
        <thead>
        <th>Service</th>
        <th class="text-center" i18n>Found version</th>
        <th class="text-center hide-xs" i18n>Minimum recommended version</th>
        <th class="text-center hide-xs" i18n>Maximum recommended version</th>
        <th class="right-align" i18n>Recommended</th>
        </thead>
        <tbody>
        <tr *ngFor="let service of regionServices.api_versions | keyvalue">
          <td>{{ service.key }}</td>
          <td class="text-center">
            {{ service.value.version ? service.value.version : "-"}}
          </td>
          <td class="text-center hide-xs">{{ service.value.min_version }}</td>
          <td class="text-center hide-xs">{{ service.value.max_version }}</td>
          <td *ngIf="!service.value.version" class="right-align no-overflow-hidden">
            <i [attr.fl-tooltip]="needServiceTxt" fl-tooltip-direction="left"
               class="material-icons fl-red-color">
              priority_high
            </i>
          </td>
          <td class="right-align no-overflow-hidden"
              *ngIf="service.value.supported && service.value.version">
            <i [attr.fl-tooltip]="compatibleTxt" fl-tooltip-direction="left"
               class="material-icons fl-green-color">
              check
            </i>
          </td>
          <td class="right-align no-overflow-hidden"
              *ngIf="!service.value.supported && service.value.version">
            <i [attr.fl-tooltip]="notCompatibleTxt" fl-tooltip-direction="left"
               class="material-icons fl-red-color">
              priority_high
            </i>
          </td>
        </tr>
        </tbody>
      </table>
    </mat-expansion-panel>
  </mat-accordion>
  <p i18n>
    For supported OpenStack releases of your installation see
    <a class="active-link" target="_blank"
       href="https://fleio.com/docs/installing/requirements.html#openstack-supported-versions">
      https://fleio.com/docs/installing/requirements.html#openstack-supported-versions</a>.
  </p>
</div>
