<div class="fl-content fl-content-min-height">
  <form [formGroup]="newDomainForm" layoutDirection="column" layoutAlign="center"
        appFormSubmit (ngSubmit)="transferDomain()">
    <app-form-errors #formErrors [formGroup]="newDomainForm"></app-form-errors>
    <div layoutAlign="center center" layoutDirection="row">
      <div layoutDirection="column" class="full-width">
        <app-client-autocomplete [control]="newDomainForm.controls.client"></app-client-autocomplete>
        <p *ngIf="newDomainForm.controls.client.value && newDomainForm.controls.client.value.id"
           class="text-center" i18n>
          Fill in an already registered domain name that you want to transfer from another registrar.
          If you want to register a new domain, use the
          <a class="active-link" [routerLink]="config.getPanelUrl('domains/register-domain')">
            domain registration form</a>.
        </p>
      </div>
    </div>
    <div *ngIf="newDomainForm.controls.client.value && newDomainForm.controls.client.value.id"
         layoutAlign="center">
      <mat-form-field appFlex="50">
        <mat-label i18n>Domain name</mat-label>
        <input matInput placeholder="Domain name" i18n-placeholder
               (input)="nameCtrl.setValue(nameCtrl.value.toLowerCase())"
               type="text" formControlName="name" required>
        <mat-error>{{fieldErrors['name']}}</mat-error>
        <mat-hint i18n>E.g. mydomain.com</mat-hint>
      </mat-form-field>
    </div>
    <div *ngIf="newDomainForm.controls.client.value && newDomainForm.controls.client.value.id" layoutAlign="center">
      <mat-form-field appFlex="50">
        <mat-label i18n>EPP code</mat-label>
        <input matInput placeholder="EPP code" i18n-placeholder type="text" formControlName="epp">
        <mat-error>{{fieldErrors['epp']}}</mat-error>
        <mat-hint i18n>The EPP code is a secrete code used to authorize the transfer.</mat-hint>
      </mat-form-field>
    </div>
    <div layoutAlign="center" class="fl-margin-top"
         *ngIf="newDomainForm.controls.client.value && newDomainForm.controls.client.value.id">
      <button mat-button color="primary" (click)="checkDomainName()" [disabled]="checkingDomain" i18n>Check</button>
    </div>
    <div *ngIf="domainAvailability" class="fl-margin-top" layoutAlign="center center" layoutDirection="column">
      <ng-container *ngIf="domainAvailability.available; else domainNotAvailable">
        <p class="fl-green-color" i18n>
          Domain is available for transfer.
        </p>
        <p *ngIf="domainAvailability.premium_prices" class="fl-green-color fl-margin-top-small" i18n>
          This is a premium domain and costs more than standard pricing.
        </p>
        <div layoutDirection="column" appFlex="50">
          <ng-container *ngIf="prices && prices.transfer_adds_years; else doesNotAddYears">
            <mat-form-field>
              <mat-label i18n>Select registration period</mat-label>
              <mat-select formControlName="years">
                <ng-container *ngFor="let yearPrice of prices.prices_per_years; let index=index">
                  <mat-option *ngIf="yearPrice !== null"
                              [value]="index">
                    {{ domainUtils.getYearsText(index) }} - {{ yearPrice | currencyFormatter: prices.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale }}
                  </mat-option>
                </ng-container>
              </mat-select>
            </mat-form-field>
          </ng-container>
          <ng-template #doesNotAddYears>
            <p i18n>Transfer price: {{prices.prices_per_years[0] | currencyFormatter: prices.currency.code: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}}</p>
          </ng-template>
        </div>
        <div layoutDirection="row" layoutAlign="end" class="fl-margin-top">
          <button mat-button color="primary" (click)="transferDomain($event)" i18n>Transfer domain</button>
        </div>
      </ng-container>
      <ng-template #domainNotAvailable>
        <p class="fl-red-color">{{domainAvailability.error}}</p>
      </ng-template>
    </div>
  </form>
</div>
