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

<div>
  <div class="mx-4 space-y-4 [&>*]:block mb-4" ng-if="state.edgeEndpoint">
    <edge-information-panel
      ng-if="state.edgeAssociated"
      environment-id="endpoint.Id"
      edge-key="endpoint.EdgeKey"
      edge-id="endpoint.EdgeID"
      platform-name="state.platformName"
      on-success="(onDisassociateSuccess)"
    >
    </edge-information-panel>

    <div ng-if="!state.edgeAssociated">
      <edge-agent-deployment-widget edge-key="endpoint.EdgeKey" edge-id="endpoint.EdgeID" async-mode="endpoint.Edge.AsyncMode"></edge-agent-deployment-widget>
    </div>
  </div>

  <div class="mx-4 space-y-4 [&>*]:block mb-4">
    <kube-config-info environment-id="endpoint.Id" environment-type="endpoint.Type" edge-id="endpoint.EdgeID" status="endpoint.Status"></kube-config-info>
  </div>
</div>

<div ng-if="state.azureEndpoint" class="col-sm-12">
  <azure-environment-form environment="endpoint" on-cancel="(cancelUpdateEndpoint)" on-success="(onUpdateSuccess)"></azure-environment-form>
</div>

<div class="row mt-4" ng-if="!state.azureEndpoint && !state.edgeEndpoint">
  <div class="col-lg-12 col-md-12 col-xs-12" ng-if="endpoint">
    <general-environment-form environment="endpoint" on-cancel="(cancelUpdateEndpoint)" on-success="(onUpdateSuccess)"></general-environment-form>
  </div>
</div>

<div class="row mt-4" ng-if="state.edgeEndpoint">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.endpointForm">
          <environment-basic-config-section
            values="basicConfigValues"
            set-values="updateBasicConfig"
            is-edge="state.edgeEndpoint"
            is-azure="state.azureEndpoint"
            is-agent="state.agentEndpoint"
            has-error="endpoint.Status === 4"
            is-local-environment="endpointType === 'local'"
          ></environment-basic-config-section>

          <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>

          <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>
