<div *ngIf="priceCycles" layoutDirection="column">
  <div layoutDirection="row" layoutAlign="start center">
    <p class="fl-tag fl-no-margin-top">{{ priceCycles.currency.code }}</p>
    <mat-checkbox *ngIf="!priceCycles.currency.is_default"
                  color="primary" [(ngModel)]="priceCycles.relative_prices" (ngModelChange)="relativePricesChanged()"
                  class="fl-margin-bottom-medium"
                  [attr.fl-tooltip]="useRelativePricesTooltip" i18n>
      Use relative prices
    </mat-checkbox>
  </div>
  <div layoutDirection="row" layoutDirection-lt-md="column">
    <ng-container *ngIf="priceType !== 'transfer' || transferAddsYears; else transferPrice">
      <mat-form-field *ngFor="let price of priceCycles.prices_per_years; let index = index;trackBy: priceTrackBy"
                      subscriptSizing="dynamic" class="year-price-input" [class.offset-5px]="index > 0">
        <mat-label *ngIf="index === 0" i18n>{{ index + 1 }} year</mat-label>
        <mat-label *ngIf="index !== 0" i18n>{{ index + 1 }} years</mat-label>

        <ng-container #outlet [ngTemplateOutlet]="content"></ng-container>
        <ng-template #content>
          <input *ngIf="index === 0" matInput [disabled]="priceCycles.relative_prices" min="0"
                 (focusout)="inputFocusedOut(index)"
                 type="number" [(ngModel)]="priceCycles.prices_per_years[index]"
                 placeholder="{{index + 1}} year" i18n-placeholder>
          <input *ngIf="index !== 0" matInput [disabled]="priceCycles.relative_prices" min="0"
                 (focusout)="inputFocusedOut(index)"
                 type="number" [(ngModel)]="priceCycles.prices_per_years[index]"
                 placeholder="{{index + 1}} years" i18n-placeholder>
        </ng-template>
        <mat-error *ngIf="priceCycles.prices_per_years[index] < 0" i18n>Value must be greater or equal to 0</mat-error>
      </mat-form-field>
    </ng-container>
    <ng-template #transferPrice>
      <mat-form-field appFlex="300px">
        <mat-label i18n>Transfer price</mat-label>

        <input matInput [disabled]="priceCycles.relative_prices" min="0" required #transferInput
               type="number" [(ngModel)]="priceCycles.prices_per_years[0]"
               (focusout)="inputFocusedOut(0)"
               placeholder="Transfer price" i18n-placeholder>
        <mat-error>{{ transferInput.validationMessage }}</mat-error>
      </mat-form-field>
    </ng-template>
  </div>
</div>
<a *ngIf="priceType !== 'transfer' || transferAddsYears" fl-tooltip-direction="right"
   fl-tooltip="Click to autofill pro-rata prices of 2-10 years based on 1 year price" i18n-fl-tooltip
   class="fl-margin-bottom-medium fl-margin-top active-link"
   (click)="autoFillPrices(priceCycles && priceCycles.relative_prices)" i18n>Autofill</a>
