<div id="endpointModal">
  <div class="modal-header">
    <h5 class="modal-title">{{endpoint.id === undefined ? "Add" : "Edit"}} Grafana Endpoint</h5>
  </div>
  <div class="modal-body">
    <form name="endpointForm" novalidate>
      <div class="form-group">
        <div ng-show="error.entity" class="form-text text-danger">{{error.entity}}</div>
      </div>
      <div class="form-group form-row">
        <label class="col-form-label" for="endpoint.uid">Grafana ID</label>
        <button class="btn btn-link text-secondary px-0"
                popover-trigger="'mouseenter'"
                uib-popover="A unique identifier of this endpoint. The identifier can only contain alpha numeric values as well as  - and _ but may not start with those. The full regular expression to match is: {{uidRegex}}"><i class="fas fa-circle-info"></i>
        </button>
        <input class="form-control" type="text" id="endpoint.uid" name="uid" placeholder="Unique Grafana ID" ng-model="endpoint.uid"
               ng-class="{ 'is-invalid' : endpointForm.uid.$invalid || error.uid }"
               ng-pattern="uidRegex"
               required>
        <div ng-show="endpointForm.uid.$invalid" class="invalid-feedback">Please provide a valid Grafana ID.</div>
        <div ng-show="error.uid" class="invalid-feedback">{{error.uid}}</div>
      </div>
      <div class="form-group form-row">
        <label class="col-form-label" for="endpoint.description">Endpoint Description</label>
        <input class="form-control" type="text" id="endpoint.description" name="description" placeholder="Optional Label" ng-model="endpoint.description"
               ng-class="{ 'is-invalid' : endpointForm.description.$invalid || error.description}">
        <div ng-show="error.description" class="invalid-feedback">{{error.description}}</div>
      </div>
      <div class="form-group form-row">
        <label class="col-form-label" for="endpoint.apiKey">Grafana API Key</label>
        <input class="form-control" type="text" id="endpoint.apiKey" name="apiKey" placeholder="API-KEY" ng-model="endpoint.apiKey"
               ng-class="{ 'is-invalid' : endpointForm.apiKey.$invalid || error.apiKey}" required>
        <div ng-show="endpointForm.apiKey.$invalid" class="invalid-feedback">The API Key is required.</div>
        <div ng-show="error.apiKey" class="invalid-feedback">{{error.apiKey}}</div>
      </div>
      <div class="form-group form-row">
        <label class="col-form-label" for="endpoint.url">Grafana URL</label>
        <input class="form-control" type="text" id="endpoint.url" name="url" placeholder="http://grafana:3000" ng-model="endpoint.url"
               ng-class="{ 'is-invalid' : endpointForm.url.$invalid || error.url}" required>
        <div ng-show="endpointForm.url.$invalid" class="invalid-feedback">The url is required.</div>
        <div ng-show="error.url" class="invalid-feedback">{{error.url}}</div>
      </div>
      <div class="form-group form-row">
        <label class="col-form-label" for="endpoint.connectTimeout">Grafana Connect Timeout</label>
        <button class="btn btn-link text-secondary px-0"
                popover-trigger="'mouseenter'"
                uib-popover="The connect timeout in seconds for this endpoint. If omitted a default timeout of {{defaultConnectTimeout}} seconds is applied."><i class="fas fa-circle-info"></i>
        </button>
        <input class="form-control" type="number" id="endpoint.connectTimeout" name="connectTimeout" min="0" max="9999" ng-model="endpoint.connectTimeout"
               ng-class="{ 'is-invalid' : endpointForm.connectTimeout.$invalid || error.connectTimeout}">
        <div ng-show="endpointForm.connectTimeout.$invalid" class="invalid-feedback">Please provide a valid number &gt; 0.</div>
        <div ng-show="error.connectTimeout" class="invalid-feedback">{{error.connectTimeout}}</div>
      </div>
      <div class="form-group form-row">
        <label class="col-form-label" for="endpoint.readTimeout">Grafana Read Timeout</label>
        <button class="btn btn-link text-secondary px-0"
                popover-trigger="'mouseenter'"
                uib-popover="The read timeout in seconds for this endpoint. If omitted a default timeout of {{defaultReadTimeout}} seconds is applied."><i class="fas fa-circle-info"></i>
        </button>

        <input class="form-control" type="number" id="endpoint.readTimeout" name="readTimeout" min="0" max="9999" ng-model="endpoint.readTimeout"
               ng-class="{ 'is-invalid' : endpointForm.readTimeout.$invalid || error.readTimeout}">
        <div ng-show="endpointForm.readTimeout.$invalid" class="invalid-feedback">Please provide a valid number &gt; 0.</div>
        <div ng-show="error.readTimeout" class="invalid-feedback">{{error.readTimeout}}</div>
      </div>
    </form>

    <button type="button" class="btn btn-warning btn-sm" id="verify-endpoint" ng-click="verify()" ng-disabled="endpointForm.$invalid" title="Verify Connectivity"><i class="fas fa-plug"></i> Test Connection</button>
    <span class="" ng-if="verification.state === 'running'"><i class="spinner-border spinner-border-sm"></i> Connecting ...</span>
    <span class="text-success" ng-if="verification.state ==='success'"><i class="fas fa-check"></i> Connected</span>
    <span class="text-danger" ng-if="verification.state === 'failure'"><i class="fas fa-triangle-exclamation"></i> Could not connect</span>
    <div ng-if="verification.result && verification.state === 'failure'" class="alert mt-2" ng-class="{'alert-danger': verification.state === 'failure'}">
      {{verification.result}}
    </div>
  </div>
  <div class="modal-footer">
    <div>
      <button type="button" class="btn btn-primary" id="save-endpoint" ng-click="save()" ng-disabled="endpointForm.$invalid">{{buttonName}}</button>
      <button type="button" class="btn btn-secondary" id="cancel-endpoint" ng-click="cancel()">Cancel</button>
    </div>
  </div>
</div>