<div class="fl-table-wrapper fl-content-min-height report-container">
  <p class="fl-detail fl-margin-bottom indent-content" i18n>
    Report shows compute instances that are currently in active state broken down by region and flavor.
    The region line shows total of all flavors in the respective region.
    The revenue calculation assumes that all and only current instances will be active for a full month.
    This report ignores discounts defined on services.
    Report generation may take several minutes, depending on your database size.
  </p>
  <mat-progress-spinner [diameter]="80" *ngIf="loading" class="center-object fl-margin-top-medium"
                        [mode]="'indeterminate'"></mat-progress-spinner>
  <div class="fl-detail fl-margin-top-medium text-center" *ngIf="loading" i18n>
    <span>Report generation may take several minutes, depending on your database size.<br></span>
    <span *ngIf="loadingRegionName">
      Processing region <strong>{{loadingRegionName}}</strong> ({{loadingRegionReports}} of {{regionNames.length}} regions) ...
    </span>
  </div>
  <ng-container *ngIf="report && !loading">
    <mat-checkbox class="fl-margin-bottom indent-content" color="primary"
                  [(ngModel)]="hideZeroInstancesFlavors"
                  i18n>Hide flavors with no instances</mat-checkbox>

    <div>
      <table *ngIf="report" class="fl-table fl-grid fl-smaller-rows-table mat-elevation-z2 fl-margin-bottom" id="report-table">
        <thead>
          <tr class="report-headers">
            <th></th>
            <th><span i18n>Instance count</span> <app-icon class="info-elem" [icon]="instanceCountIcon"></app-icon></th>
            <th><span i18n>Base revenue</span> <app-icon class="info-elem" [icon]="baseRevenueHeaderIcon"></app-icon></th>
            <th><span i18n>Extras revenue</span> <app-icon class="info-elem" [icon]="extrasRevenueHeaderIcon"></app-icon></th>
            <th><span i18n>Total revenue</span> <app-icon class="info-elem" [icon]="totalRevenueHeaderIcon"></app-icon></th>
          </tr>
        </thead>

        <tbody>
          <ng-container *ngFor="let regionName of regionNames">
            <tr class="region-row">
              <td>
                <span class="fl-bold fl-ellipsis-text fl-margin-left-medium">{{ regionName }}</span>
              </td>
              <td>
                <span class="fl-bold">{{ report.per_region_report[regionName].instance_count }}</span>
              </td>
              <td>
                <span class="fl-bold">
                  {{ report.per_region_report[regionName].base_revenue | currencyFormatter: report.per_region_report[regionName].base_revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
                </span>
              </td>
              <td>
                <span class="fl-bold">
                  {{ report.per_region_report[regionName].extras_revenue | currencyFormatter: report.per_region_report[regionName].base_revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
                </span>
              </td>
              <td>
                <span class="fl-bold">
                  {{ report.per_region_report[regionName].total_revenue | currencyFormatter: report.per_region_report[regionName].base_revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
                </span>
              </td>
            </tr>
            <ng-container *ngIf="report.per_region_report[regionName].flavor_names?.length">
              <ng-container *ngFor="let flavorName of report.per_region_report[regionName].flavor_names">
                <tr *ngIf="hideZeroInstancesFlavors ? report.per_region_report[regionName].per_flavor_report[flavorName].instance_count !== 0 : true"
                    class="flavor-row">
                  <td><div class="fl-ellipsis-text fl-margin-left">{{ flavorName }}</div></td>
                  <td>{{ report.per_region_report[regionName].per_flavor_report[flavorName].instance_count }}</td>
                  <td>
                    {{ report.per_region_report[regionName].per_flavor_report[flavorName].base_revenue | currencyFormatter: report.per_region_report[regionName].per_flavor_report[flavorName].base_revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
                  </td>
                  <td>
                    {{ report.per_region_report[regionName].per_flavor_report[flavorName].extras_revenue | currencyFormatter: report.per_region_report[regionName].per_flavor_report[flavorName].base_revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
                  </td>
                  <td>
                    {{ report.per_region_report[regionName].per_flavor_report[flavorName].total_revenue | currencyFormatter: report.per_region_report[regionName].per_flavor_report[flavorName].base_revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
                  </td>
                </tr>
              </ng-container>
            </ng-container>
          </ng-container>
          <tr class="totals-row">
            <td>
              <span class="fl-bold fl-margin-left-medium" i18n>TOTAL</span>
            </td>
            <td>
              <span class="fl-bold">{{ report.total_instances }}</span>
            </td>
            <td>
              <span class="fl-bold">{{ report.total_base_revenue | currencyFormatter: report.revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</span>
            </td>
            <td>
              <span class="fl-bold">{{ report.total_extras_revenue | currencyFormatter: report.revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</span>
            </td>
            <td>
              <span class="fl-bold">{{ report.total_revenue | currencyFormatter: report.revenue_currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="fl-margin-top fl-margin-bottom" layoutAlign="end center">
      <button mat-button (click)="printReport()" i18n>Get PDF</button>
      <button mat-button class="fl-margin-left-small" (click)="htmlToCSV()" i18n>Export to CSV</button>
    </div>
  </ng-container>
</div>
