<rd-header>
  <rd-header-title title-text="Create endpoint"></rd-header-title>
  <rd-header-content> <a ui-sref="portainer.endpoints">Endpoints</a> &gt; Add endpoint </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="endpointCreationForm">
          <div class="col-sm-12 form-section-title">
            Environment type
          </div>
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0;">
            <div class="boxselector_wrapper">
              <div ng-click="resetEndpointURL()">
                <input type="radio" id="agent_endpoint" ng-model="state.EnvironmentType" value="agent" />
                <label for="agent_endpoint" data-cy="endpointCreate-agentSelectButton">
                  <div class="boxselector_header">
                    <i class="fa fa-bolt" aria-hidden="true" style="margin-right: 2px;"></i>
                    Agent
                  </div>
                  <p>Portainer agent</p>
                </label>
              </div>
              <div ng-click="setDefaultPortainerInstanceURL()">
                <input type="radio" id="edge_agent_endpoint" ng-model="state.EnvironmentType" value="edge_agent" />
                <label for="edge_agent_endpoint" data-cy="endpointCreate-edgeAgentSelectButton">
                  <div class="boxselector_header">
                    <i class="fa fa-cloud" aria-hidden="true" style="margin-right: 2px;"></i>
                    Edge Agent
                  </div>
                  <p>Portainer Edge agent</p>
                </label>
              </div>
              <div ng-click="resetEndpointURL()">
                <input type="radio" id="docker_endpoint" ng-model="state.EnvironmentType" value="docker" />
                <label for="docker_endpoint" data-cy="endpointCreate-dockerSelectButton">
                  <div class="boxselector_header">
                    <i class="fab fa-docker" aria-hidden="true" style="margin-right: 2px;"></i>
                    Docker
                  </div>
                  <p>Directly connect to the Docker API</p>
                </label>
              </div>
              <div ng-click="resetEndpointURL()">
                <input type="radio" id="kubernetes_endpoint" ng-model="state.EnvironmentType" value="kubernetes" />
                <label for="kubernetes_endpoint" data-cy="endpointCreate-kubeSelectButton">
                  <div class="boxselector_header">
                    <i class="fas fa-dharmachakra" aria-hidden="true" style="margin-right: 2px;"></i>
                    Kubernetes
                  </div>
                  <p>Local Kubernetes environment</p>
                </label>
              </div>
              <div>
                <input type="radio" id="azure_endpoint" ng-model="state.EnvironmentType" value="azure" />
                <label for="azure_endpoint" data-cy="endpointCreate-azureSelectButton">
                  <div class="boxselector_header">
                    <i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px;"></i>
                    Azure
                  </div>
                  <p>Connect to Microsoft Azure ACI</p>
                </label>
              </div>
            </div>
          </div>
          <div ng-if="state.EnvironmentType === 'docker'">
            <div class="col-sm-12 form-section-title">
              Important notice
            </div>
            <div class="form-group">
              <p class="col-sm-12 text-muted small">
                You can connect Portainer to a Docker environment via socket or via TCP. You can find more information about how to expose the Docker API over TCP
                <a href="https://docs.docker.com/engine/security/https/"> in the Docker documentation</a>.
              </p>

              <p class="col-sm-12 text-muted small">
                When using the socket, ensure that you have started the Portainer container with the following Docker flag
                <code> -v "/var/run/docker.sock:/var/run/docker.sock" </code>
                (on Linux) or
                <code> -v \.\pipe\docker_engine:\.\pipe\docker_engine </code>
                (on Windows).
              </p>
            </div>
          </div>
          <div ng-if="state.EnvironmentType === 'agent'">
            <div class="col-sm-12 form-section-title">
              Information
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                Ensure that you have deployed the Portainer agent in your cluster first. Refer to the platform related command below to deploy it.
                <div class="input-group input-group-sm" style="margin-top: 10px; margin-bottom: 10px;">
                  <div class="btn-group btn-group-sm">
                    <label class="btn btn-primary" ng-model="state.PlatformType" uib-btn-radio="'linux'"><i class="fab fa-linux" style="margin-right: 2px;"></i> Linux</label>
                    <label class="btn btn-primary" ng-model="state.PlatformType" uib-btn-radio="'windows'"><i class="fab fa-windows" style="margin-right: 2px;"></i> Windows</label>
                  </div>
                </div>
                <div style="margin-top: 10px;">
                  <uib-tabset active="state.deploymentTab">
                    <uib-tab index="0" ng-if="state.PlatformType === 'linux'" heading="Kubernetes via load balancer">
                      <code style="display: block; white-space: pre-wrap; padding: 16px 90px;">{{ deployCommands.kubeLoadBalancer }}</code>
                    </uib-tab>

                    <uib-tab index="1" ng-if="state.PlatformType === 'linux'" heading="Kubernetes via node port">
                      <code style="display: block; white-space: pre-wrap; padding: 16px 90px;">{{ deployCommands.kubeNodePort }}</code>
                    </uib-tab>

                    <uib-tab index="2" heading="Docker Swarm">
                      <code ng-if="state.PlatformType === 'linux'" style="display: block; white-space: pre-wrap; padding: 16px 90px;">{{ deployCommands.agentLinux }}</code>
                      <code ng-if="state.PlatformType === 'windows'" style="display: block; white-space: pre-wrap; padding: 16px 90px;">{{ deployCommands.agentWindows }}</code>
                    </uib-tab>
                  </uib-tabset>
                  <div style="margin-top: 10px;">
                    <span class="btn btn-primary btn-sm space-left" ng-click="copyAgentCommand()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy command</span>
                    <span>
                      <i id="copyNotification" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
                    </span>
                  </div>
                </div>
              </span>
            </div>
          </div>
          <div ng-if="state.EnvironmentType === 'edge_agent'">
            <div class="col-sm-12 form-section-title">
              Information
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                <p>
                  Allows you to create an endpoint that can be registered with an Edge agent. The Edge agent will initiate the communications with the Portainer instance. All the
                  required information on how to connect an Edge agent to this endpoint will be available after endpoint creation.
                </p>
                <p> You can read more about the Edge agent in the userguide available <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a> </p>
              </span>
            </div>
          </div>
          <div ng-if="state.EnvironmentType === 'kubernetes'">
            <div class="col-sm-12 form-section-title">
              Important notice
            </div>
            <div class="form-group">
              <p class="col-sm-12 text-muted small">
                This will allow you to manage the Kubernetes environment where Portainer is running.
              </p>

              <p class="col-sm-12 text-muted small">
                <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                In order to manage a remote Kubernetes environment, please use the Agent or Edge agent options.
              </p>
            </div>
          </div>
          <div ng-if="state.EnvironmentType === 'azure'">
            <div class="col-sm-12 form-section-title">
              Information
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <span class="small">
                  <p class="text-muted"> <i class="fa fa-flask orange-icon" aria-hidden="true" style="margin-right: 2px;"></i> This feature is experimental. </p>
                  <p class="text-primary">
                    Connect to Microsoft Azure to manage Azure Container Instances (ACI).
                  </p>
                  <p class="text-muted">
                    <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                    Have a look at
                    <a href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-create-service-principal-portal" target="_blank"
                      >the Azure documentation</a
                    >
                    to retrieve the credentials required below.
                  </p>
                </span>
              </div>
            </div>
          </div>
          <div class="col-sm-12 form-section-title">
            Environment details
          </div>
          <!-- name-input -->
          <div class="form-group">
            <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input
                type="text"
                class="form-control"
                name="container_name"
                ng-model="formValues.Name"
                placeholder="e.g. docker-prod01 / kubernetes-cluster01"
                required
                auto-focus
                data-cy="endpointCreate-nameInput"
              />
            </div>
          </div>
          <div class="form-group" ng-show="endpointCreationForm.container_name.$invalid">
            <div class="col-sm-12 small text-warning">
              <div ng-messages="endpointCreationForm.container_name.$error">
                <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
              </div>
            </div>
          </div>
          <!-- !name-input -->
          <!-- connect-via-socket-input -->
          <div ng-if="state.EnvironmentType === 'docker'">
            <div class="form-group" style="padding-left: 15px;">
              <label for="connect_socket" class="col-sm_12 control-label text-left">
                Connect via socket
              </label>
              <label class="switch" style="margin-left: 20px;">
                <input type="checkbox" ng-model="formValues.ConnectSocket" /><i data-cy="endpointCreate-connectSocketSwitch"></i>
              </label>
            </div>
          </div>

          <div ng-if="state.EnvironmentType === 'docker' && formValues.ConnectSocket">
            <div class="form-group" style="padding-left: 15px;">
              <label for="override_socket" class="col-sm_12 control-label text-left">
                Override default socket path
              </label>
              <label class="switch" style="margin-left: 20px;">
                <input type="checkbox" ng-model="formValues.OverrideSocket" /><i data-cy="endpointCreate-overrideSocketSwitch"></i>
              </label>
            </div>

            <div ng-if="formValues.OverrideSocket">
              <div class="form-group">
                <label for="socket_path" class="col-sm-3 col-lg-2 control-label text-left">
                  Socket path
                  <portainer-tooltip position="bottom" message="Path to the Docker socket. Remember to bind-mount the socket, see the important notice above for more information.">
                  </portainer-tooltip>
                </label>
                <div class="col-sm-9 col-lg-10">
                  <input
                    type="text"
                    class="form-control"
                    name="socket_path"
                    ng-model="formValues.SocketPath"
                    placeholder="e.g. /var/run/docker.sock (on Linux) or //./pipe/docker_engine (on Windows)"
                    required
                    data-cy="endpointCreate-socketPathInput"
                  />
                </div>
              </div>
              <div class="form-group" ng-show="endpointCreationForm.socket_path.$invalid">
                <div class="col-sm-12 small text-warning">
                  <div ng-messages="endpointCreationForm.socket_path.$error">
                    <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- !connect-via-socket-input -->
          <!-- endpoint-url-input -->
          <div ng-if="(state.EnvironmentType === 'docker' && !formValues.ConnectSocket) || state.EnvironmentType === 'agent'">
            <div class="form-group">
              <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
                Endpoint URL
                <portainer-tooltip
                  position="bottom"
                  message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."
                >
                </portainer-tooltip>
              </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  ng-if="state.EnvironmentType === 'docker'"
                  type="text"
                  class="form-control"
                  name="endpoint_url"
                  ng-model="formValues.URL"
                  placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375"
                  required
                  data-cy="endpointCreate-endpointUrlDockerInput"
                />
                <input
                  ng-if="state.EnvironmentType === 'agent'"
                  type="text"
                  class="form-control"
                  name="endpoint_url"
                  ng-model="formValues.URL"
                  placeholder="e.g. 10.0.0.10:9001 or tasks.portainer_agent:9001"
                  required
                  data-cy="endpointCreate-endpointUrlAgentInput"
                />
              </div>
            </div>
            <div class="form-group" ng-show="endpointCreationForm.endpoint_url.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="endpointCreationForm.endpoint_url.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
          </div>
          <!-- !endpoint-url-input -->
          <!-- portainer-instance-input -->
          <div ng-if="state.EnvironmentType === 'edge_agent'">
            <div class="form-group">
              <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
                Portainer server URL
                <portainer-tooltip position="bottom" message="URL of the Portainer instance that the agent will use to initiate the communications."></portainer-tooltip>
              </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  class="form-control"
                  name="endpoint_url"
                  ng-model="formValues.URL"
                  placeholder="e.g. 10.0.0.10:9000 or portainer.mydomain.com"
                  required
                  data-cy="endpointCreate-portainerServerUrlInput"
                />
              </div>
            </div>
            <div class="form-group" ng-show="endpointCreationForm.endpoint_url.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="endpointCreationForm.endpoint_url.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
            <!-- !portainer-instance-input -->
            <div class="form-group">
              <label for="edge_checkin" class="col-sm-2 control-label text-left">
                Poll frequency
                <portainer-tooltip
                  position="bottom"
                  message="Interval used by this Edge agent to check in with the Portainer instance. Affects Edge endpoint management and Edge compute features."
                >
                </portainer-tooltip>
              </label>
              <div class="col-sm-10">
                <select
                  id="edge_checkin"
                  class="form-control"
                  ng-model="formValues.CheckinInterval"
                  ng-options="+(opt.value) as opt.key for opt in state.availableEdgeAgentCheckinOptions"
                  data-cy="endpointCreate-pollFrequencySelect"
                ></select>
              </div>
            </div>
          </div>
          <!-- endpoint-public-url-input -->
          <div ng-if="state.EnvironmentType === 'docker' || state.EnvironmentType === 'agent'">
            <div class="form-group">
              <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
                Public IP
                <portainer-tooltip
                  position="bottom"
                  message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the endpoint URL."
                >
                </portainer-tooltip>
              </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  class="form-control"
                  id="endpoint_public_url"
                  ng-model="formValues.PublicURL"
                  placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com"
                  data-cy="endpointCreate-publicIpInput"
                />
              </div>
            </div>
          </div>
          <!-- !endpoint-public-url-input -->
          <!-- azure-details -->
          <div ng-if="state.EnvironmentType === 'azure'">
            <!-- applicationId-input -->
            <div class="form-group">
              <label for="azure_credential_appid" class="col-sm-3 col-lg-2 control-label text-left">Application ID</label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  class="form-control"
                  name="azure_credential_appid"
                  ng-model="formValues.AzureApplicationId"
                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                  required
                  data-cy="endpointCreate-azureAppIdInput"
                />
              </div>
            </div>
            <div class="form-group" ng-show="endpointCreationForm.azure_credential_appid.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="endpointCreationForm.azure_credential_appid.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
            <!-- !applicationId-input -->
            <!-- tenantId-input -->
            <div class="form-group">
              <label for="azure_credential_tenantid" class="col-sm-3 col-lg-2 control-label text-left">Tenant ID</label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  class="form-control"
                  name="azure_credential_tenantid"
                  ng-model="formValues.AzureTenantId"
                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                  required
                  data-cy="endpointCreate-azureTenantIdInput"
                />
              </div>
            </div>
            <div class="form-group" ng-show="endpointCreationForm.azure_credential_tenantid.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="endpointCreationForm.azure_credential_tenantid.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
            <!-- !tenantId-input -->
            <!-- authenticationkey-input -->
            <div class="form-group">
              <label for="azure_credential_authkey" class="col-sm-3 col-lg-2 control-label text-left">Authentication key</label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  class="form-control"
                  name="azure_credential_authkey"
                  ng-model="formValues.AzureAuthenticationKey"
                  placeholder="cOrXoK/1D35w8YQ8nH1/8ZGwzz45JIYD5jxHKXEQknk="
                  required
                  data-cy="endpointCreate-azureAuthKeyInput"
                />
              </div>
            </div>
            <div class="form-group" ng-show="endpointCreationForm.azure_credential_authkey.$invalid">
              <div class="col-sm-12 small text-warning">
                <div ng-messages="endpointCreationForm.azure_credential_authkey.$error">
                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                </div>
              </div>
            </div>
            <!-- !authenticationkey-input -->
          </div>
          <!-- !azure-details -->
          <!-- endpoint-security -->
          <por-endpoint-security ng-if="state.EnvironmentType === 'docker' && !formValues.ConnectSocket" form-data="formValues.SecurityFormData"></por-endpoint-security>
          <!-- !endpoint-security -->
          <div class="col-sm-12 form-section-title">
            Metadata
          </div>
          <!-- group -->
          <div class="form-group">
            <label for="endpoint_group" class="col-sm-3 col-lg-2 control-label text-left">
              Group
            </label>
            <div class="col-sm-9 col-lg-10">
              <select
                ng-options="group.Id as group.Name for group in groups"
                ng-model="formValues.GroupId"
                id="endpoint_group"
                class="form-control"
                data-cy="endpointCreate-endpointGroup"
              ></select>
            </div>
          </div>
          <!-- !group -->
          <!-- tags -->
          <div class="form-group">
            <tag-selector ng-if="formValues && availableTags" tags="availableTags" model="formValues.TagIds" allow-create="state.allowCreateTag" on-create="(onCreateTag)">
            </tag-selector>
          </div>
          <!-- !tags -->
          <div class="col-sm-12 form-section-title">
            Actions
          </div>
          <!-- actions -->
          <div class="form-group">
            <div class="col-sm-12">
              <button
                ng-if="state.EnvironmentType === 'docker'"
                type="submit"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid || (formValues.TLS && ((formValues.TLSVerify && !formValues.TLSCACert) || (formValues.TLSClientCert && (!formValues.TLSCert || !formValues.TLSKey))))"
                ng-click="addDockerEndpoint()"
                button-spinner="state.actionInProgress"
                data-cy="endpointCreate-createDockerEndpoint"
              >
                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
                <span ng-show="state.actionInProgress">Creating endpoint...</span>
              </button>
              <button
                ng-if="state.EnvironmentType === 'agent'"
                type="submit"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid"
                ng-click="addAgentEndpoint()"
                button-spinner="state.actionInProgress"
                data-cy="endpointCreate-createAgentEndpoint"
              >
                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
                <span ng-show="state.actionInProgress">Creating endpoint...</span>
              </button>
              <button
                ng-if="state.EnvironmentType === 'edge_agent'"
                type="submit"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid"
                ng-click="addEdgeAgentEndpoint()"
                button-spinner="state.actionInProgress"
                data-cy="endpointCreate-createEdgeAgentEndpoint"
              >
                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
                <span ng-show="state.actionInProgress">Creating endpoint...</span>
              </button>
              <button
                ng-if="state.EnvironmentType === 'kubernetes'"
                type="submit"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid"
                ng-click="addKubernetesEndpoint()"
                button-spinner="state.actionInProgress"
              >
                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
                <span ng-show="state.actionInProgress">Creating endpoint...</span>
              </button>
              <button
                ng-if="state.EnvironmentType === 'azure'"
                type="submit"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !endpointCreationForm.$valid"
                ng-click="addAzureEndpoint()"
                button-spinner="state.actionInProgress"
                data-cy="endpointCreate-createAzureEndpoint"
              >
                <span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Add endpoint</span>
                <span ng-show="state.actionInProgress">Creating endpoint...</span>
              </button>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
