<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">
                  <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">
                  <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">
                  <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>
          </div>
          <div ng-if="state.EnvironmentType === 'docker'">
            <div class="col-sm-12 form-section-title">
              Important notice
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                The Docker API must be exposed over TCP. You can find more information about how to expose the Docker API over TCP
                <a href="https://docs.docker.com/engine/security/https/" target="_blank">in the Docker documentation</a>.
              </span>
            </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. You can use execute the following command on any manager node to deploy it.
                <div style="margin-top: 10px;">
                  <code>
                    curl -L https://downloads.portainer.io/agent-stack.yml -o agent-stack.yml && docker stack deploy --compose-file=agent-stack.yml portainer-agent
                  </code>
                  <span class="btn btn-primary btn-sm space-left" ng-click="copyAgentCommand()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</span>
                  <span>
                    <i id="copyNotification" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
                  </span>
                </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">
                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.
              </span>
            </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" required auto-focus />
            </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 -->
          <!-- endpoint-url-input -->
          <div ng-if="state.EnvironmentType === 'docker' || 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
                />
                <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
                />
              </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 />
              </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>
          <!-- !portainer-instance-input -->
          <!-- 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" />
              </div>
            </div>
          </div>
          <!-- !endpoint-public-url-input -->
          <!-- endpoint-security -->
          <por-endpoint-security ng-if="state.EnvironmentType === 'docker'" 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"></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"
              >
                <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"
              >
                <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"
              >
                <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>
