<kubernetes-view-header title="Advanced deployment" state="kubernetes.deploy" view-ready="ctrl.state.viewReady">
  Deploy Kubernetes resources
</kubernetes-view-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">
    <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> <i class="fa fa-code space-right" aria-hidden="true"></i> Deploy </uib-tab-heading>

              <form class="form-horizontal" style="margin-top: 20px;">
                <div class="form-group" ng-if="ctrl.formValues.Namespace">
                  <label for="target_node" class="col-lg-1 col-sm-2 control-label text-left">Namespace</label>
                  <div class="col-lg-11 col-sm-10">
                    <select 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">
                  <div class="col-sm-12 small text-muted">
                    <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                    You do not have access to any namespace. Contact your administrator to get access to a namespace.
                  </div>
                </div>

                <div class="col-sm-12 form-section-title">
                  Build method
                </div>
                <box-selector radio-name="method" ng-model="ctrl.state.BuildMethod" options="ctrl.methodOptions" data-cy="k8sAppDeploy-buildSelector"></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" ng-model="ctrl.state.DeployType" options="ctrl.deployOptions" data-cy="k8sAppDeploy-deploymentSelector"></box-selector>
                </div>

                <!-- repository -->
                <div ng-show="ctrl.state.BuildMethod === ctrl.BuildMethods.GIT">
                  <div class="col-sm-12 form-section-title">
                    Git repository
                  </div>
                  <git-form-url-field value="ctrl.formValues.RepositoryURL" on-change="(ctrl.onRepoUrlChange)"></git-form-url-field>
                  <git-form-ref-field value="ctrl.formValues.RepositoryReferenceName" on-change="(ctrl.onRepoRefChange)"></git-form-ref-field>
                  <div class="form-group">
                    <span class="col-sm-12 text-muted small">
                      Indicate the path to the yaml file from the root of your repository.
                    </span>
                  </div>
                  <div class="form-group">
                    <label for="stack_repository_path" class="col-sm-2 control-label text-left">Manifest path</label>
                    <div class="col-sm-10">
                      <input
                        type="text"
                        class="form-control"
                        ng-model="ctrl.formValues.FilePathInRepository"
                        id="stack_manifest_path"
                        placeholder="deployment.yml"
                        data-cy="k8sAppDeploy-gitManifestPath"
                      />
                    </div>
                  </div>
                  <git-form-auth-fieldset model="ctrl.formValues" on-change="(ctrl.onChangeFormValues)"></git-form-auth-fieldset>
                </div>
                <!-- !repository -->

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

                <!-- editor -->
                <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>
                        <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                        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 && ctrl.state.BuildMethod === ctrl.BuildMethods.WEB_EDITOR"
                    >
                      <p>
                        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                        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>

                <!-- !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-1 control-label text-left">URL</label>
                    <div class="col-sm-11">
                      <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="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> <i class="fa fa-file space-right" aria-hidden="true"></i> Logs </uib-tab-heading>
              <form class="form-horizontal" style="margin-top: 20px;">
                <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>