<div layoutDirection="row" layoutDirection-xs="column" class="fl-content fl-content-min-height">
  <div layoutDirection="column" *ngIf="object" class="fl-margin-bottom" appFlex="50">
    <p class="fl-detail" i18n>ID: {{object.flavor_id}}</p>
    <p class="fl-detail" i18n>Name: {{object.name}}</p>
    <p class="fl-detail" i18n>Ram: {{ramDisplay}}</p>
    <p class="fl-detail" i18n>Virtual CPUs: {{object.vcpus}}</p>
    <p class="fl-detail" i18n>Disk space: {{object.root_gb}} GB</p>
    <p class="fl-detail" i18n>Swap: {{swapDisplay}}</p>
    <p class="fl-detail" i18n>Ephemeral storage: {{object.ephemeral_gb}} GB</p>
    <p class="fl-detail" i18n>Disabled: {{object.disabled}}</p>
    <p class="fl-detail" i18n>Public: {{object.is_public}}</p>
    <ng-container *ngIf="!object.is_public && object.access.length">
      <p class="fl-detail" i18n>Allowed projects:</p>
      <a *ngFor="let flavor_access of object.access"
         [routerLink]="config.getPanelUrl('/openstack/projects/' + flavor_access.project.id)"
         class="fl-detail active-link fl-indent">{{flavor_access.project.name}} ({{flavor_access.project.project_id}})</a>
    </ng-container>
    <p class="fl-detail" i18n>Region: {{object.region}}</p>
    <p class="fl-detail" i18n>Description: {{object.description}}</p>
    <p class="fl-detail" i18n>Group: {{object.flavor_group?.name | nullValue}}</p>
    <div *ngIf="showToggles()" layoutDirection="column">
      <mat-slide-toggle color="primary" [(ngModel)]="object.show_for_end_user"
                        (ngModelChange)="updateFlavor()" i18n>Show in enduser panel</mat-slide-toggle>
      <mat-slide-toggle color="primary" [(ngModel)]="object.use_for_dbaas" class="fl-margin-top"
                        [class.hide]="!authSvc.feature('openstack.dbaas')"
                        (ngModelChange)="updateFlavor()" i18n>Use for database instances</mat-slide-toggle>
      <mat-slide-toggle color="primary" [(ngModel)]="object.out_of_stock" class="fl-margin-top"
                        (ngModelChange)="updateFlavor()" i18n>Is out of stock</mat-slide-toggle>
    </div>
  </div>
  <div appFlex="50">
    <p class="fl-detail fl-bold" i18n>Properties:</p>
    <p *ngFor="let property of properties | keyvalue" class="fl-detail">{{property.key}}: {{property.value}}</p>
    <p *ngIf="Object.keys(properties).length === 0" class="fl-detail" i18n>n/a</p>
  </div>
</div>
