<app-form-errors #formErrors [formGroup]="orderForm"></app-form-errors>
<div *ngIf="cartItems" layoutDirection="column" class="fl-content fl-content-min-height">
  <div *ngIf="authSvc.feature('ui.staff') && cartItems?.client" class="fl-margin-bottom-medium">
    <span i18n>Order will be placed for client</span>:
    <br>
    <a class="active-link" [routerLink]="config.getPanelUrl('clients-users/clients/' + cartItems.client)">
      {{cartItems.client_data.long_name}}
    </a>
    <br>{{cartItems.client_data.address1}}<span *ngIf="cartItems.client_data.address2">, {{cartItems.client_data.address2}}</span>
    <br>{{cartItems.client_data.zip_code}}, {{cartItems.client_data.city}}, {{cartItems.client_data.country_name}}
  </div>
  <ng-container *ngIf="cartItems.items && cartItems.items.length; else noItems">
    <table mat-table [dataSource]="cartItems.items" class="full-width items-table">
      <ng-container matColumnDef="product">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let item" class="cart-items-padding">
          {{item.name}}<span *ngIf="item.domain_name"> - {{item.domain_name}}</span><span *ngIf="item.description"> - {{item.description}}</span>
          <ng-container *ngFor="let configOpt of item.configurable_options">
            <p class="fl-detail">
              {{configOpt.display}} ({{configOpt.price | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}})
            </p>
          </ng-container>
          <p *ngIf="item.setup_fees_total > 0" class="fl-detail" i18n>
            Setup fees {{item.setup_fees_total | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
          </p>
        </td>
      </ng-container>
      <ng-container matColumnDef="cycle">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let item" class="cart-items-padding">
          <ng-container *ngIf="!item.postpaid_product; else postpaidProduct">
            {{item.price_with_options | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
            <span class="lowercase-text">{{item.cycle_display}}</span>
            <span *ngIf="item.dynamic_usage_display">&nbsp;({{item.dynamic_usage_display}})</span>
          </ng-container>
          <ng-template #postpaidProduct>
            <div>
              {{item.price_with_options | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: null: config.locale}}
              <span i18n>charged today</span>
            </div>
            <div>
              {{item.recurring_price | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: null: config.locale}}
              <span class="lowercase-text">{{item.cycle_display}}</span>
              <span *ngIf="item.dynamic_usage_display">&nbsp;({{item.dynamic_usage_display}})</span>
            </div>
          </ng-template>
        </td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let item">
          <app-object-actions [objectActions]="cartItemActions[item.id]" [maxVisibleActions]="2"></app-object-actions>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let item; columns: displayedColumns;"></tr>
    </table>
    <div layoutDirection="row" layoutAlign="end center" appLayoutGap="5px" class="fl-margin-top">
      <div layoutDirection="column" layoutAlign="end">
        <div i18n><span>Sub total:</span> {{cartItems.subtotal | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</div>
        <div *ngIf="cartItems.setup_fees > 0" i18n><span>Setup fees:</span> {{cartItems.setup_fees | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</div>
        <div *ngFor="let tax of cartItems.taxes">
          <span>{{tax.tax_name}}:</span> {{tax.amount | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
        </div>
        <div i18n class="total-due"><span>Total due today:</span> {{cartItems.total | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</div>
        <div *ngIf="cartItems.items.length" class="fl-detail">
          <div *ngFor="let recurringPrice of getRecurringPrices() | keyvalue; let first=first" i18n>
            <mat-divider *ngIf="first" class="divider"></mat-divider>
            {{recurringPrice.key}} recurring: {{recurringPrice.value.price | currencyFormatter: cartItems.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}
            <span *ngIf="recurringPrice.value.has_dynamic_usage">(plus usage)</span>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="authSvc.feature('ui.staff')" class="fl-margin-top" layoutAlign="end end">
      <mat-checkbox color="primary" [(ngModel)]="acceptOrder" i18n>Accept order</mat-checkbox>
      <mat-checkbox color="primary" [(ngModel)]="generateInvoice" i18n>Generate invoice</mat-checkbox>
      <mat-checkbox color="primary" [(ngModel)]="sendEmail" i18n>Send email</mat-checkbox>
    </div>
  </ng-container>
  <ng-template #noItems>
    <div layoutDirection="column" layoutAlign="center center">
      <span i18n>No product has been selected yet</span>
      <ng-container *ngIf="authSvc.feature('ui.staff')">
        <a *ngIf="cartItems?.client" (click)="startOrderForAnotherClient()"
           class="active-link fl-margin-top" i18n>Delete cart and start order for another client</a>
        <a *ngIf="!cartItems?.client" (click)="startOrderForAnotherClient()"
           class="active-link fl-margin-top" i18n>Start order for a client</a>
      </ng-container>
    </div>
  </ng-template>
</div>
