<page-header ng-if="endpoint" title="'Environment details'" breadcrumbs="[{label:'Environments', link:'portainer.endpoints'}, endpoint.Name]" reload="true"> </page-header>

<div class="row">
  <div ng-if="state.edgeEndpoint">
    <information-panel ng-if="state.edgeAssociated" title-text="Edge information">
      <span class="small text-muted">
        <p class="vertical-center">
          <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
          This Edge environment is associated to an Edge environment {{ state.kubernetesEndpoint ? '(Kubernetes)' : '(Docker)' }}.
        </p>
        <p>
          Edge key: <code>{{ endpoint.EdgeKey }}</code>
        </p>
        <p>
          Edge identifier: <code>{{ endpoint.EdgeID }}</code>
        </p>
        <p>
          <button
            type="button"
            class="btn btn-primary btn-sm"
            ng-disabled="state.actionInProgress"
            ng-click="onDisassociateEndpoint()"
            button-spinner="state.actionInProgress"
            analytics-on
            analytics-event="edge-endpoint-disassociate"
            analytics-category="edge"
          >
            <span ng-hide="state.actionInProgress">Disassociate</span>
          </button>
        </p>
      </span>
    </information-panel>

    <div class="col-sm-12" ng-if="!state.edgeAssociated">
      <rd-widget>
        <rd-widget-body>
          <div class="col-sm-12 form-section-title">Deploy an agent</div>
          <span class="small text-muted">
            <p class="vertical-center">
              <pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
              Refer to the platform related command below to deploy the Edge agent in your remote cluster.
            </p>
            <p>
              The agent will communicate with Portainer via <u>{{ edgeKeyDetails.instanceURL }}</u> and <u>tcp://{{ edgeKeyDetails.tunnelServerAddr }}</u>
            </p>
          </span>

          <div class="col-sm-12 form-section-title"> Edge agent deployment script </div>
          <edge-script-form edge-info="{ key: endpoint.EdgeKey, id: endpoint.EdgeID }" commands="state.edgeScriptCommands" async-mode="endpoint.Edge.AsyncMode"></edge-script-form>

          <edge-key-display edge-key="endpoint.EdgeKey"> </edge-key-display>
        </rd-widget-body>
      </rd-widget>
    </div>
  </div>

  <information-panel ng-if="state.kubernetesEndpoint && (!state.edgeEndpoint || state.edgeAssociated)" title-text="Kubernetes features configuration">
    <span class="small text-muted vertical-center">
      <pr-icon icon="'wrench'" mode="'primary'"></pr-icon>
      You should configure the features available in this Kubernetes environment in the
      <a ui-sref="kubernetes.cluster.setup({endpointId: endpoint.Id})">Kubernetes configuration</a> view.
    </span>
  </information-panel>
</div>

