<page-header
  ng-if="$ctrl.state.viewReady"
  title="'Create a namespace'"
  breadcrumbs="[{ label:'Namespaces', link:'kubernetes.resourcePools' }, 'Create a namespace']"
  reload="true"
></page-header>

<kubernetes-view-loading view-ready="$ctrl.state.viewReady"></kubernetes-view-loading>

<div ng-if="$ctrl.state.viewReady">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-xs-12">
      <rd-widget>
        <rd-widget-body>
          <form class="form-horizontal" autocomplete="off" name="resourcePoolCreationForm">
            <!-- #region NAME INPUT -->
            <div class="form-group">
              <label for="pool_name" class="col-sm-3 col-lg-2 control-label required text-left">Name</label>
              <div class="col-sm-8">
                <input
                  type="text"
                  class="form-control"
                  name="pool_name"
                  ng-model="$ctrl.formValues.Name"
                  ng-pattern="/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/"
                  ng-change="$ctrl.onChangeName()"
                  placeholder="my-project"
                  data-cy="k8sNamespaceCreate-namespaceNameInput"
                  required
                  auto-focus
                />
                <span class="help-block">
                  <div class="form-group" ng-show="resourcePoolCreationForm.pool_name.$invalid || $ctrl.state.isAlreadyExist || $ctrl.state.hasPrefixKube">
                    <div class="col-sm-12 small text-warning">
                      <div ng-messages="resourcePoolCreationForm.pool_name.$error">
                        <p class="vertical-center" ng-message="required"><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>This field is required.</p>
                        <p class="vertical-center" ng-message="pattern"
                          ><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> This field must consist of lower case alphanumeric characters or '-', and contain at most 63
                          characters, and must start and end with an alphanumeric character.</p
                        >
                      </div>
                      <p class="vertical-center" ng-if="$ctrl.state.hasPrefixKube"
                        ><pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Prefix "kube-" is reserved for Kubernetes system namespaces.</p
                      >
                      <p class="vertical-center" ng-if="$ctrl.state.isAlreadyExist">
                        <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> A namespace with the same name already exists.
                      </p>
                    </div>
                  </div>
                </span>
              </div>
            </div>

            <div class="col-sm-12 !p-0">
              <annotations-be-teaser></annotations-be-teaser>
            </div>

            <!-- #endregion -->

            <div class="col-sm-12 form-section-title"> Quota </div>
            <!-- #region QUOTA -->
            <!-- quotas-switch -->
            <div class="form-group">
              <div class="col-sm-12 small text-muted">
                <p class="vertical-center">
                  <pr-icon class="vertical-center" icon="'info'" mode="'primary'"></pr-icon>
                  A namespace segments the underlying physical Kubernetes cluster into smaller virtual clusters. You should assign a capped limit of resources to this namespace or
                  disable for the safe operation of your platform.
                </p>
              </div>
              <div class="col-sm-12">
                <por-switch-field
                  data-cy="'k8sNamespaceCreate-resourceAssignmentToggle'"
                  label="'Resource assignment'"
                  label-class="'col-sm-3 col-lg-2'"
                  name="'k8s-resourcepool-resourcequota'"
                  checked="$ctrl.formValues.HasQuota"
                  on-change="($ctrl.onToggleResourceQuota)"
                ></por-switch-field>
              </div>
            </div>
            <!-- !quotas-switch -->
            <div ng-if="$ctrl.formValues.HasQuota">
              <div class="col-sm-12 form-section-title"> Resource limits </div>
              <div>
                <div class="form-group">
                  <span class="col-sm-12 small text-warning" ng-switch on="$ctrl.formValues.HasQuota && !$ctrl.isQuotaValid()">
                    <p class="vertical-center mb-0" ng-switch-when="true"
                      ><pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'"></pr-icon> At least a single limit must be set for the quota to be valid.
                    </p>
                    <p class="vertical-center mb-0" ng-switch-default></p>
                  </span>
                </div>

                <!-- memory-limit-input -->
                <div class="form-group !mb-0 flex flex-row">
                  <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left"> Memory limit (MB) </label>
                  <div class="col-xs-6">
                    <por-slider
                      min="$ctrl.defaults.MemoryLimit"
                      max="$ctrl.state.sliderMaxMemory"
                      step="128"
                      ng-if="$ctrl.state.sliderMaxMemory"
                      value="$ctrl.formValues.MemoryLimit"
                      on-change="($ctrl.handleMemoryLimitChange)"
                      visible-tooltip="true"
                      data-cy="k8sNamespaceCreate-memoryLimitSlider"
                    ></por-slider>
                  </div>
                  <div class="col-sm-2 vertical-center pt-6">
                    <input
                      name="memory_limit"
                      type="number"
                      min="{{ $ctrl.defaults.MemoryLimit }}"
                      max="{{ $ctrl.state.sliderMaxMemory }}"
                      class="form-control"
                      ng-model="$ctrl.formValues.MemoryLimit"
                      id="memory-limit"
                      data-cy="k8sNamespaceCreate-memoryLimitInput"
                      required
                    />
                  </div>
                </div>
                <div class="flex w-full flex-row">
                  <span class="col-sm-3 col-lg-2"></span>
                  <span class="help-block col-sm-9 col-lg-10">
                    <div ng-show="resourcePoolCreationForm.memory_limit.$invalid">
                      <div class="small text-warning">
                        <div ng-messages="resourcePoolCreationForm.pool_name.$error">
                          <p class="vertical-center"
                            ><pr-icon class="vertical-center" icon="'alert-triangle'" mode="'warning'"></pr-icon> Value must be between {{ $ctrl.defaults.MemoryLimit }} and
                            {{ $ctrl.state.sliderMaxMemory }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </span>
                </div>
                <!-- !memory-limit-input -->
                <!-- cpu-limit-input -->
                <div class="form-group flex flex-row">
                  <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left"> CPU limit </label>
                  <div class="col-xs-8">
                    <por-slider
                      min="$ctrl.defaults.CpuLimit"
                      max="$ctrl.state.sliderMaxCpu"
                      step="0.1"
                      ng-if="$ctrl.state.sliderMaxCpu"
                      value="$ctrl.formValues.CpuLimit"
                      on-change="($ctrl.handleCpuLimitChange)"
                      data-cy="k8sNamespaceCreate-cpuLimitSlider"
                      visible-tooltip="true"
                    ></por-slider>
                  </div>
                </div>
                <!-- !cpu-limit-input -->
              </div>
            </div>
            <!-- #endregion -->

            <!-- #region LOAD-BALANCERS -->
            <div class="col-sm-12 form-section-title"> Load balancers </div>

            <div class="form-group">
              <span class="col-sm-12 text-muted small vertical-center">
                <pr-icon icon="'info'" mode="'primary'" class="vertical-center"></pr-icon>
                You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of load
                balancers in this namespace.
              </span>
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <por-switch-field
                  data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'"
                  label="'Load Balancer quota'"
                  label-class="'col-sm-3 col-lg-2'"
                  name="'k8s-resourcepool-lbquota'"
                  feature-id="$ctrl.LBQuotaFeatureId"
                  checked="$ctrl.formValues.UseLoadBalancersQuota"
                  on-change="($ctrl.onToggleLoadBalancerQuota)"
                ></por-switch-field>
              </div>
            </div>
            <!-- #endregion -->

            <div ng-if="$ctrl.state.ingressAvailabilityPerNamespace">
              <!-- #region INGRESSES -->
              <div class="col-sm-12 form-section-title"> Networking </div>
              <ingress-class-datatable
                ng-if="$ctrl.state.ingressAvailabilityPerNamespace"
                on-change-controllers="($ctrl.onChangeIngressControllerAvailability)"
                ingress-controllers="$ctrl.ingressControllers"
                description="'Enable the ingress controllers that users can select when publishing applications in this namespace.'"
                no-ingress-controller-label="'No ingress controllers found in the cluster. Go to the cluster setup view to configure and allow the use of ingress controllers in the cluster.'"
                view="'namespace'"
              ></ingress-class-datatable>
              <!-- #endregion -->
            </div>

            <!-- #region REGISTRIES -->
            <div class="col-sm-12 form-section-title"> Registries </div>
            <div class="form-group">
              <div class="col-sm-12 small text-muted">
                <p class="vertical-center">
                  <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                  Define which registries can be used by users who have access to this namespace.
                </p>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-3 col-lg-2 control-label !pt-0 text-left" for="registries-selector"> Select registries </label>
              <div class="col-sm-8 col-lg-9">
                <span class="small text-muted" ng-if="!$ctrl.registries.length && $ctrl.state.isAdmin">
                  No registries available. Head over to the <a ui-sref="portainer.registries">registry view</a> to define a container registry.
                </span>
                <span class="small text-muted" ng-if="!$ctrl.registries.length && !$ctrl.state.isAdmin">
                  No registries available. Contact your administrator to create a container registry.
                </span>
                <create-namespace-registries-selector
                  input-id="'registries-selector'"
                  value="$ctrl.formValues.Registries"
                  on-change="($ctrl.onRegistriesChange)"
                  options="$ctrl.registries"
                >
                </create-namespace-registries-selector>
              </div>
            </div>
            <!-- #endregion -->

            <!-- #region STORAGES -->
            <div class="col-sm-12 form-section-title"> Storage </div>

            <div class="form-group">
              <span class="col-sm-12 text-muted small vertical-center">
                <pr-icon icon="'info'" mode="'primary'"></pr-icon>
                Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to effectively
                prevent the usage of a specific storage option inside this namespace.
              </span>
            </div>
            <div class="col-sm-12 form-section-title vertical-center">
              <pr-icon icon="'svg-route'"></pr-icon>
              standard
            </div>

            <storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"></storage-class-switch>

            <!-- #endregion -->

            <!-- summary -->
            <kubernetes-summary-view ng-if="resourcePoolCreationForm.$valid && !$ctrl.isCreateButtonDisabled()" form-values="$ctrl.formValues"></kubernetes-summary-view>
            <!-- !summary -->

            <div class="col-sm-12 form-section-title"> Actions </div>
            <!-- #region ACTIONS -->
            <div class="form-group">
              <div class="col-sm-12">
                <button
                  type="button"
                  class="btn btn-primary btn-sm !ml-0"
                  ng-disabled="!resourcePoolCreationForm.$valid || $ctrl.isCreateButtonDisabled()"
                  ng-click="$ctrl.createResourcePool()"
                  button-spinner="$ctrl.state.actionInProgress"
                >
                  <span ng-hide="$ctrl.state.actionInProgress" data-cy="k8sNamespace-createNamespaceButton">Create namespace</span>
                  <span ng-show="$ctrl.state.actionInProgress">Creation in progress...</span>
                </button>
              </div>
            </div>

            <!-- #endregion -->
          </form>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>
