<div class="fl-content fl-content-min-height">
  <div layoutDirection="row" layoutDirection-lt-md="column" *ngIf="object">
    <div layoutDirection="column" appFlex="50" ltMdFlex="100">
      <p class="fl-detail" i18n>Code: {{ object.code }}</p>
      <p class="fl-detail" i18n>Product type: {{ object.product_type }}</p>
      <p class="fl-detail" i18n>Price model: {{ object.price_model_display }}</p>
      <p class="fl-detail" i18n>Auto setup: {{ object.auto_setup_display }}</p>
      <p class="fl-detail" i18n>Taxable: {{ object.taxable | yesNo }}
      <p class="fl-detail" i18n>
        Group:
        <span title="{{ object.group.description }}">{{ object.group.name }}</span>
      </p>
    </div>
    <div layoutDirection="column" appFlex="50" ltMdFlex="100">
      <p class="fl-detail">Module:
        <span class="fl-block fl-detail fl-margin-left" i18n>Name: {{ object.module.name }}</span>
        <span class="fl-block fl-detail fl-margin-left" i18n>
          Path: {{ object.module.path }}
        </span>
      </p>
    </div>
  </div>
  <div>
    <div *ngIf="object?.billing_type !== 'onetime'; else oneTimePricing"
         class="fl-list-header fl-slightly-gray fl-margin-top" i18n>Current billing cycles</div>
    <ng-template #oneTimePricing>
      <div class="fl-list-header fl-slightly-gray fl-margin-top" i18n>Product pricing</div>
    </ng-template>
    <p class="fl-detail" *ngIf="!object?.cycles.length">
      <span *ngIf="object?.billing_type !== 'onetime'; else noPricingDefined"
            class="fl-red-color" i18n>This product has no billing cycles.</span>
      <ng-template #noPricingDefined>
        <span class="fl-red-color" i18n>This product has no pricing defined.</span>
      </ng-template>
      <span *ngIf="object?.billing_type !== 'onetime'; else atLeastOnePriceDef" class="fl-block" i18n>
        At least one billing cycle is required for end-users to be able to order the product.
      </span>
      <ng-template #atLeastOnePriceDef>
        <span class="fl-block" i18n>
          At least one price definition is required for end-users to be able to order the product.
        </span>
      </ng-template>
    </p>
    <table *ngIf="object && object.cycles && object.cycles.length" mat-table
           [dataSource]="object.cycles" class="full-width fl-margin-bottom">
      <ng-container matColumnDef="display_name" *ngIf="object?.billing_type !== 'onetime'">
        <th mat-header-cell *matHeaderCellDef i18n>Cycle</th>
        <td mat-cell *matCellDef="let element">
          <span class="fl-detail">{{element.display_name}}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="price_model" *ngIf="object?.price_model !== 'free'">
        <th mat-header-cell *matHeaderCellDef>{{priceHeading}}</th>
        <td mat-cell *matCellDef="let element">
          <span class="fl-detail">{{ element.fixed_price | currencyFormatter: element.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="setup_fee" *ngIf="object?.price_model !== 'free'">
        <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Setup fee</th>
        <td mat-cell *matCellDef="let element" class="hide-lt-md">
          <span class="fl-detail">{{ element.setup_fee | currencyFormatter: element.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="is_relative_price" *ngIf="object?.price_model !== 'free'">
        <th mat-header-cell *matHeaderCellDef class="hide-lt-md" i18n>Relative price</th>
        <td mat-cell *matCellDef="let element" class="hide-lt-md">
          <span class="fl-detail text-capitalize">{{ element.is_relative_price | yesNo }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef i18n>Status</th>
        <td mat-cell *matCellDef="let element">
          <span class="fl-detail text-capitalize">{{ element.status }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <app-object-actions [objectActions]="actions[element.id]" maxVisibleActions="2">
          </app-object-actions>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
</div>
