<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'" #modal>
  <h3 class="modal-title">{{nsTitle}}
    <wayne-modal-operate [modal]="modal" *ngIf="opened"></wayne-modal-operate>
  </h3>
  <div class="modal-body">
    <form #namespaceForm="ngForm">
      <section class="form-block">
        <div class="form-group" style="padding-left: 135px;">
          <label for="ns_name" class="clr-col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
          <label for="ns_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                 class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
            <input type="text" id="ns_name" [(ngModel)]="ns.name"
                   name="ns_name" size="36"
                   required
                   pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                   maxlength="24"
                   (keyup)='handleValidation()'>
            <span class="tooltip-content">
              命名空间名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
            </span>
          </label>
          <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
        </div>
        <div class="form-group" style="padding-left: 135px;">
          <label for="kubernetes_namespace" class="clr-col-md-3 form-group-label-override required">K8S命名空间</label>
          <input type="text"
                 id="kubernetes_namespace"
                 [(ngModel)]="ns.kubeNamespace"
                 name="kubernetes_namespace"
                 size="36"
                 required
                 pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                 maxlength="36">
          <div class="table-search-right">
            <div class="toggle-switch">
              <input type="checkbox" id="toggle_1" [(ngModel)]="autoCreate" [ngModelOptions]="{standalone: true}">
              <label for="toggle_1">自动创建</label>
            </div>
          </div>
        </div>
        <div *ngIf="!showACE">
          <div   class="form-group" style="padding-left: 135px;" *ngFor="let cluster of clusters;let i=index">
          <label *ngIf="i === 0" class="clr-col-md-3 form-group-label-override required">可用机房</label>
          <div class="checkbox-inline" style="margin-top: 0.1rem;margin-bottom: 0.1rem;">
            <div class="checkbox">
              <input [(ngModel)]="clusterMetas[cluster.name].checked"
                     type="checkbox"
                     id="{{cluster.name}}-check"
                     name="{{cluster.name}}-check">
              <label style="width: 100px" for="{{cluster.name}}-check">{{cluster.name}}</label>
              <input style="width: 175px" placeholder="CPU限制(核)0代表无限制"
                     [(ngModel)]="clusterMetas[cluster.name].cpu"
                     id="{{cluster.name}}-cpu"
                     name="{{cluster.name}}-cpu"
                     type="number">
              <input style="width: 175px" placeholder="内存限制(G)0代表无限制"
                     [(ngModel)]="clusterMetas[cluster.name].memory"
                     id="{{cluster.name}}-memory"
                     name="{{cluster.name}}-memory"
                     type="number">
            </div>
            </div>
          </div>
        </div>
        <div *ngIf="!showACE" class="container-box">
          <label style="padding-left: 10px;color: #000;font-size: 0.65rem;padding-bottom: 20px;"
                 class="form-group-label-override">环境变量配置
            <button (click)="onAddEnv()" style="margin-left: 10px;" class="wayne-button primary">
              <clr-icon shape="add"></clr-icon>
              添加
            </button>
          </label>
          <div *ngFor="let env of ns.metaDataObj.env; let i = index" class="form-group" style="padding-left: 135px;">
            <label class="clr-col-md-3 form-group-label-override">Env</label>
            <input [(ngModel)]="env.name"
                   style="width: 200px"
                   type="text"
                   placeholder="环境变量名称"
                   name="kubernetes_env_name_{{i}}">
            <input [(ngModel)]="env.value"
                   style="margin-left:30px;width: 200px"
                   type="text"
                   placeholder="环境变量值"
                   name="kubernetes_env_value_{{i}}">
            <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i)" shape="trash" title="删除环境变量"
                      class="is-solid"></clr-icon>
          </div>
        </div>
        <div *ngIf="!showACE" class="container-box">
          <label style="padding-left: 10px;color: #000;font-size: 0.65rem;padding-bottom: 20px;"
                 class="form-group-label-override">Service 注解配置
            <button (click)="onAddServiceAnnotations()" style="margin-left: 10px;" class="wayne-button primary">
              <clr-icon shape="add"></clr-icon>
              添加
            </button>
          </label>
          <div *ngFor="let svc of serviceAnnotations; let i = index" class="form-group" style="padding-left: 135px;">
            <label class="clr-col-md-3 form-group-label-override">注解</label>
            <input [(ngModel)]="serviceAnnotations[i].key"
                   style="width: 200px"
                   type="text"
                   placeholder="Service 注解名字"
                   name="kubernetes_service_annotation_key_{{i}}">
            <input [(ngModel)]="serviceAnnotations[i].value"
                   style="margin-left:30px;width: 200px"
                   type="text"
                   placeholder="Service 注解值"
                   name="kubernetes_service_annotation_value_{{i}}">
            <clr-icon style="margin-top: 10px" (click)="onDeleteServiceAnnotations(i)" shape="trash" title="删除 Service 注解"
                      class="is-solid"></clr-icon>
          </div>
        </div>
        <div *ngIf="!showACE" class="container-box">
          <label style="padding-left: 10px;color: #000;font-size: 0.65rem;padding-bottom: 20px;"
                 class="form-group-label-override">Ingress 注解配置
            <button (click)="onAddIngressAnnotations()" style="margin-left: 10px;" class="wayne-button primary">
              <clr-icon shape="add"></clr-icon>
              添加
            </button>
          </label>
          <div *ngFor="let ing of ingressAnnotations; let i = index" class="form-group" style="padding-left: 135px;">
            <label class="clr-col-md-3 form-group-label-override">注解</label>
            <input [(ngModel)]="ingressAnnotations[i].key"
                   style="width: 200px"
                   type="text"
                   placeholder="Ingress 注解名称"
                   name="kubernetes_ingress_annotation_key_{{i}}">
            <input [(ngModel)]="ingressAnnotations[i].value"
                   style="margin-left:30px;width: 200px"
                   type="text"
                   placeholder="Ingress 注解值"
                   name="kubernetes_ingress_annotation_value_{{i}}">
            <clr-icon style="margin-top: 10px" (click)="onDeleteIngressAnnotations(i)" shape="trash" title="删除注解"
                      class="is-solid"></clr-icon>
          </div>
        </div>
        <div *ngIf="!showACE" class="container-box">
          <label style="padding-left: 10px;color: #000;font-size: 0.65rem;padding-bottom: 20px;"
                 class="form-group-label-override">ImagePullSecrets
            <button (click)="onAddSecret()" style="margin-left: 10px;" class="wayne-button primary">
              <clr-icon shape="add"></clr-icon>
              添加
            </button>
          </label>
          <div *ngFor="let imagePullSecret of ns.metaDataObj.imagePullSecrets; let i = index" class="form-group"
               style="padding-left: 135px;">
            <label class="clr-col-md-3 form-group-label-override">Secret</label>
            <input [(ngModel)]="imagePullSecret.name"
                   type="text"
                   style="width: 500px"
                   placeholder="Secret名称"
                   name="kubernetes_imagepullsecrets_{{i}}">
            <clr-icon style="margin-top: 10px" (click)="onDeleteSecret(i)" shape="trash" title="删除Secret"
                      class="is-solid"></clr-icon>
          </div>
        </div>
        <div [style.display]="showACE ? 'block' : 'none'" class="container-box">
          <div class="form-group" style="padding-left: 135px;">
            <label class="clr-col-md-3 form-group-label-override">元数据</label>
            <wayne-ace-editor-box></wayne-ace-editor-box>
          </div>
        </div>
      </section>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
    <button type="button" class="btn btn-primary" (click)="onEditMetadata()">{{'BUTTON.EXCHANGE_EDIT_MODE' | translate}}</button>
    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
  </div>
</clr-modal>


