<div class="clr-row" style="padding-left: 5%;">
  <div class="clr-row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
    <h3 class="header-title">{{'CONFIGMAP.CREATE_TMP' | translate}}</h3>
  </div>
  <form [formGroup]="currentForm" style="padding-right: 30px;width: 100%">
    <section class="form-block wrap">
      <div *ngIf="clusters" formArrayName="clusters" class="form-group form-group-padding">
        <label class="clr-col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
        <span class="warning-text" *ngIf="!clusters || clusters && clusters.length === 0">{{'CONFIGMAP.CREATE_EDIT_TMP.CLUSTER_MESSAGE' | translate}}</span>
        <div *ngFor="let cluster of clusters;let i=index"
             style="padding-right: 15px" class="checkbox-inline"
             [formGroupName]="i">
          <input formControlName="checked"
                 type="checkbox"
                 id="{{cluster.id}}-check">
          <label for="{{cluster.id}}-check">{{cluster.name}}</label>
        </div>
      </div>
      <div class="form-group form-group-padding">
        <label class="clr-col-md-3 form-group-label-override required">{{'TEMPLATE.RELEASE_EXPLAIN' | translate}}</label>
        <textarea formControlName="description"
                  rows="3"
                  style="width: 65%"
                  required>
        </textarea>
      </div>
      <div formArrayName="datas">
        <div *ngFor="let data of datas.controls; let i = index"
             [formGroupName]="i">
          <div class="form-group form-group-padding">
            <label class="clr-col-md-3 form-group-label-override required">{{'MESSAGE.DATA_CONTENT' | translate}}</label>
            <input type="text"
                   size="45"
                   formControlName="dataName"
                   required
                   [placeholder]="'PLACEHOLDER.CONFIG_KEY' | translate">
            <a href="javascript:void(0)">
              <clr-icon (click)="onDeleteData(i)" shape="trash" [title]="'ACTION.DELETE_DATA' | translate"
                        class="is-solid clr-icon"></clr-icon>
            </a>
            <a href="javascript:void(0)">
              <clr-icon (click)="onAddData(i)" shape="plus-circle" [title]="'ACTION.ADD_DATA' | translate"
                        class="is-solid clr-icon"></clr-icon>
            </a>
          </div>
          <div class="form-group" style="padding-left: 170px;">
           <textarea class="textarea-font" style="width: 65%"
                     formControlName="dataValue"
                     required
                     [placeholder]="'PLACEHOLDER.CONFIG_VALUE' | translate">
          </textarea>
          </div>
        </div>
      </div>
    </section>
  </form>
</div>
<div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
  <button type="button" class="btn btn-primary" [disabled]="!isValid"
          (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
</div>
<wayne-ace-editor (outputObj)="saveConfigMapTpl($event)"></wayne-ace-editor>
