<div layoutDirection="row" layoutDirection-lt-md="column" class="fl-content">
  <div appFlex="50" ltMdFlex="100">
    <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
          [formGroup]="productForm" *ngIf="createOptions" layoutDirection="column">
      <!--suppress JSUnusedGlobalSymbols -->
      <app-form-errors #formErrors [formGroup]="productForm"></app-form-errors>
      <div layoutDirection="row" appFlex="100" appLayoutGap="10px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Name</mat-label>
          <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
          <mat-error>{{fieldErrors['name']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Product internal code</mat-label>
          <input matInput placeholder="Product internal code" i18n-placeholder
                 type="text" formControlName="code" required>
          <mat-error>{{fieldErrors['code']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-form-field appFlex="100">
        <mat-label i18n>Description</mat-label>
        <textarea (keydown.control.enter)="objectController.actionCallback(primaryAction)"
                  matInput formControlName="description"></textarea>
        <mat-error>{{fieldErrors['description']}}</mat-error>
      </mat-form-field>
      <mat-form-field>
        <mat-label i18n>Billing type</mat-label>
        <mat-select formControlName="billing_type" placeholder="Billing type" i18n-placeholder>
          <mat-option *ngFor="let billingType of createOptions.billing_types" [value]="billingType[0]">
            {{billingType[1]}}
          </mat-option>
        </mat-select>
        <mat-error>{{fieldErrors['billing_type']}}</mat-error>
      </mat-form-field>
      <div layoutDirection="row" appFlex="100" appLayoutGap="10px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Group</mat-label>
          <mat-select formControlName="group" placeholder="Group" i18n-placeholder>
            <mat-option *ngFor="let group of createOptions.groups" [value]="group.id">
              {{group.name}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['group']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Module</mat-label>
          <mat-select formControlName="module" placeholder="Module" i18n-placeholder (selectionChange)="changedModule()">
            <mat-option *ngFor="let module of modules" [value]="module.id">
              {{module.name}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['module']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" appFlex="100" appLayoutGap="10px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Product type</mat-label>
          <mat-select formControlName="product_type" placeholder="Product type" i18n-placeholder>
            <mat-option *ngFor="let productType of createOptions.product_types" [value]="productType[0]">
              {{productType[1]}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['product_type']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Status</mat-label>
          <mat-select formControlName="status" placeholder="Status" i18n-placeholder>
            <mat-option *ngFor="let status of createOptions.statuses" [value]="status[0]">
              {{status[1]}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['status']}}</mat-error>
        </mat-form-field>
      </div>
      <div layoutDirection="row" appFlex="100" appLayoutGap="10px">
        <mat-form-field appFlex="50">
          <mat-label i18n>Price model</mat-label>
          <mat-select formControlName="price_model" placeholder="Price model" i18n-placeholder>
            <ng-container *ngFor="let priceModel of createOptions.price_models">
              <mat-option *ngIf="productForm.controls.billing_type.value !== 'onetime' ||
              oneTimeBillingTypePriceModels.includes(priceModel[0])" [value]="priceModel[0]">
                {{priceModel[1]}}
              </mat-option>
            </ng-container>
          </mat-select>
          <mat-error>{{fieldErrors['price_model']}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="50">
          <mat-label i18n>Auto setup</mat-label>
          <mat-select formControlName="auto_setup" placeholder="Auto setup" i18n-placeholder>
            <mat-option *ngFor="let autoSetup of createOptions.auto_setups" [value]="autoSetup[0]">
              {{autoSetup[1]}}
            </mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['auto_setup']}}</mat-error>
        </mat-form-field>
      </div>
      <div>
        <mat-form-field appFlex="100">
          <mat-label i18n>Welcome email</mat-label>
          <mat-select formControlName="welcome_email" placeholder="Welcome email" i18n-placeholder>
            <mat-option *ngFor="let welcome_email of createOptions.welcome_email | keyvalue" [value]="welcome_email.key">
              {{welcome_email.value}}
            </mat-option>
            <mat-option [value]="''" i18n>None</mat-option>
          </mat-select>
          <mat-error>{{fieldErrors['welcome_email']}}</mat-error>
        </mat-form-field>
      </div>
      <mat-checkbox formControlName="allow_zero_price_order" color="primary" i18n>Allow zero price order</mat-checkbox>
      <mat-checkbox formControlName="taxable" color="primary" i18n>
        Apply taxes to this product
      </mat-checkbox>
      <mat-checkbox formControlName="requires_domain" color="primary" i18n>
        This product requires a domain
      </mat-checkbox>
      <mat-checkbox formControlName="credit_on_downgrade" color="primary" i18n>Credit on downgrade</mat-checkbox>
      <mat-checkbox formControlName="hide_services" color="primary" i18n>
        Hide services for this product in enduser panel
      </mat-checkbox>
      <app-plugin-ui *ngIf="plugin" [pluginName]="plugin" [panelName]="panelLayout.panel"
                     componentName="ProductSettings"
                     [componentData]="{
                        productModuleSettingsHelper: productModuleSettingsHelper,
                        productModuleSettings: productModuleSettings
                     }">
      </app-plugin-ui>
    </form>
    <p *ngIf="object?.id && object.price_model !== 'free' && productForm.controls.price_model.value === 'free' && object.cycles.length"
       class="fl-important-text" i18n>Warning: setting this product as free will reset all product cycles prices to zero.</p>
  </div>
  <div appFlex="50" ltMdFlex="100" class="push-help-text">
    <div class="fl-help-text">
      <h3 i18n>Configure a new product</h3>
      <p i18n>A new product can be added as soon as its module is available.<br>
        The first thing to do is to add a <span class="fl-bold">Name</span> and a
        required <span class="fl-bold">Internal Code</span><br>
        The <span class="fl-bold">Description</span> is optional and if filled in, it will appear next to a
        product name in the shopping cart and on invoices.</p>

      <h3 i18n>Group & Module</h3>
      <p i18n>
        Select an appropriate group for this product and its module.<br>
        The module determines how and where a new Service will be created.<br>
        For example, selecting the OpenStack module means this is an OpenStack
        product and once ordered and paid, a new OpenStack Project will be created
        for the client.</p>

      <h3 i18n>Type & Status</h3>
      <p i18n>
        Select the appropriate type of this product and its <span class="fl-bold">Status</span><br>
        The status of the product, determines its visibility and availability to clients. <br>
        A <span class="fl-bold">Public</span> status makes the product visible to everyone while a
        <span class="fl-bold">Private</span> status will allow only administrators of Fleio to create a service
        with this product for a specified client.</p>

      <h3 i18n>Price model</h3>
      <p i18n>The most important options here are <strong>Fixed plus dynamic</strong> and
        <span class="fl-bold">Dynamic but at least fixed</span><br>
        If the <span class="fl-bold">Fixed plus dynamic</span> price model is used the service price will be the sum
        of fixed price and dynamic price.<br>
        If the <span class="fl-bold">Dynamic but at least fixed</span> price model is used the service price will be
        the fixed price if the fixed price is greater than dynamic price or dynamic price if dynamic price
        is greater than the fixed price.
        If the <span class="fl-bold">Fixed</span> price model is used the service price will be
        the fixed price and no dynamic charge is considered.</p>

      <h3 i18n>Allow zero price order</h3>
      <p i18n>If your product has a zero base price and the actual price comes from configurable options,
        but you still want to allow users to order a service with price zero, then check this option.
        If your product has a greater than zero price, this option is ignored.</p>

      <h3 i18n>Credit on downgrade</h3>
      <p i18n>When Credit on downgrade is checked pro rata refund will be
        provided to client's credit for unused time.</p>
    </div>
  </div>
</div>
