<h2>{{material.name | exists}}</h2>

<form #materialForm="ngForm" *ngIf="!loading">
  <rb-form-input name="materialname" label="product name" appValidate="stringNin" [appValidateArgs]="[materialNames]"
                 required [(ngModel)]="material.name" #materialnameInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{materialnameInput.errors.failure}}</ng-template>
  </rb-form-input>
  <rb-form-input name="supplier" label="supplier"
                 [rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialSuppliers)"
                 [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
                 [(ngModel)]="material.supplier" #supplierInput="ngModel"
                 (focusout)="checkTypo($event, 'materialSuppliers', 'supplier', modalWarning)"
                 title="material supplier, eg. BASF">
    <ng-template rbFormValidationMessage="failure">{{supplierInput.errors.failure}}</ng-template>
  </rb-form-input>
  <rb-form-input name="group" label="group"
                 [rbFormInputAutocomplete]="autocomplete.bind(this, d.arr.materialGroups)"
                 [rbDebounceTime]="0" [rbInitialOpen]="true" appValidate="string" required
                 [(ngModel)]="material.group" #groupInput="ngModel"
                 (focusout)="checkTypo($event, 'materialGroups', 'group', modalWarning)"
                 title="chemical material type, eg. PA66">
    <ng-template rbFormValidationMessage="failure">{{groupInput.errors.failure}}</ng-template>
  </rb-form-input>

  <ng-template #modalWarning>
    <rb-alert alertTitle="Warning" type="warning" okBtnLabel="Use suggestion" cancelBtnLabel="Keep value">
      The specified {{modalText.list}} could not be found in the list. <br>
      Did you mean {{modalText.suggestion}}?
    </rb-alert>
  </ng-template>
  <rb-array-input [(ngModel)]="material.numbers" name="materialNumbers" [pushTemplate]="''">
    <rb-form-input *rbArrayInputItem="let item" [rbArrayInputListener]="'materialNumber'" [index]="item.i"
                   label="material number" appValidate="string" [name]="'materialNumber-' + item.i"
                   [ngModel]="item.value" title="Bosch material part number, eg. 5515753021"></rb-form-input>
  </rb-array-input>
  <rb-form-select name="propertiesSelect" label="Type" title="=overall material group specific properties"
                  [(ngModel)]="material.properties.material_template">
    <option *ngFor="let m of d.latest.materialTemplates" [value]="m._id">{{m.name}}</option>
  </rb-form-select>
  <rb-form-input *ngFor="let parameter of
                           d.id.materialTemplates[material.properties.material_template].parameters;
                         index as i" [name]="'materialParameter' + i"
                 [label]="parameter.name" appValidate="string" required
                 [(ngModel)]="material.properties[parameter.name]" #parameterInput="ngModel">
    <ng-template rbFormValidationMessage="failure">{{parameterInput.errors.failure}}</ng-template>
    <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template>
  </rb-form-input>

  <rb-icon-button icon="save" mode="primary" type="submit" (click)="materialSave()"
                  [disabled]="materialForm.form.invalid">
    Save material
  </rb-icon-button>
  <rb-icon-button class="delete-material" icon="delete" mode="danger" (click)="deleteConfirm(modalDeleteConfirm)">
    Delete sample
  </rb-icon-button>
</form>


<ng-template #modalDeleteConfirm>
  <rb-alert alertTitle="Are you sure?" type="danger" [okBtnLabel]="'Delete material'"
            cancelBtnLabel="Cancel">
    Do you really want to delete {{material.name}}?
  </rb-alert>
</ng-template>

