<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)"
                    *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>
    <ng-container *ngIf="dynamicUsage && dynamicUsage.usage && dynamicUsage.usage.currency">
      <div *ngIf="dynamicUsage.price_taxes" class="full-width">
        <p class="taxes" i18n>
          <ng-container *ngFor="let tax of dynamicUsage.price_taxes">
            <br/>
            <span *ngIf="!dynamicUsage.price_override; else taxOverride">{{tax.name}} ({{ tax.percent }}%): {{ tax.amount | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</span>
            <ng-template #taxOverride>
              <span *ngIf="getStandardTax(tax)">{{tax.name}} ({{ tax.percent }}%): <s>{{ getStandardTax(tax).amount | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</s> {{ tax.amount | currencyFormatter: dynamicUsage.usage.currency.code: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale }}</span>
            </ng-template>
          </ng-container>
        </p>
      </div>
      <div class="full-width">
        <p class="total" [ngClass]="{'fl-margin-top': !dynamicUsage.price_taxes || dynamicUsage.price_taxes.length === 0}" 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>
    </ng-container>
  </div>
</div>

