<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8y-icon="c8y-smart-rest"></i>
    <h4
      id="modal-title"
      translate
    >
      Add SmartREST template
    </h4>
  </div>
  <form
    name="newSmartRestTemplateForm"
    ng-submit="!newSmartRestTemplateForm.$pending && !newSmartRestTemplateForm.$invalid && $ctrl.ok()"
    novalidate
  >
    <div
      class="modal-inner-scroll"
      id="modal-body"
    >
      <div class="modal-body">
        <div class="form-group">
          <label for="name">
            <span translate>Template name</span>
            <button
              class="btn-help btn-help--sm"
              aria-label="{{ 'Help' | translate }}"
              type="button"
              uib-popover="{{ 'Descriptive template name' | translate }}"
              popover-trigger="'focus'"
              popover-placement="right"
              popover-append-to-body="true"
            ></button>
          </label>
          <input
            class="form-control"
            id="name"
            placeholder="{{ 'e.g. My SmartREST template' | translate }}"
            name="name"
            type="text"
            required
            ng-model="$ctrl.newSmartRestTemplate.name"
          />
          <c8y-error-feedback field="newSmartRestTemplateForm.name"></c8y-error-feedback>
        </div>

        <div class="form-group">
          <label for="externalId">
            <span translate>Template ID</span>
            <button
              class="btn-help btn-help--sm"
              aria-label="{{ 'Help' | translate }}"
              type="button"
              uib-popover="{{ 'Unique template ID' | translate }}"
              popover-trigger="'focus'"
              popover-placement="right"
              popover-append-to-body="true"
            ></button>
          </label>
          <input
            class="form-control"
            id="externalId"
            placeholder="{{ 'e.g. mySmartRESTTemplateUniqueId' | translate }}"
            name="externalId"
            type="text"
            required
            ng-maxlength="680"
            ng-model="$ctrl.newSmartRestTemplate.externalId"
            ng-model-options="{debounce: 800}"
            c8y-validate-unique-external-id="{{ $ctrl.externalIdType }}"
          />
          <c8y-error-feedback field="newSmartRestTemplateForm.externalId">
            <span
              ng-message="c8yUniqueExternalId"
              translate
            >
              This template ID is already in use. Select another one.
            </span>
          </c8y-error-feedback>
        </div>
      </div>
    </div>

    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        type="button"
        ng-click="$ctrl.cancel()"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        class="btn btn-primary"
        title="{{ 'Continue' | translate }}"
        type="submit"
        ng-disabled="newSmartRestTemplateForm.$pending || newSmartRestTemplateForm.$invalid"
        data-cy="add-smartRest-template"
      >
        {{ 'Continue' | translate }}
      </button>
    </div>
  </form>
</div>
