<div *ngIf="object" layoutDirection="column" class="fl-content fl-content-min-height">
  <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
    <div layoutDirection="column" appFlex="50" xsFlex="none">
      <p *ngIf="showOrder" class="fl-detail" i18n>
        Order:
        <a *ngIf="object.order; else noOrder" class="active-link"
           [routerLink]="config.getPanelUrl('orders/' + object.order)">
          {{object.order}}
        </a>
        <ng-template #noOrder>n/a</ng-template>
      </p>
      <p *ngIf="authSvc.feature('ui.billing.services.show-product-link') && !object.resources.disabled_features.includes('product-link')" class="fl-detail" i18n>
        Product:
        <a *ngIf="object.product; else noProduct" class="active-link"
           [routerLink]="config.getPanelUrl('billing/products/' + object.product.id)">
          {{object.product.name}} <span *ngIf="object.product.is_free">(free)</span>
        </a>
        <ng-template #noProduct>n/a</ng-template>
      </p>
      <div *ngIf="authSvc.feature('ui.billing.services.show-product-details')" class="fl-detail">
        <span i18n>Product</span>:
        <ul class="product-details">
          <li class="fl-margin-left" *ngIf="!object.product.is_free; else freeProduct"
              i18n>Name: {{object.product.name }}</li>
          <ng-template #freeProduct>
            <li class="fl-margin-left" i18n>Name: {{object.product.name }} (free)</li>
          </ng-template>
          <li class="fl-margin-left" i18n>Description: {{object.product.description }}</li>
          <li class="fl-margin-left" i18n>
            Payment: {{object.cycle?.display_name | nullValue}}
          </li>
          <li class="fl-margin-left" *ngIf="object.cycle?.setup_fee" i18n>
            Setup fee: {{object.cycle.setup_fee }}
          </li>
        </ul>
      </div>
      <p class="fl-detail">
        <a class="active-link"
           routerLink="{{config.getPanelUrl('billing/invoices')}}"
           [queryParams]="{filtering: 'items__service:' + object.id}" i18n>
          Related invoices
        </a>
      </p>
      <p class="fl-detail" i18n>
        Billing cycle: {{object.cycle?.display_name | nullValue}}
      </p>
      <p class="fl-detail" i18n>
        Currency: {{object.currency?.code | nullValue}}
      </p>
      <p class="fl-detail" i18n>
        Price overriden: {{object.price_override | yesNo}}
      </p>
      <p *ngIf="object.price_override" class="fl-detail" i18n>
        Override price: {{object.price_override_display}}
      </p>
      <p class="fl-detail" i18n>Created at: <app-date-displayer [date]="object.created_at" withTime></app-date-displayer></p>
      <p class="fl-detail" i18n>
        Next invoice date:
        <span *ngIf="object.next_invoice_date; else noNextInvoiceDate">
          <app-date-displayer [date]="object.next_invoice_date"></app-date-displayer>
        </span>
        <ng-template #noNextInvoiceDate>n/a</ng-template>
      </p>
      <ng-container *ngIf="!!object.cycle && object.paid_until && object.status !== 'pending'">
        <p class="fl-detail fl-bold" *ngIf="object.cycle.cycle !== 'onetime'; else oneTimeCycle" i18n>
          Paid until: <app-date-displayer [date]="object.paid_until"></app-date-displayer>
        </p>
        <ng-template #oneTimeCycle>
          <p class="fl-detail" i18n>
            Paid until: n/a
          </p>
        </ng-template>
      </ng-container>
      <p class="fl-detail fl-bold" *ngIf="object.override_suspend_until" i18n>
        Do not suspend until: <app-date-displayer [date]="object.override_suspend_until" withTime></app-date-displayer>
      </p>
      <p *ngIf="object.auto_terminate_date" class="fl-detail" i18n>
        Auto terminate date: <app-date-displayer [date]="object.auto_terminate_date" withTime></app-date-displayer>
      </p>
      <p class="fl-detail" *ngIf="['payment canceled', 'refunded'].indexOf(object.last_service_cycle_state) >= 0" i18n>
        Billing is disabled because last cycle state is {{ object.last_service_cycle_state }}
      </p>
      <p *ngIf="authSvc.feature('ui.billing.services.show-client')" class="fl-detail" i18n>
        Client:
        <a class="active-link"
           routerLink="{{config.getPanelUrl('clients-users/clients/' + object.client.id)}}">
          {{object.client.display}}
        </a>
      </p>
      <p class="fl-detail" i18n>Last update: <app-date-displayer [date]="object.updated_at" withTime></app-date-displayer></p>
      <p class="fl-detail" i18n
         *ngIf="object.renew_enabled !== null">Renew enabled: {{object.renew_enabled | yesNo}}</p>
      <p *ngIf="object.downgrade_order" class="fl-detail" i18n>
        Downgrade will be applied on <app-date-displayer [date]="object.current_service_cycle_end" withTime></app-date-displayer> according
        to order <a class="active-link" *ngIf="authSvc.feature('ui.staff'); else noOrderUrl"
                    [routerLink]="config.getPanelUrl('orders/' + object.downgrade_order)">#{{object.downgrade_order}}</a>
        <ng-template #noOrderUrl>#{{object.downgrade_order}}</ng-template>
      </p>
      <p class="fl-detail" *ngIf="!!object.cycle && object.current_price !== null"
         i18n>Price (without taxes): {{object.current_price | currencyFormatter: object.cycle.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}} <ng-container *ngIf="object.price_override">(overridden)</ng-container>
      </p>
      <p *ngIf="object.cancellation_request" class="fl-bold" i18n>Cancellation requested</p>
    </div>
    <div *ngIf="object.hosting_account" layoutDirection="column">
      <p class="fl-detail" i18n>
        Account: {{object.hosting_account.account_id}}
      </p>
      <p class="fl-detail" i18n>Username: {{object.hosting_account.username}}</p>
      <p class="fl-detail" i18n>
        Package: {{object.hosting_account.package_name}}
      </p>

      <mat-form-field>
        <mat-label i18n>Selected server</mat-label>
        <mat-select placeholder="Selected server" i18n-placeholder [(ngModel)]="object.hosting_account.server">
          <mat-option *ngFor="let server of object.hosting_account.available_servers" [value]="server.id">
            {{server.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <button mat-button color="primary" (click)="updateServer()"
              [disabled]="object.hosting_account.server === initialServerId" i18n>
        Update server
      </button>
    </div>
    <div *ngIf="object.resources?.product_type === 'openstack' && object.status !== 'pending'">
      <p class="fl-detail" i18n>Project name: {{object.resources.service_resources.name}}</p>
      <ng-container *ngIf="config.currentConfigurationName==='staff'">
        <p class="fl-detail" i18n>
          Project id:
          <a [routerLink]="[config.getPanelUrl('openstack/projects/'), object.resources.service_resources.id]"
             class="active-link">
            {{object.resources.service_resources.project_id}}
          </a>
        </p>
        <p class="fl-bold fl-detail"
           i18n>If pricing plan currency differs from OpenStack service currency, an automatic currency conversion will be applied.</p>
      </ng-container>
    </div>
  </div>
  <div *ngIf="authSvc.feature('ui.billing.services.show-notes') && object.notes" class="wrap-text-content">
    <p class="fl-detail" i18n>Notes: </p>
    <pre class="fl-detail break-spaces">{{object.notes}}</pre>
  </div>

  <h3 class="fl-detail fl-margin-top-medium" i18n>Configurable options</h3>
  <div *ngIf="object.configurable_options && object.configurable_options.length; else noOpts" layoutDirection="column">
    <table class="full-width" mat-table [dataSource]="object.configurable_options">
      <ng-container matColumnDef="option">
        <th mat-header-cell *matHeaderCellDef i18n>Option</th>
        <td mat-cell *matCellDef="let configurableOption">
          {{configurableOption.display || configurableOption.option}}
        </td>
      </ng-container>
      <ng-container matColumnDef="option_value">
        <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Option value</th>
        <td mat-cell *matCellDef="let configurableOption" class="hide-lt-md">
          {{configurableOption.option_value | nullValue}}
        </td>
      </ng-container>
      <ng-container matColumnDef="unit_price">
        <th mat-header-cell *matHeaderCellDef i18n>Unit price</th>
        <td mat-cell *matCellDef="let configurableOption">
          {{configurableOption.unit_price | currencyFormatter: object.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
        </td>
      </ng-container>
      <ng-container matColumnDef="price">
        <th mat-header-cell *matHeaderCellDef i18n>Price</th>
        <td mat-cell *matCellDef="let configurableOption">
          {{configurableOption.price | currencyFormatter: object.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
        </td>
      </ng-container>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    </table>
  </div>
  <ng-template #noOpts>
    <div class="fl-detail no-opts-message" i18n>No configurable options</div>
  </ng-template>

  <app-plugin-ui *ngIf="object.resources && object.resources.plugin_name"
                 [pluginName]="object.resources.plugin_name" [panelName]="config.currentConfigurationName"
                 componentName="ServiceDetails" [componentData]="object.resources">
  </app-plugin-ui>

  <div *ngIf="showUpgradeButtons" layoutDirection="row" layoutDirection-xs="column"
       appLayoutGap="10px" layoutAlign="center center" class="fl-margin-top">
    <button mat-button mat-raised-button color="primary"
            [routerLink]="[config.getPanelUrl('billing/services'), object.id, 'change']" i18n>
      Upgrade/downgrade or change billing cycle
    </button>
  </div>
</div>
