<div class="fl-content fl-detail" layoutDirection="column">
  <div *ngIf="dynamicUsage" class="fl-margin-top fl-margin-bottom">
    <div appFlex="30">
      <div class="fl-heading-sm period-margin" layoutDirection="row"
           layoutAlign="start center">
        <button mat-icon-button [disabled]="!dynamicUsage.previous_history" (click)="getPrev()">
          <mat-icon>chevron_left</mat-icon>
        </button>
        <span i18n>
          Period:
          <app-date-displayer [date]="dynamicUsage.billing_start"></app-date-displayer>
          -
          <app-date-displayer [date]="dynamicUsage.billing_end"></app-date-displayer>
        </span>
        <button mat-icon-button [disabled]="dynamicUsage.id === currentUsageId.value" (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="currentUsageId" placeholder="Service" i18n-placeholder>
          <mat-option *ngFor="let service of serviceDynamicUsageList.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 class="fl-content fl-content-min-height" *ngIf="loading">
    <app-fl-backdrop overlayParent></app-fl-backdrop>
  </div>
  <div *ngIf="!loading && dynamicUsage">
    <div>
      <app-fleio-service-dynamic-usage [dynamicUsage]="dynamicUsage">
      </app-fleio-service-dynamic-usage>

      <div *ngIf="dynamicUsage.id === currentUsageId.value" class="right-align fl-bold estimated-cycle-box">
        <div *ngIf="serviceDynamicUsageList.credit_and_invoicing_info &&
                !serviceDynamicUsageList.credit_and_invoicing_info.has_billing_agreement &&
                serviceDynamicUsageList.credit_and_invoicing_info.remaining_days !== null &&
                serviceDynamicUsageList.credit_and_invoicing_info.remaining_days < 365 &&
                serviceDynamicUsageList.credit_and_invoicing_info.reached_credit_limit === false"
             class="fl-no-padding-top">
        <span *ngIf="serviceDynamicUsageList.credit_and_invoicing_info.remaining_days > 1" i18n>
          Client will reach credit limit in about {{ serviceDynamicUsageList.credit_and_invoicing_info.remaining_days }} days.
        </span>
          <span *ngIf="serviceDynamicUsageList.credit_and_invoicing_info.remaining_days === 1" i18n>
          Client will reach credit limit in about one day.
        </span>
          <span *ngIf="serviceDynamicUsageList.credit_and_invoicing_info.remaining_days === 0">
          <span *ngIf="serviceDynamicUsageList.credit_and_invoicing_info.remaining_hours > 1" i18n>
            Client will reach credit limit in about {{ serviceDynamicUsageList.credit_and_invoicing_info.remaining_hours }} hours.
          </span>
          <span *ngIf="serviceDynamicUsageList.credit_and_invoicing_info.remaining_hours === 1" i18n>
            Client will reach credit limit in about one hour.
          </span>
          <span *ngIf="serviceDynamicUsageList.credit_and_invoicing_info.remaining_hours === 0" i18n>
            Client will reach credit limit in less than one hour.
          </span>
        </span>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="!dynamicUsage">
    <div *ngIf="!loading" class="fl-content fl-content-min-height fl-detail" i18n>No data</div>
  </div>
</div>
