<div *ngIf="object" class="product-row-details">
  <div *ngIf="productRows.length" class="product-list" layoutDirection="column">
    <div class="product-row-header" layoutAlign="start center"
         layoutDirection="row">
      <div appFlex="0 0 200px" ltMdFlex="100" class="fl-ellipsis-text products-header-cell" i18n>Name</div>
      <div appFlex="0 0 200px" class="fl-ellipsis-text products-header-cell hide-lt-md" i18n>Description</div>
      <div appFlex="0 0 100px" class="fl-ellipsis-text products-header-cell hide-lt-md" i18n>Status</div>
      <div appFlex="0 0 150px" class="fl-ellipsis-text products-header-cell hide-lt-md" i18n>Code</div>
      <div appFlex="0 0 200px" class="fl-ellipsis-text products-header-cell hide-lt-md" i18n>Price model</div>
      <div layoutDirection="row">
        <div appFlex="auto">
        </div>
      </div>
    </div>
    <ng-container *ngFor="let productRow of productRows">
      <div class="product-row" layoutAlign="start center"
           layoutDirection="row">
        <div appFlex="0 0 200px" ltMdFlex="100" class="fl-ellipsis-text">
          <a [routerLink]="[config.getPanelUrl('billing/products'), productRow.product.id]">
            {{productRow.product.name}}
          </a>
        </div>
        <div appFlex="0 0 200px" class="fl-ellipsis-text hide-lt-md">
          <a [routerLink]="[config.getPanelUrl('billing/products'), productRow.product.id]">
            {{productRow.product.description || 'n/a'}}
          </a>
        </div>
        <div appFlex="0 0 100px" class="fl-ellipsis-text hide-lt-md">
          <a [routerLink]="[config.getPanelUrl('billing/products'), productRow.product.id]"
             class="text-capitalize">
            {{productRow.product.status}}
          </a>
        </div>
        <div appFlex="0 0 150px" class="fl-ellipsis-text hide-lt-md">
          <a [routerLink]="[config.getPanelUrl('billing/products'), productRow.product.id]">
            {{productRow.product.code}}
          </a>
        </div>
        <div appFlex="0 0 200px" class="fl-ellipsis-text hide-lt-md">
          <a [routerLink]="[config.getPanelUrl('billing/products'), productRow.product.id]">
            {{productRow.product.price_model_display}}
          </a>
        </div>
        <div layoutDirection="row" appFlex="100">
          <div appFlex="auto">
          </div>
          <div class="action-container-class" layoutAlign="end">
            <app-object-actions [objectActions]="productRow.actions" maxVisibleActions="2">
            </app-object-actions>
          </div>
        </div>
      </div>
    </ng-container>
  </div>
</div>
