<div *ngIf="object && !object.pricing_rules.length" class="fl-detail fl-margin-top" i18n>
  No pricing rules.
</div>
<div layoutDirection="row" *ngIf="object && object.pricing_rules.length">
  <table mat-table [dataSource]="object.pricing_rules" class="full-width">
    <ng-container matColumnDef="display_name">
      <th mat-header-cell *matHeaderCellDef i18n>Name</th>
      <td mat-cell *matCellDef="let element">{{element.display_name}}</td>
    </ng-container>
    <ng-container matColumnDef="resource_name">
      <th mat-header-cell *matHeaderCellDef i18n>Resource</th>
      <td mat-cell *matCellDef="let element">{{element.resource_name}}</td>
    </ng-container>
    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef i18n>Price</th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.tiered_price.length === 1">
          <ng-container *ngIf="element.pricing_attribute; else noPricingAttr">
            <ng-container *ngIf="element.attribute_unit_display; else withoutUnitDisplay">
              <span i18n>
                {{element.pricing_attribute}}: {{element.price | currencyFormatter: object.currency: auth.currencyDisplayMode: config.current.settings.billing.currencyDecimalRepresentation: config.locale}} / {{element.attribute_unit_display}} / {{element.time_unit_display}}
              </span>
            </ng-container>
            <ng-template #withoutUnitDisplay>
              <span i18n>
                {{element.pricing_attribute}}: {{element.price | currencyFormatter: object.currency: auth.currencyDisplayMode: config.current.settings.billing.currencyDecimalRepresentation: config.locale}} / {{element.time_unit_display}}
              </span>
            </ng-template>
          </ng-container>
          <ng-template #noPricingAttr>
            <span i18n>
              {{element.price | currencyFormatter: object.currency: auth.currencyDisplayMode: config.current.settings.billing.currencyDecimalRepresentation: config.locale}} / {{element.time_unit_display}}
            </span>
          </ng-template>

        </ng-container>
        <ng-container *ngIf="element.tiered_price.length > 1"><span i18n>Tiered pricing</span></ng-container>
        <span *ngIf="element.modifiers_count === 1" i18n> + 1 modifier</span>
        <span *ngIf="element.modifiers_count > 1" i18n> + {{element.modifiers_count}} modifiers</span>
      </td>
    </ng-container>
    <ng-container matColumnDef="start_dt">
      <th class="hide-lt-md" mat-header-cell *matHeaderCellDef i18n>Start date</th>
      <td class="hide-lt-md" mat-cell *matCellDef="let element">
        <span *ngIf="element.resource_type !== 'internal';else internalResource">
          <span *ngIf="element.start_dt"><app-date-displayer [date]="element.start_dt"></app-date-displayer></span>
          <span *ngIf="!element.start_dt">&#8734;</span>
        </span>
        <ng-template #internalResource><span i18n>n/a</span></ng-template>
      </td>
    </ng-container>
    <ng-container matColumnDef="end_dt">
      <th class="hide-lt-md" mat-header-cell *matHeaderCellDef i18n>End date</th>
      <td class="hide-lt-md" mat-cell *matCellDef="let element">
        <span *ngIf="element.resource_type !== 'internal';else internalResource">
          <span *ngIf="element.end_dt"><app-date-displayer [date]="element.end_dt"></app-date-displayer></span>
          <span *ngIf="!element.end_dt">&#8734;</span>
        </span>
        <ng-template #internalResource><span i18n>n/a</span></ng-template>
      </td>
    </ng-container>
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef class="right-align" i18n>Actions</th>
      <td mat-cell *matCellDef="let element" class="right-align">
        <app-object-actions [objectActions]="priceRuleActions[element.id]" [maxVisibleActions]="maxVisibleActions">
        </app-object-actions>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>
