<page-header ng-if="ctrl.state.viewReady" title="'Advanced deployment'" breadcrumbs="['Deploy Kubernetes resources']" reload="true"></page-header>

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

<div ng-if="ctrl.state.viewReady">
  <kubernetes-feedback-panel></kubernetes-feedback-panel>

  <div class="row kubernetes-deploy">
    <div class="col-sm-12">
      <rd-widget>
        <rd-widget-body>
          <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
            <uib-tab index="0">
              <uib-tab-heading> <pr-icon icon="'code'" feather="true"></pr-icon> Deploy </uib-tab-heading>
              <div class="col-sm-12 form-section-title"> Namespace </div>
              <form class="form-horizontal mt-3" name="deploymentForm">
                <div class="form-group" ng-if="ctrl.formValues.Namespace">
                  <label for="target_node" class="col-lg-2 col-sm-3 control-label text-left">Namespace</label>
                  <div class="col-sm-8">
                    <select
                      ng-disabled="ctrl.formValues.namespace_toggle"
                      class="form-control"
                      ng-model="ctrl.formValues.Namespace"
                      ng-options="namespace.Name as namespace.Name for namespace in ctrl.namespaces"
                    ></select>
                  </div>
                </div>
                <div class="form-group" ng-if="ctrl.formValues.Namespace">
                  <label for="toggle_logo" class="col-lg-2 col-sm-3 control-label text-left">
                    Use namespace(s) specified from manifest
                    <portainer-tooltip message="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'">
                    </portainer-tooltip>
                  </label>
                  <div class="col-sm-8 vertical-center pt-3">
                    <label class="switch">
                      <input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" />
                      <span class="slider round"></span>
                    </label>
                    <!-- <span class="ml-2 mb-1 switch-values" ng-if="ctrl.formValues.namespace_toggle">Yes</span>
                    <span class="ml-2 mb-1 switch-values" ng-if="!ctrl.formValues.namespace_toggle">No</span> -->
                  </div>
                </div>
                <div class="form-group" ng-if="!ctrl.formValues.Namespace">
                  <div class="col-sm-12 small text-muted">
                    <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                    You do not have access to any namespace. Contact your administrator to get access to a namespace.
                  </div>
                </div>

                <div class="form-group">
                  <label for="stack_name" class="col-lg-2 col-sm-3 control-label text-left">Name</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control" ng-model="ctrl.formValues.StackName" id="stack_name" placeholder="my-app" auto-focus />
                  </div>
                </div>

                <div class="col-sm-12 form-section-title"> Build method </div>
                <box-selector
                  radio-name="'method'"
                  value="ctrl.state.BuildMethod"
                  options="ctrl.methodOptions"
                  data-cy="k8sAppDeploy-buildSelector"
                  on-change="(ctrl.onChangeMethod)"
                ></box-selector>

                <div ng-if="ctrl.state.BuildMethod !== ctrl.BuildMethods.CUSTOM_TEMPLATE">
                  <div class="col-sm-12 form-section-title"> Deployment type </div>
                  <box-selector
                    radio-name="'deploy'"
                    value="ctrl.state.DeployType"
                    options="ctrl.deployOptions"
                    data-cy="k8sAppDeploy-deploymentSelector"
                    on-change="(ctrl.onChangeDeployType)"
                  ></box-selector>
                </div>

                <!-- repository -->
                <git-form
                  ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT"
                  model="ctrl.formValues"
                  on-change="(ctrl.onChangeFormValues)"
                  additional-file="true"
                  auto-update="true"
                  show-auth-explanation="true"
                  path-text-title="Manifest path"
                  path-placeholder="deployment.yml"
                  deploy-method="{{ ctrl.DeployMethod }}"
                ></git-form>
                <!-- !repository -->

                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE">
                  <custom-template-selector
                    new-template-path="kubernetes.templates.custom.new"
                    stack-type="3"
                    on-change="(ctrl.onChangeTemplateId)"
                    value="ctrl.state.templateId"
                  ></custom-template-selector>

                  <custom-templates-variables-field
                    ng-if="ctrl.isTemplateVariablesEnabled && ctrl.state.template"
                    definitions="ctrl.state.template.Variables"
                    value="ctrl.formValues.Variables"
                    on-change="(ctrl.onChangeTemplateVariables)"
                  ></custom-templates-variables-field>
                </div>

                <!-- editor -->
                <div class="mt-4">
                  <web-editor-form
                    ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR || (ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId)"
                    identifier="kubernetes-deploy-editor"
                    value="ctrl.formValues.EditorContent"
                    on-change="(ctrl.onChangeFileContent)"
                    ng-required="true"
                    yml="true"
                    placeholder="# Define or paste the content of your manifest file here"
                  >
                    <editor-description>
                      <span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.COMPOSE">
                        <p>
                          <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
                          Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that
                          not all the Compose format options are supported by Kompose at the moment.
                        </p>
                        <p>
                          You can get more information about Compose file format in the
                          <a href="https://docs.docker.com/compose/compose-file/" target="_blank">official documentation</a>.
                        </p>
                      </span>
                      <span class="col-sm-12 text-muted small" ng-show="ctrl.state.DeployType === ctrl.ManifestDeployTypes.KUBERNETES">
                        <p>
                          <pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
                          This feature allows you to deploy any kind of Kubernetes resource in this environment (Deployment, Secret, ConfigMap...).
                        </p>
                        <p>
                          You can get more information about Kubernetes file format in the
                          <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
                        </p>
                      </span>
                    </editor-description>
                  </web-editor-form>
                </div>
                <!-- !editor -->

                <!-- url -->
                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.URL">
                  <div class="col-sm-12 form-section-title"> URL </div>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small"> Indicate the URL to the manifest. </span>
                  </div>
                  <div class="form-group">
                    <label for="manifest_url" class="col-sm-3 col-lg-2 control-label text-left">URL</label>
                    <div class="col-sm-8">
                      <input
                        type="text"
                        class="form-control"
                        ng-model="ctrl.formValues.ManifestURL"
                        id="manifest_url"
                        placeholder="https://raw.githubusercontent.com/kubernetes/website/main/content/en/examples/controllers/nginx-deployment.yaml"
                        data-cy="k8sAppDeploy-urlFileUrl"
                      />
                    </div>
                  </div>
                </div>
                <!-- !url -->

                <!-- actions -->
                <div class="col-sm-12 form-section-title"> Actions </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <button
                      type="button"
                      class="btn btn-primary btn-sm"
                      ng-disabled="!deploymentForm.$valid ||ctrl.disableDeploy()"
                      ng-click="ctrl.deploy()"
                      button-spinner="ctrl.state.actionInProgress"
                      data-cy="k8sAppDeploy-deployButton"
                      analytics-on
                      analytics-category="kubernetes"
                      analytics-event="kubernetes-application-advanced-deployment"
                      analytics-properties="ctrl.buildAnalyticsProperties()"
                    >
                      <span ng-hide="ctrl.state.actionInProgress">Deploy</span>
                      <span ng-show="ctrl.state.actionInProgress">Deployment in progress...</span>
                    </button>
                  </div>
                </div>
                <!-- !actions -->
              </form>
            </uib-tab>

            <uib-tab index="1" disable="ctrl.state.tabLogsDisabled">
              <uib-tab-heading> <pr-icon icon="'file-text'" feather="true"></pr-icon> Logs </uib-tab-heading>
              <form class="form-horizontal mt-3">
                <div class="form-group" ng-if="ctrl.state.activeTab === 1">
                  <div class="col-sm-12">
                    <code-editor identifier="kubernetes-deploy-logs" read-only="true" yml="false" value="ctrl.errorLog"></code-editor>
                  </div>
                </div>
              </form>
            </uib-tab>
          </uib-tabset>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>
</div>