<rb-form-select name="collectionSelection" label="collection"
                [(ngModel)]="collection" (ngModelChange)="loadTemplates()">
  <option value="material">Materials</option>
  <option value="measurement">Measurements</option>
  <option value="condition">Conditions</option>
</rb-form-select>


<rb-icon-button icon="add" mode="primary" (click)="newTemplate()">New template</rb-icon-button>

<div class="list">
  <div class="row">
    <div class="header">Name</div>
    <div class="header">Version</div>
  </div>

  <ng-container *ngFor="let group of groupsView">
    <div class="row clickable">
      <div (click)="group.expanded = !group.expanded">{{group.name}}</div>
      <div (click)="group.expanded = !group.expanded">{{group.version}}</div>
    </div>
    <div class="row" *ngIf="group.expanded" [@inOut]>
      <div class="details">
        <ng-container *ngFor="let template of group.entries">
          <div>{{template.name}}</div>
          <div>{{template.version}}</div>
          <div>{{template.parameters | parameters}}</div>
        </ng-container>
        <div class="template-actions">
          <form #templateForm="ngForm">
            <div *ngIf="group.edit">
              <rb-form-input [name]="'name-' + group.name" label="name" appValidate="string" required
                             [(ngModel)]="templateEdit[group.first_id].name" #supplierInput="ngModel">
                <ng-template rbFormValidationMessage="failure">{{supplierInput.errors.failure}}</ng-template>
              </rb-form-input>
              <rb-array-input [(ngModel)]="templateEdit[group.first_id].parameters" [name]="'parameters-' + group.name"
                              [pushTemplate]="{name: '', range: {}, rangeString: '{}'}" pushPath="name"
                              class="parameters">
                <ng-container *rbArrayInputItem="let item">
                  <rb-form-input [rbArrayInputListener]="'parameter-name-' + group.name" appValidate="parameterName"
                                 [index]="item.i" [name]="'parameter-name-' + group.name + item.i"
                                 label="parameter name" [ngModel]="item.value.name" #parameterName="ngModel">
                    <ng-template rbFormValidationMessage="failure">{{parameterName.errors.failure}}</ng-template>
                  </rb-form-input>
                  <rb-form-textarea [name]="'parameter-range-' + group.name + item.i" label="range"
                                    appValidate="parameterRange" [(ngModel)]="item.value.rangeString"
                                    #parameterRange="ngModel">
                    <ng-template rbFormValidationMessage="failure">{{parameterRange.errors.failure}}</ng-template>
                  </rb-form-textarea>
                </ng-container>
              </rb-array-input>
            </div>
            <rb-icon-button icon="edit" mode="secondary" (click)="group.edit = !group.edit">
              Edit template
            </rb-icon-button>
            <rb-icon-button icon="save" mode="primary" (click)="saveTemplate(group.first_id)" *ngIf="group.edit"
                            [disabled]="templateForm.invalid">
              Save template
            </rb-icon-button>
          </form>
        </div>
      </div>
    </div>
  </ng-container>
</div>

