<clr-modal [(clrModalOpen)]="modalOpened" [clrModalSize]="'lg'" #modal>
  <h3 class="modal-title">{{title}}
    <wayne-modal-operate [modal]="modal" *ngIf="modalOpened"></wayne-modal-operate>
  </h3>
  <div class="modal-body">
    <form #ngForm="ngForm">
      <section class="form-block">
        <div class="form-group" style="padding-left: 135px;">
          <label for="name" class="clr-col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
          <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                 class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
            <input class="form-control" type="text" id="name" [(ngModel)]="cluster.name"
                   name="name" size="24"
                   required
                   [readonly]="actionType==1"
                   maxlength="24"
                   (keyup)='handleValidation()'>
            <span class="tooltip-content">
              集群名称不符合规范
            </span>
          </label>
          <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
        </div>
        <div class="form-group" style="padding-left: 135px;">
          <label for="master" class="clr-col-md-3 form-group-label-override required">Master</label>
          <input class="form-control" type="text" id="master" [(ngModel)]="cluster.master"
                 name="master" size="128"
                 required
                 maxlength="128">
        </div>
        <div class="form-group" style="padding-left: 135px;">
          <label for="meta_data" class="clr-col-md-3 form-group-label-override required">KubeConfig</label>
          <wayne-ace-editor-box #kubeConfig></wayne-ace-editor-box>
        </div>
        <div class="form-group" style="padding-left: 135px;">
          <label for="status" class="clr-col-md-3 form-group-label-override">集群状态</label>
          <div class="select">
            <select id="concurrencyPolicy" name="status" [(ngModel)]="cluster.status">
              <option [ngValue]="0" selected>在线</option>
              <option [ngValue]="1">维护中</option>
            </select>
          </div>
        </div>
        <div class="form-group" style="padding-left: 135px;">
          <label for="meta_data" class="clr-col-md-3 form-group-label-override">MetaData
            <clr-signpost>
              <clr-signpost-content [clrPosition]="position" style="min-width:25rem" *clrIfOpen>
                <h3 style="margin-top: 0">配置说明</h3>
                <code>
                  示例：
                  <pre style="border: none">{{clusterMeataObjExample}}</pre>
                  <ul>
                    <li>rbd : Kubernetes PV rbd 对象，配置之后新建PV类型为rbd会自动填充</li>
                    <li>cephfs : Kubernetes PV cephfs 对象，配置之后新建PV类型为cephfs会自动填充</li>
                    <li>env : 当前集群发布服务时会自动添加配置的env，如果跟用户配置的重名，会默认使用系统配置的Env，可以配置IDC等环境变量</li>
                  </ul>
                </code>
              </clr-signpost-content>
            </clr-signpost>
          </label>
          <wayne-ace-editor-box #metaData></wayne-ace-editor-box>
        </div>
        <div class="form-group" style="padding-left: 135px;">
          <label for="description"
                 class="clr-col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
          <textarea id="description" [(ngModel)]="cluster.description"
                    name="description"
                    rows="3">
          </textarea>
        </div>

      </section>
    </form>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
      <button type="button" class="btn btn-primary" [disabled]="!isValid"
              (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
    </div>
  </div>

</clr-modal>
