<div class="fl-content fl-content-min-height" layoutDirection="column" appLayoutGap="10px">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <form *ngIf="referralSettings" appFormSubmit (ngSubmit)="saveSettings()"
        [formGroup]="referralSettingsForm">
    <app-form-errors #formErrors [formGroup]="referralSettingsForm"></app-form-errors>
    <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column">
      <div layoutDirection="column" appFlex="40" xsFlex="100" smFlex="100">
        <mat-checkbox formControlName="enable_referral_system" color="primary" i18n>
          Enable referral system
        </mat-checkbox>
        <h2 class="fl-heading-md" i18n>Referee</h2>
        <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
          <mat-form-field appFlex="auto">
            <mat-label i18n>Referee credit</mat-label>
            <input matInput placeholder="Referee credit" i18n-placeholder type="number"
                   formControlName="referee_credit" required>
            <mat-error>{{ referralSettingsForm.controls.referee_credit.errors | errorFormatter }}</mat-error>
          </mat-form-field>
          <p class="fl-margin-bottom">{{ referralSettings.default_currency.code }}</p>
        </div>
        <mat-form-field appFlex="auto">
          <mat-label i18n>Referee credit valid (days)</mat-label>
          <input matInput placeholder="Referee credit valid (days)" i18n-placeholder type="number"
                 formControlName="referee_credit_valid_days" required>
          <mat-error>{{ referralSettingsForm.controls.referee_credit_valid_days.errors | errorFormatter }}</mat-error>
        </mat-form-field>
        <mat-checkbox formControlName="referee_require_credit_card_on_signup" color="primary" i18n>
          Require credit card on signup for referees
        </mat-checkbox>
        <h2 class="fl-heading-md" i18n>Referrer</h2>
        <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
          <mat-form-field appFlex="auto">
            <mat-label i18n>Referrer credit</mat-label>
            <input matInput placeholder="Referrer credit" i18n-placeholder type="number"
                   formControlName="referrer_credit" required>
            <mat-error>{{ referralSettingsForm.controls.referrer_credit.errors | errorFormatter }}</mat-error>
          </mat-form-field>
          <p class="fl-margin-bottom">{{ referralSettings.default_currency.code }}</p>
        </div>
        <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
          <mat-form-field appFlex="auto">
            <mat-label i18n>If referee spends</mat-label>
            <input matInput placeholder="If referee spends" i18n-placeholder type="number"
                   formControlName="referee_spends_credit" required>
            <mat-error>{{ referralSettingsForm.controls.referee_spends_credit.errors | errorFormatter }}</mat-error>
          </mat-form-field>
          <p class="fl-margin-bottom">{{ referralSettings.default_currency.code }}</p>
        </div>
        <mat-form-field appFlex="auto">
          <mat-label i18n>If referee active (days)</mat-label>
          <input matInput placeholder="If referee active (days)" i18n-placeholder type="number"
                 formControlName="referee_active_days" required>
          <mat-error>{{ referralSettingsForm.controls.referee_active_days.errors | errorFormatter }}</mat-error>
        </mat-form-field>

        <mat-checkbox formControlName="limit_referee_credit_services" color="primary" i18n>
          Limit services where referee can spend credit
        </mat-checkbox>

        <div *ngIf="referralSettingsForm.controls.limit_referee_credit_services.value">
          <mat-form-field>
            <mat-label i18n>Limit credit to products</mat-label>
            <mat-select formControlName="referee_credit_services" multiple
                        placeholder="Limit credit to products" i18n-placeholder>
              <ng-container *ngFor="let product of products">
                <mat-option [value]="product.id">{{ product.name }}</mat-option>
              </ng-container>
            </mat-select>
            <mat-error>{{ referralSettingsForm.controls.referee_credit_services.errors | errorFormatter }}</mat-error>
          </mat-form-field>
        </div>

      </div>

      <div layoutDirection="column" appFlex="60" class="fl-help-text">
        <h3 class="hide-lt-md" i18n>Enable referral system</h3>
        <p class="fl-detail" i18n>
          Enables the referral functionalities.
        </p>
        <p class="fl-detail" i18n>
          <span class="fl-bold">Referrer</span> (affiliate/brand Advocate/Ambassador) is a person who makes a
          referral/refers another user (friend, family, acquaintance, etc.). The <span class="fl-bold">Referee</span>
          (friend) is a person who is invited/referred by another user.
        </p>
        <p class="fl-detail" i18n>
          A referee will receive <span class="fl-bold">Referee credit</span> when using the sing-up link received from
          referrer. The credit is valid for <span class="fl-bold">Referee credit valid (days)</span>.
        </p>
        <p class="fl-detail" i18n>
          The referrer receives <span class="fl-bold">Referrer credit</span>
          <span class="fl-bold"> If referee spends</span> the minimum amount and
          <span class="fl-bold">If referee active (days)</span>.
        </p>
      </div>
    </div>
  </form>
  <div layoutDirection="row" layoutAlign="end end" class="fl-margin-top" appFlex="auto">
    <button mat-button (click)="saveSettings()" color="primary" i18n>Save settings</button>
  </div>
</div>
