<div class="fl-table-wrapper fl-content-min-height">
  <p class="fl-detail fl-margin-bottom" i18n>
    Report shows actual collected money, credit added and taxes broken down by month.
  </p>
  <div *ngIf="!loading" class="fl-margin-bottom">
    <div layoutAlign="start center">
      <button mat-button (click)="navigateLeft()">
        <app-icon [icon]="{name: 'navigate_before', verticalAlign: 'middle', fontSize: '20px'}"></app-icon>
        {{selectedYear - 1}}
      </button>
    </div>
    <div appFlex="auto"></div>
    <div layoutAlign="end center">
      <button mat-button *ngIf="currentYear !== selectedYear" (click)="navigateRight()">
        {{ selectedYear + 1}}
        <app-icon [icon]="{name: 'navigate_next', verticalAlign: 'middle', fontSize: '20px'}"></app-icon>
      </button>
    </div>
  </div>
  <mat-progress-spinner [diameter]="80" *ngIf="loading" class="center-object fl-margin-top-large"
                        [mode]="'indeterminate'"></mat-progress-spinner>
  <ng-container *ngIf="report && !loading">
    <div class="report-container">
      <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 i18n><div class="fl-margin-left-medium">Month</div></th>
            <th class="right-align"><span i18n>Revenue</span> <app-icon class="info-elem" [icon]="revenueInfoIcon"></app-icon></th>
            <th class="right-align"><span i18n>Add credit</span> <app-icon class="info-elem" [icon]="addCreditInfoIcon"></app-icon></th>
            <th class="right-align"><span i18n>Subtract credit</span> <app-icon class="info-elem" [icon]="subtractCreditInfoIcon"></app-icon></th>
            <th class="right-align">
              <div class="fl-margin-right-small">
                <span i18n>Taxes</span> <app-icon class="info-elem" [icon]="taxesInfoIcon"></app-icon>
              </div>
            </th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let monthlyReport of this.report; let last = last;">
            <td>
              <div class="fl-margin-left-medium" [class.fl-bold]="last">
                {{ monthlyReport.month_display }}
              </div>
            </td>
            <td class="right-align" [class.fl-bold]="last">
              {{ monthlyReport.revenue | currencyFormatter: monthlyReport.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
            </td>
            <td class="right-align" [class.fl-bold]="last">
              {{ monthlyReport.add_credit | currencyFormatter: monthlyReport.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
            </td>
            <td class="right-align" [class.fl-bold]="last">
              {{ monthlyReport.subtract_credit | currencyFormatter: monthlyReport.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
            </td>
            <td class="right-align" [class.fl-bold]="last">
              <div class="fl-margin-right-small">
                {{ monthlyReport.taxes | currencyFormatter: monthlyReport.currency: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="fl-margin-top fl-margin-bottom" layoutAlign="end center">
      <button mat-button class="fl-margin-left-small" (click)="htmlToCSV()" i18n>Export to CSV</button>
    </div>
  </ng-container>
</div>
