<div class="fl-content fl-content-min-height">
  <form appFormSubmit (ngSubmit)="registerDomain()"
        [formGroup]="newDomainForm" layoutDirection="column" layoutAlign="center">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="newDomainForm"></app-form-errors>

    <app-client-autocomplete [control]="newDomainForm.controls.client"></app-client-autocomplete>

    <p *ngIf="newDomainForm.controls.client.value && newDomainForm.controls.client.value.id" i18n>
      Fill in a domain name below to check availability and register the domain. If you want to transfer your
      domain from another registrar, use the
      <a class="active-link" [routerLink]="config.getPanelUrl('domains/transfer-domain')">
        domain transfer form</a>.
    </p>
    <div *ngIf="newDomainForm.controls.client.value && newDomainForm.controls.client.value.id"
         layoutDirection="row" layoutAlign="center" appLayoutGap="5px">
      <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 class="fl-margin-top-medium">
        <a mat-button color="primary" (click)="checkDomainName()" [disabled]="checkingDomain" i18n>Check</a>
      </div>
    </div>
    <div *ngIf="domainAvailability" class="fl-margin-top" layoutDirection="column">
      <ng-container *ngIf="domainAvailability.available; else domainNotAvailable">
        <p class="fl-green-color" i18n>
          Domain is not checked for availability when added from staff
        </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">
          <mat-form-field>
            <mat-label i18n>Select registration period</mat-label>
            <mat-select (selectionChange)="updateOptionPrices(null)" formControlName="years"
                        placeholder="Select period" i18n-placeholder>
              <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>
        </div>
        <p i18n>Select additional options</p>
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="5px">
          <mat-checkbox formControlName="dns_management"
                        color="primary">
            <span i18n>Dns management</span>
            <span *ngIf="dnsManagementAvailable">&nbsp;({{ dnsManagementPrice }})</span>
          </mat-checkbox>
          <mat-checkbox formControlName="email_forwarding"
                        color="primary">
            <span i18n>Email forwarding</span>
            <span *ngIf="emailForwardingAvailable">&nbsp;({{ emailForwardingPrice }})</span>
          </mat-checkbox>
          <mat-checkbox formControlName="id_protection"
                        color="primary">
            <span i18n>ID protection</span>
            <span *ngIf="idProtectionAvailable">&nbsp;({{ idProtectionPrice }})</span>
          </mat-checkbox>
        </div>
        <p i18n>Select nameservers</p>
        <mat-checkbox formControlName="use_default_nameservers"
                      color="primary"
                      (change)="setDefaultNameservers()" i18n>
          Use default nameservers
        </mat-checkbox>
        <br/>
        <div layoutDirection="row">
          <div layoutDirection="column" appFlex="50" xsFlex="100">
            <mat-form-field>
              <mat-label i18n>First nameserver</mat-label>
              <input matInput placeholder="First nameserver" i18n-placeholder type="text" formControlName="nameserver1" required>
              <mat-error>{{fieldErrors['nameserver1']}}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Second nameserver</mat-label>
              <input matInput placeholder="Second nameserver" i18n-placeholder type="text" formControlName="nameserver2">
              <mat-error>{{fieldErrors['nameserver2'] }}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Third nameserver</mat-label>
              <input matInput placeholder="Third nameserver" i18n-placeholder type="text" formControlName="nameserver3">
              <mat-error>{{fieldErrors['nameserver3'] }}</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label i18n>Fourth nameserver</mat-label>
              <input matInput placeholder="Fourth nameserver" i18n-placeholder type="text" formControlName="nameserver4">
              <mat-error>{{fieldErrors['nameserver4'] }}</mat-error>
            </mat-form-field>
          </div>
        </div>

        <p>Register domain on</p>
        <mat-radio-group formControlName="domain_contact_type" layoutDirection="row" appLayoutGap="5px">
          <mat-radio-button value="client" color="primary"
                            [attr.fl-tooltip]="clientAsContactTxt" i18n>
            Use client as a contact
          </mat-radio-button>
          <mat-radio-button value="contact" color="primary"
                            [attr.fl-tooltip]="selectDomainContactTxt" i18n>
            Select a domain contact
          </mat-radio-button>
        </mat-radio-group>

        <div *ngIf="domain_contact_type.value === 'client'" class="fl-margin-top">
          <p i18n>Data from client profile will be used when registering the domain:</p>
          <pre class="fl-detail">{{ domainAvailability.client_details }}</pre>
        </div>
        <div *ngIf="domain_contact_type.value === 'contact'">
          <p i18n>Please select a domain contact</p>
          <div>
            <app-autocomplete [control]="newDomainForm.controls.contact"
                              [optionsService]="domainContactsApi"
                              [placeholderUnselected]="contactUnselectedPlaceholder"
                              [placeholderSelected]="contactSelectedPlaceholder"
                              [optionsQueryParams]="{client: newDomainForm.controls.client.value.id}"></app-autocomplete>

            <a *ngIf="newDomainForm.controls.contact.value" mat-button color="primary"
                    [attr.fl-tooltip]="editContactTooltip"
                    (click)="editDomainContact()" i18n>Edit contact</a>
            <a mat-button color="primary"
               [attr.fl-tooltip]="addContactTooltip"
               (click)="createDomainContact()" i18n>
              Add contact
            </a>
          </div>
          <p i18n>Data from domain contact will be used when registering the domain:</p>
          <pre class="fl-detail">{{ newDomainForm.controls.contact.value.details }}</pre>
        </div>
        <div *ngIf="checkingCustomFields" class="fl-margin-left fl-margin-top-medium">
          <app-flashing-dots></app-flashing-dots>
        </div>
        <div *ngIf="!checkingCustomFields && customFieldsStatus && customFieldsStatus.missing_fields">
          <p class="fl-red-color" i18n>
            You need to fill the following custom fields in order to register the domain:
          </p>
          <p class="fl-red-color">
            <ng-container *ngFor="let label of customFieldsStatus.missing_fields_labels; let last=last">
              <span>{{ label }}</span>
              <span *ngIf="!last">,&nbsp;</span>
            </ng-container>
          </p>
          <a *ngIf="domain_contact_type.value === 'client'" class="active-link" (click)="editClient()" i18n>Click here to edit client</a>
          <a *ngIf="domain_contact_type.value === 'contact'" class="active-link" (click)="editDomainContact()" i18n>
            Click here to edit contact
          </a>
        </div>
        <div layoutDirection="row" layoutAlign="end" class="fl-margin-top">
          <a mat-button color="primary" (click)="registerDomain()" i18n>Register domain</a>
        </div>
      </ng-container>
      <ng-template #domainNotAvailable>
        <p class="fl-red-color">{{domainAvailability.error}}</p>
      </ng-template>
    </div>
  </form>
</div>
