<div class="fl-content fl-content-min-height">
  <h2 class="fl-heading-md" i18n>Info</h2>
  <div layoutDirection="row">
    <div appFlex="50">
      <p i18n>ID: {{object.id}}</p>
      <p i18n>Name: {{object.name}}</p>
      <ng-container *ngIf="authSvc.feature('ui.staff'); else enduser">
        <p *ngIf="object.client" i18n>Client:
          <a class="active-link" [routerLink]="[config.getPanelUrl('clients-users/clients'), object.client.id]">
            {{object.client.display}}
          </a>
        </p>
      </ng-container>
      <ng-template #enduser>
        <p *ngIf="object.client && authSvc.feature('clients&users.clients')" i18n>Client:
          <a class="active-link" [routerLink]="[config.getPanelUrl('clients'), object.client.id]">
            {{object.client.display}}
          </a>
        </p>
      </ng-template>
      <p *ngIf="object.project && authSvc.feature('ui.staff')" i18n>Project:
        <a class="active-link" [routerLink]="[config.getPanelUrl('openstack/projects'), object.project.id]">
          {{object.project.project_id}}
        </a>
      </p>
      <p i18n>Status: {{object.status}}</p>
      <p i18n>Operating status: {{object.operating_status | nullValue}}</p>
      <p i18n>Region: {{object.region}}</p>
      <p *ngIf="object.availability_zone && authSvc.feature('openstack.dbaas.availability_zones')"
         i18n>Availability zone: {{object.availability_zone}}</p>
      <p *ngIf="object.datastore && object.datastore.type && object.datastore.version" i18n>
        Datastore: {{object.datastore.type}} {{object.datastore.version}}
      </p>
      <p *ngIf="object.server_id" i18n>Server:
        <a class="active-link" [routerLink]="[config.getPanelUrl('openstack/instances'), object.server_id]">
          {{object.server_id}}
        </a>
      </p>
      <p *ngIf="object.replica_of" i18n>Replica of:
        <a class="active-link" [routerLink]="[config.getPanelUrl('openstack/database-instances'), object.replica_of.id]">
          {{object.replica_of.name || object.replica_of.id}}
        </a>
      </p>
      <p *ngIf="object?.fault?.message" class="fl-red-color" i18n>Latest fault: {{object.fault.message}}</p>
    </div>
    <div appFlex="50">
      <div *ngIf="object.flavor">
        <p *ngIf="authSvc.feature('ui.enduser'); else staffFlavor" i18n>Flavor: {{object.flavor.name}}</p>
        <ng-template #staffFlavor>
          <p i18n>Flavor:
            <a class="active-link" [routerLink]="[config.getPanelUrl('openstack/flavors'), object.flavor.id]">
              {{object.flavor.name}}
            </a>
          </p>
        </ng-template>
      </div>
      <p *ngIf="object.volume_id" i18n>Volume:
        <a class="active-link" [routerLink]="[config.getPanelUrl('openstack/volumes'), object.volume_id]">
          {{object.volume_id}}
        </a>
      </p>
      <p *ngIf="object.volume?.size" i18n>Volume size: {{object.volume.size}} GB</p>
      <p *ngIf="object.volume?.used" i18n>Volume used: {{object.volume.used}} GB</p>
      <p *ngIf="object.volume?.type" i18n>Volume type: {{object.volume.type}}</p>
      <p *ngIf="object.locality" i18n>Locality: {{object.locality}}</p>
      <p *ngIf="object.locality" i18n>Locality: {{object.locality}}</p>
      <p i18n>Created: <app-date-displayer [date]="object.created" withTime></app-date-displayer></p>
      <p i18n>Updated: <app-date-displayer [date]="object.updated" withTime></app-date-displayer></p>
      <p i18n>Service status updated: <app-date-displayer [date]="object.service_status_updated" withTime></app-date-displayer></p>
    </div>
  </div>
  <div layoutDirection="row" layoutDirection-lt-sm="column" *ngIf="object.status !== 'ERROR'">
    <div appFlex="50">
      <h2 class="fl-heading-md" i18n>Networking</h2>
      <p *ngIf="!object?.addresses?.length" i18n>n/a</p>
      <ng-container *ngIf="object?.addresses?.length && authSvc.feature('ui.staff')">
        <p *ngIf="object.addresses[0]?.network" i18n>Network:
          <a class="active-link" [routerLink]="[config.getPanelUrl('openstack/networks'), object.addresses[0].network]">
            {{object.addresses[0].network}}
          </a>
        </p>
      </ng-container>
      <ng-container *ngIf="object?.addresses?.length">
        <ng-container *ngFor="let address of object.addresses">
          <p i18n>{{address.address}}, type: {{address.type}}</p>
        </ng-container>
      </ng-container>
      <p *ngIf="object?.datastore?.type === 'mysql' && object?.addresses?.length" i18n>
        Connection examples:<br>
        <span>mysql -h {{object.addresses[0].address}} -u USERNAME -p</span><br>
        <span>mysql://USERNAME:PASSWORD&#64;{{object.addresses[0].address}}:3306/DATABASE</span>
      </p>
    </div>
    <div appFlex="50">
      <h2 class="fl-heading-md" i18n>Access</h2>
      <p i18n>Is public: {{object.access?.is_public | yesNo}}</p>
      <p *ngIf="object.access?.allowed_cidrs?.length; else undefinedAllowedCidrs" i18n>Allowed CIDRs:
        <span *ngFor="let address of object.access.allowed_cidrs; let last=last">
          {{address}}<span *ngIf="!last">, </span>
        </span>
      </p>
      <ng-template #undefinedAllowedCidrs>
        <p i18n>Allowed CIDRs: 0.0.0.0/0</p>
      </ng-template>
    </div>
  </div>
  <div layoutDirection="row" layoutDirection-lt-sm="column"
       *ngIf="object.replicas && object.replicas.length">
    <div appFlex="50">
      <h2 class="fl-heading-md" i18n>Replicas</h2>
      <div *ngFor="let replica of object.replicas">
        <span>
          <a [routerLink]="config.getPanelUrl('openstack/database-instances/' + replica.id)" class="active-link">
            {{replica.name || replica.id}}
          </a>
        </span>
      </div>
    </div>
    <div appFlex="50"></div>
  </div>
</div>
