<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>
    <p 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 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 available for registration.
        </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: authService.currencyDisplayMode: authService.currencyDigitsInfo: config.locale }}
                </mat-option>
              </ng-container>
            </mat-select>
          </mat-form-field>
        </div>
        <p *ngIf="dnsManagementAvailable || emailForwardingAvailable || idProtectionAvailable" i18n>Select additional options</p>
        <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="5px">
          <mat-checkbox formControlName="dns_management" *ngIf="dnsManagementAvailable"
                        color="primary" i18n>Dns management <span>({{ dnsManagementPrice }})</span></mat-checkbox>
          <mat-checkbox formControlName="email_forwarding" *ngIf="emailForwardingAvailable"
                        color="primary" i18n>Email forwarding <span>({{ emailForwardingPrice }})</span></mat-checkbox>
          <mat-checkbox formControlName="id_protection" *ngIf="idProtectionAvailable"
                        color="primary" i18n>ID protection <span>({{ 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 subscriptSizing="dynamic">
              <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 subscriptSizing="dynamic">
              <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 subscriptSizing="dynamic">
              <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 subscriptSizing="dynamic">
              <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>

        <ng-container *ngIf="!anonymousUser">
          <p i18n>Register domain on</p>
          <mat-radio-group formControlName="domain_contact_type" layoutDirection="row" appLayoutGap="5px">
            <mat-radio-button value="client" color="primary" i18n-fl-tooltip i18n
                              fl-tooltip="Clients are used for invoicing, accounting and as domain registration details">
              Use client as a contact
            </mat-radio-button>
            <mat-radio-button value="contact" color="primary" i18n-fl-tooltip i18n
                              fl-tooltip="Contacts are only used for domain registration details">
              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 layoutDirection="row" appLayoutGap="10px">
              <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"
                 fl-tooltip="Edit domain contact" i18n-fl-tooltip i18n
                 (click)="editDomainContact()">Edit contact</a>
              <a mat-button color="primary" i18n-fl-tooltip i18n
                 fl-tooltip="Add a new domain contact"
                 (click)="createDomainContact()">
                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>
        </ng-container>
        <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>