<div class="row mt-4">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.endpointForm">
          <div class="col-sm-12 form-section-title"> Configuration </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"
                data-cy="container-name-input"
                class="form-control"
                id="container_name"
                ng-model="endpoint.Name"
                placeholder="e.g. kubernetes-cluster01 / docker-prod01"
              />
            </div>
          </div>
          <!-- !name-input -->
          <!-- endpoint-url-input -->
          <div class="form-group" ng-if="!state.edgeEndpoint">
            <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
              <span ng-if="!state.agentEndpoint">Environment URL</span>
              <span ng-if="state.agentEndpoint">Environment address</span>
              <portainer-tooltip
                ng-if="!state.agentEndpoint"
                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>
              <portainer-tooltip ng-if="state.agentEndpoint" message="'The address for the Portainer agent in the format <HOST>:<PORT> or <IP>:<PORT>'"> </portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input
                ng-disabled="endpointType === 'local' || state.azureEndpoint"
                type="text"
                data-cy="endpoint-url-input"
                class="form-control"
                id="endpoint_url"
                ng-model="endpoint.URL"
                placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375"
              />
            </div>
          </div>
          <!-- !endpoint-url-input -->
          <!-- endpoint-public-url-input -->
          <div class="form-group" ng-if="!state.azureEndpoint">
            <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
              Public IP
              <portainer-tooltip message="'URL or IP address where exposed containers will be reachable. This field is optional and will default to the environment URL.'">
              </portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input
                type="text"
                class="form-control"
                id="endpoint_public_url"
                ng-model="endpoint.PublicURL"
                placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com"
                data-cy="public-url-input"
              />
            </div>
          </div>

          <div ng-if="endpoint && state.edgeEndpoint">
            <div class="col-sm-12 form-section-title"> Check-in Intervals </div>
            <edge-checkin-interval-field value="endpoint.EdgeCheckinInterval" on-change="(onChangeCheckInInterval)"></edge-checkin-interval-field>
          </div>

          <!-- !endpoint-public-url-input -->

          <tls-fieldset
            ng-if="!state.edgeEndpoint && endpoint.Status !== 4 && state.showTLSConfig"
            values="formValues.tlsConfig"
            on-change="(onChangeTLSConfigFormValues)"
            validation-data="{optionalCert: true}"
          ></tls-fieldset>

          <azure-endpoint-config
            ng-if="state.azureEndpoint"
            application-id="endpoint.AzureCredentials.ApplicationID"
            tenant-id="endpoint.AzureCredentials.TenantID"
            authentication-key="endpoint.AzureCredentials.AuthenticationKey"
          ></azure-endpoint-config>
          <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="endpoint.GroupId"
                id="endpoint_group"
                class="form-control"
                data-cy="endpoint-group-select"
              ></select>
            </div>
          </div>
          <!-- !group -->

          <tag-selector ng-if="endpoint" value="endpoint.TagIds" allow-create="state.allowCreate" on-change="(onChangeTags)"></tag-selector>

          <!-- open-amt info -->
          <div ng-if="state.showAMTInfo">
            <div class="col-sm-12 form-section-title"> Open Active Management Technology </div>

            <div class="form-group">
              <label for="endpoint_managementinfoVersion" class="col-sm-3 col-lg-2 control-label text-left"> AMT Version </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoVersion"
                  ng-model="endpoint.ManagementInfo['AMT']"
                  placeholder="Loading..."
                  data-cy="endpoint-managementinfoVersion"
                />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoUUID" class="col-sm-3 col-lg-2 control-label text-left"> UUID </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoUUID"
                  ng-model="endpoint.ManagementInfo['UUID']"
                  placeholder="Loading..."
                  data-cy="endpoint-managementinfoUUID"
                />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoBuildNumber" class="col-sm-3 col-lg-2 control-label text-left"> Build Number </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  data-cy="endpoint-managementinfoBuildNumber"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoBuildNumber"
                  ng-model="endpoint.ManagementInfo['Build Number']"
                  placeholder="Loading..."
                />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoControlMode" class="col-sm-3 col-lg-2 control-label text-left"> Control Mode </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  data-cy="endpoint-managementinfoControlMode"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoControlMode"
                  ng-model="endpoint.ManagementInfo['Control Mode']"
                  placeholder="Loading..."
                />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoDNSSuffix" class="col-sm-3 col-lg-2 control-label text-left"> DNS Suffix </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  data-cy="endpoint-managementinfoDNSSuffix"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoDNSSuffix"
                  ng-model="endpoint.ManagementInfo['DNS Suffix']"
                  placeholder="Loading..."
                />
              </div>
            </div>
          </div>
          <!-- !open-amt info -->
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm !ml-0"
                ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || !$ctrl.endpointForm.$valid"
                ng-click="updateEndpoint()"
                button-spinner="state.actionInProgress"
              >
                <span ng-hide="state.actionInProgress">Update environment</span>
                <span ng-show="state.actionInProgress">Updating environment...</span>
              </button>
              <a type="button" class="btn btn-default btn-sm" ui-sref="portainer.endpoints">Cancel</a>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
