<div *ngIf="dynamicUsage" class="full-width" layoutDirection="row" layoutDirection-xs="column">
  <div appFlex="100" layoutDirection="column">
    <ng-container *ngIf="dynamicUsage.usage">
      <h1 class="fl-detail fl-content-min-height text-center"
          *ngIf="dynamicUsage?.usage?.usage_details?.length === 0" i18n>No usage details for this service cycle.</h1>
      <mat-accordion multi>
        <mat-expansion-panel *ngFor="let usage_details of dynamicUsage.usage.usage_details">
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{usage_details.resource_name | uppercase}}
            </mat-panel-title>
            <mat-panel-description>
              <span *ngIf="!isFree; else resourceTypeFree">{{usage_details.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
              <ng-template #resourceTypeFree>
                <s>{{usage_details.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s>&nbsp;{{'0' | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}
              </ng-template>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="full-width" *ngIf="usage_details.usage.length">
            <table [dataSource]="usage_details.usage" appFlex="100" mat-table multiTemplateDataRows>
              <ng-container matColumnDef="name">
                <th *matHeaderCellDef mat-header-cell><span class="fl-padding-left" i18n>Name</span></th>
                <td *matCellDef="let usage" class="fl-detail position-relative"
                    [class.remove-border]="usage !== expandedElement" mat-cell>
                  <div layoutDirection="column">
                    <span class="fl-padding-left">{{usage.display_name}}</span>
                    <span class="fl-padding-left fl-detail resource-id-display">{{usage.resource_id}}</span>
                  </div>
                  <mat-icon class="expand-arrow" [class.expand-arrow-up]="usage === expandedElement">
                    chevron_right
                  </mat-icon>
                </td>
              </ng-container>

              <ng-container matColumnDef="region">
                <th *matHeaderCellDef mat-header-cell i18n>Region</th>
                <td *matCellDef="let usage" class="fl-detail"
                    [class.remove-border]="usage !== expandedElement" mat-cell>{{usage.region}}</td>
              </ng-container>

              <ng-container matColumnDef="price">
                <th *matHeaderCellDef mat-header-cell><p class="price-cell" i18n>Price</p></th>
                <td *matCellDef="let usage" class="fl-detail"
                    [class.remove-border]="usage !== expandedElement" mat-cell>
                  <p class="fl-detail price-cell">
                    <span *ngIf="!isFree; else resourceEntryPrice">{{usage.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
                    <ng-template #resourceEntryPrice>
                      <s>{{usage.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s>
                    </ng-template>
                  </p>
                </td>
              </ng-container>

              <ng-container matColumnDef="expandedDetail">
                <td *matCellDef="let usage" [colSpan]="detailColumns.length" mat-cell>
                  <div [@detailExpand]="usage === expandedElement ? 'expanded' : 'collapsed'"
                       class="element-detail">
                    <div layoutDirection="column">
                      <p class="fl-detail" i18n>Usage history:</p>
                      <div *ngFor="let history of usage.history">
                        <p class="fl-detail">
                          <span *ngIf="history.price_details.attribute_unit_display && history.price_details?.timespan; else existenceDisplay">
                            {{history.name || history.rule_display}} - {{history.price_details.quantity}} {{history.price_details.attribute_unit_display}} x {{history.price_details.timespan}}
                          </span>
                          <ng-template #existenceDisplay>
                            <span *ngIf="history.price_details?.timespan; else fallbackDisplay">
                              <ng-container *ngIf="history.price_details?.display_quantity; else onlyTimespan">
                                <!-- quantity also matters in calculating price, show it -->
                                {{history.name || history.rule_display}} - {{history.price_details.quantity}} x {{history.price_details.timespan}}
                              </ng-container>
                              <ng-template #onlyTimespan>
                                {{history.name || history.rule_display}} - {{history.price_details.timespan}}
                              </ng-template>
                            </span>
                            <ng-template #fallbackDisplay>
                              <!-- fallback for when timespan was not available -->
                              {{history.name || history.rule_display}} - {{history.price_details.units}} {{history.price_details.unit_display}}
                            </ng-template>
                          </ng-template>
                          <span *ngIf="!isFree; else freeHistoryPrice">({{history.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}})</span>
                          <ng-template #freeHistoryPrice>
                            <s>({{history.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}})</s>
                          </ng-template>
                        </p>
                        <div *ngFor="let modifier of history.modifiers_summary" class="indent">
                          <p class="fl-detail">
                            <span *ngIf="modifier.price_details.attribute_unit_display && modifier.price_details?.timespan; else existenceDisplay">
                              {{modifier.name}} - {{modifier.price_details.quantity}} {{modifier.price_details.attribute_unit_display}} x {{modifier.price_details?.timespan}}
                            </span>
                            <ng-template #existenceDisplay>
                              <span *ngIf="modifier.price_details?.timespan; else fallbackDisplay">
                                {{modifier.name}} - {{modifier.price_details.timespan}}
                              </span>
                              <ng-template #fallbackDisplay>
                                <!-- fallback for when timespan was not available -->
                                {{modifier.name}} - {{modifier.price_details.units}} {{modifier.price_details.unit_display}}
                              </ng-template>
                            </ng-template>

                            <span *ngIf="!isFree; else freeModifierPrice">({{modifier.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale : 'exceptZero'}})</span>
                            <ng-template #freeModifierPrice>
                              <s>({{modifier.price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale: 'exceptZero'}})</s>
                            </ng-template>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </ng-container>

              <tr *matHeaderRowDef="detailColumns" mat-header-row></tr>
              <tr mat-row (click)="expandedElement = expandedElement === usage ? null : usage"
                  *matRowDef="let usage; columns: detailColumns;" class="resource-row">
              </tr>
              <tr *matRowDef="let row; columns: ['expandedDetail']" class="details-row" mat-row></tr>
            </table>
          </div>
          <div class="full-width" *ngIf="!usage_details.usage.length">
            <p class="fl-detail" i18n>n/a</p>
          </div>

          <p class="fl-detail total-inside-expansion fl-margin-top-medium">
            <span i18n>Total {{usage_details.resource_name}} price:
              <span *ngIf="!isFree; else resourceTotalFree">{{usage_details.price| currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
              <ng-template #resourceTotalFree>
                <s>{{usage_details.price| currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s>
              </ng-template>
            </span>
          </p>
        </mat-expansion-panel>

        <mat-expansion-panel *ngIf="dynamicUsage && dynamicUsage.usage && dynamicUsage.usage.currency">
          <!-- Metrics content-->
          <mat-expansion-panel-header>
            <mat-panel-title class="uppercase" i18n>Metrics</mat-panel-title>
            <mat-panel-description>
              <span *ngIf="!isFree; else metricsFree">{{dynamicUsage.usage.metrics_total_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
              <ng-template #metricsFree>
                <s>{{dynamicUsage.usage.metrics_total_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s>&nbsp;{{'0' | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}
              </ng-template>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <p class="fl-detail" *ngIf="allowMetricDetails && dynamicUsage.usage.metrics_details_summary.length" i18n>
            Click on a row to show more details.
          </p>
          <p class="fl-detail" *ngIf="!dynamicUsage.usage.metrics_details_summary.length">n/a</p>
          <div class="full-width" *ngIf="dynamicUsage.usage.metrics_details_summary &&
          dynamicUsage.usage.metrics_details_summary.length">
            <table [dataSource]="dynamicUsage.usage.metrics_details_summary"
                   class="full-width" mat-table multiTemplateDataRows>
              <ng-container matColumnDef="name">
                <th *matHeaderCellDef mat-header-cell i18n>Name</th>
                <td *matCellDef="let metric" class="fl-detail" mat-cell>
                  {{metric.name}}
                </td>
              </ng-container>

              <ng-container matColumnDef="region">
                <th *matHeaderCellDef mat-header-cell i18n>Region</th>
                <td *matCellDef="let metric" class="fl-detail" mat-cell>{{metric.region}}</td>
              </ng-container>

              <ng-container matColumnDef="price">
                <th *matHeaderCellDef mat-header-cell><p class="price-cell" i18n>Price</p></th>
                <td *matCellDef="let metric" class="fl-detail" mat-cell>
                  <p class="fl-detail price-cell">
                    <span *ngIf="!isFree; else metricEntryFree">{{metric.price  | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
                    <ng-template #metricEntryFree>
                      <s>{{metric.price  | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s>
                    </ng-template>
                  </p>
                </td>
              </ng-container>
              <tr *matHeaderRowDef="metricsDetailColumns" mat-header-row></tr>
              <ng-container *ngIf="allowMetricDetails; else withoutMetricDetails">
                <tr mat-row (click)="showMetricDetail(metric.name)"
                    *matRowDef="let metric; columns: metricsDetailColumns;">
                </tr>
              </ng-container>
              <ng-template #withoutMetricDetails>
                <tr mat-row *matRowDef="let metric; columns: metricsDetailColumns;">
                </tr>
              </ng-template>
            </table>
          </div>
          <p class="fl-detail total fl-margin-top-medium">
            <span i18n>Total metrics price:
              <span *ngIf="!isFree; else freeMetricsTotal">{{dynamicUsage.usage.metrics_total_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
              <ng-template #freeMetricsTotal>
                <s>{{dynamicUsage.usage.metrics_total_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s>
              </ng-template>
            </span>
          </p>
        </mat-expansion-panel>
      </mat-accordion>
    </ng-container>
    <div *ngIf="dynamicUsage && dynamicUsage.usage && dynamicUsage.usage.currency" class="full-width">
      <p class="total fl-margin-top" i18n>
        Total price: <span *ngIf="!dynamicUsage.price_override; else totalOverride">{{dynamicUsage.total_cycle_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</span>
        <ng-template #totalOverride>
          <s>{{dynamicUsage.standard_cycle_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}</s> {{dynamicUsage.total_cycle_price | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}
        </ng-template>
      </p>
    </div>
  </div>
</div>

