<div *ngIf="serviceUsages?.objects?.length > 0; else noData">
  <div layoutDirection="row" layoutDirection-lt-md="column" class="fl-margin-bottom">
    <div appFlex="30">
      <div class="fl-heading-sm period-margin adjust-period-info" layoutDirection="row"
           layoutAlign="start center" *ngIf="selectedServiceUsage">
        <button mat-icon-button [disabled]="!selectedServiceUsage.previous_history" (click)="getPrev()">
          <mat-icon>chevron_left</mat-icon>
        </button>
        <span i18n>
          Period:
          <app-date-displayer [date]="selectedServiceUsage.billing_start"></app-date-displayer>
          -
          <app-date-displayer [date]="selectedServiceUsage.billing_end"></app-date-displayer>
        </span>
        <button mat-icon-button [disabled]="selectedServiceUsage.id === currentUsageId" (click)="getNext()">
          <mat-icon>chevron_right</mat-icon>
        </button>
      </div>
    </div>
    <div [formGroup]="usageSelectForm" appFlex="70">
      <mat-form-field appFlex="100">
        <mat-label i18n>Service</mat-label>
        <mat-select formControlName="selectedUsageId" placeholder="Service" i18n-placeholder>
          <mat-option *ngFor="let service of serviceUsages.available_services"
                      [value]="service.related_dynamic_usage_id" i18n>
            {{service.display}} <span *ngIf="service.price_override">({{service.price_override_display}})</span>
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
</div>
<div class="fl-content fl-content-min-height" *ngIf="loading">
  <app-fl-backdrop [hideBackdrop]="true" [spinnerDiameter]="100"></app-fl-backdrop>
</div>
<div>
  <div *ngIf="!loading && selectedServiceUsage" layoutDirection="column">
    <app-fleio-service-dynamic-usage [dynamicUsage]="selectedServiceUsage">
    </app-fleio-service-dynamic-usage>

    <div *ngIf="selectedServiceUsage.id === currentUsageId" class="right-align fl-bold estimated-cycle-box">
      <div *ngIf="selectedServiceUsage.id === serviceUsages?.estimated_cycle_cost?.usage_id &&
                  serviceUsages.estimated_cycle_cost.amount &&
                  selectedServiceUsage?.usage?.currency?.code"
           class="fl-no-padding-top" i18n>
        Estimated cycle cost:
        <span *ngIf="!isFree; else freeEstimate">{{ serviceUsages.estimated_cycle_cost.amount | currencyFormatter: selectedServiceUsage.usage.currency.code: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</span>
        <ng-template #freeEstimate>
          <s>{{ serviceUsages.estimated_cycle_cost.amount | currencyFormatter: selectedServiceUsage.usage.currency.code: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}</s>
          {{ '0' | currencyFormatter: selectedServiceUsage.usage.currency.code: config.authService.currencyDisplayMode: config.authService.currencyDigitsInfo: config.locale }}
        </ng-template>
      </div>
      <div *ngIf="serviceUsages.credit_and_invoicing_info &&
                !serviceUsages.credit_and_invoicing_info.has_billing_agreement &&
                serviceUsages.credit_and_invoicing_info.remaining_days !== null &&
                serviceUsages.credit_and_invoicing_info.remaining_days < 365 &&
                serviceUsages.credit_and_invoicing_info.reached_credit_limit === false"
           class="fl-no-padding-top">
        <span *ngIf="serviceUsages.credit_and_invoicing_info.remaining_days > 1" i18n>
          Current credit lasts for about {{ serviceUsages.credit_and_invoicing_info.remaining_days }} days
        </span>
        <span *ngIf="serviceUsages.credit_and_invoicing_info.remaining_days === 1" i18n>
          Current credit lasts for about one day
        </span>
        <span *ngIf="serviceUsages.credit_and_invoicing_info.remaining_days === 0">
          <span *ngIf="serviceUsages.credit_and_invoicing_info.remaining_hours > 1" i18n>
            Your current credit will last for about {{ serviceUsages.credit_and_invoicing_info.remaining_hours }} hours.
          </span>
          <span *ngIf="serviceUsages.credit_and_invoicing_info.remaining_hours === 1" i18n>
            Your current credit will last for about one hour.
          </span>
          <span *ngIf="serviceUsages.credit_and_invoicing_info.remaining_hours === 0" i18n>
            Your current credit will last less than one hour.
          </span>
        </span>
      </div>
      <div *ngIf="serviceUsages.credit_and_invoicing_info &&
                serviceUsages.credit_and_invoicing_info.has_billing_agreement &&
                serviceUsages.credit_and_invoicing_info.charging_date &&
                serviceUsages.credit_and_invoicing_info.credit_enough_this_cycle"
           class="fl-no-padding-top">
        <span i18n>
          You will be charged after current cycle ends
          ({{ serviceUsages.credit_and_invoicing_info.charging_date | dateFormatter }})
        </span>
      </div>
      <div *ngIf="serviceUsages.credit_and_invoicing_info &&
                serviceUsages.credit_and_invoicing_info.has_billing_agreement &&
                serviceUsages.credit_and_invoicing_info.charging_date &&
                !serviceUsages.credit_and_invoicing_info.credit_enough_this_cycle"
           class="fl-no-padding-top">
        <span i18n>
          You will be charged on
          {{ serviceUsages.credit_and_invoicing_info.charging_date | dateFormatter }}
          <br>
          (will reach credit limit)
        </span>
      </div>
    </div>

    <div *ngIf="selectedServiceUsage.id === currentUsageId && lastUpdatedTxt"
         class="last-updated-text fl-detail">{{lastUpdatedTxt}}</div>
  </div>
</div>
<ng-template #noData>
  <div class="text-center no-history-message" *ngIf="!this.loading" i18n>No billing history data</div>
</ng-template>
