<div class="fl-content fl-content-min-height">
  <div class="fl-heading-md fl-gray-color" *ngIf="openstackServices && !openstackServices.length" i18n>
    No OpenStack service exists for this client
  </div>
  <app-fl-backdrop *ngIf="!openstackServices" overlayParent></app-fl-backdrop>
  <div *ngIf="openstackServices" layoutDirection="column">
    <div *ngFor="let service of openstackServices">
      <p class="fl-detail" i18n>Service status: {{service.status}}</p>
      <p class="fl-detail" i18n>Product name: {{service.product.name}}</p>
      <p class="fl-detail" i18n>Is free: {{service.product.is_free | yesNo}}</p>
      <p class="fl-detail" i18n>Product cycle: {{service.cycle?.display_name | nullValue}}</p>
      <p class="fl-detail" i18n>
        Price overriden: {{service.price_override | yesNo}}
      </p>
      <p *ngIf="service.price_override" class="fl-detail" i18n>
        Override price: {{service.price_override_display}}
      </p>
      <ng-container *ngIf="service.pricing_plan">
        <p class="fl-detail" i18n>Pricing plan: {{service.pricing_plan.name}}</p>
      </ng-container>
      <p class="fl-detail" i18n>Service:
        <a class="active-link"
           [routerLink]="[config.getPanelUrl('billing/services'), service.id]">
          {{service.id}}
        </a>
      </p>
      <div *ngIf="service.status !== 'terminated' && openstackProjects && openstackProjects.hasOwnProperty(service.id)">
        <p class="fl-detail"
           *ngIf="openstackProjects[service.id].project_id && openstackProjects[service.id].name" i18n>Project:
          <app-openstack-resource-link
            *ngIf="config.authService.feature('ui.openstack.service.select-project'); else noLink"
            [resourceId]="openstackProjects[service.id].project_id"
            path="openstack/projects">
            {{openstackProjects[service.id].name}}
          </app-openstack-resource-link>
          <ng-template #noLink>
            {{openstackProjects[service.id].name}}
          </ng-template>
        </p>
        <p class="fl-detail" *ngIf="openstackProjects[service.id].project_domain_id"
           i18n>Project domain ID: {{openstackProjects[service.id].project_domain_id}}</p>
      </div>
      <ng-container *ngIf="service.status !== 'terminated' && service.status !== 'pending'">
        <p class="fl-bold fl-detail" i18n>If pricing plan currency differs from OpenStack service currency, an automatic currency conversion will be applied.</p>
        <div class="fl-margin-bottom" layoutDirection="row">
          <button mat-button color="primary" (click)="changePricingPlan(service)" i18n>
            Change pricing plan
          </button>
          <button mat-button color="primary" (click)="terminateService(service)" i18n>Terminate service</button>
        </div>
      </ng-container>
    </div>
    <div layoutDirection="row" class="fl-margin-top-medium" *ngIf="!this.hasServiceWithProject">
      <button mat-button color="primary" (click)="createOpenstackService()" i18n>Create OpenStack service</button>
    </div>
  </div>
</div>
