<form
  class="d-contents"
  name="responseTemplateForm"
  novalidate
>
  <div class="d-flex d-col flex-grow">
    <div class="card-block">
      <div class="tight-grid">
        <div class="form-group col-md-4">
          <label
            for="msgId"
            translate
          >
            Response ID
          </label>
          <input
            class="form-control"
            id="msgId"
            placeholder="{{ 'e.g.' | translate }} 11"
            name="msgId"
            type="text"
            required
            ng-model="$ctrl.responseTemplate.msgId"
            c8y-smart-rest-validate-unique-msg-id-in-template="$ctrl.template"
            original-msg-id="$ctrl.originalMsgId"
            data-cy="responseEditor--response-id"
          />
          <c8y-error-feedback field="responseTemplateForm.msgId">
            <span
              ng-message="uniqueMsgIdInTemplate"
              translate
            >
              Message ID must be unique among all message and response templates.
            </span>
          </c8y-error-feedback>
        </div>

        <div class="form-group col-md-8">
          <label
            for="name"
            translate
          >
            Name
          </label>
          <input
            class="form-control"
            id="name"
            placeholder="{{ 'e.g. My response template' | translate }}"
            name="name"
            type="text"
            required
            ng-model="$ctrl.responseTemplate.name"
            data-cy="responseEditor--response-name"
          />
          <c8y-error-feedback field="responseTemplateForm.name"></c8y-error-feedback>
        </div>
      </div>

      <div class="tight-grid">
        <div class="form-group col-md-6">
          <label
            for="base"
            translate
          >
            Base pattern
          </label>
          <input
            class="form-control"
            id="base"
            name="base"
            type="text"
            ng-model="$ctrl.responseTemplate.base"
            data-cy="responseEditor--response-base-pattern"
            ng-pattern="$ctrl.validation.jsonPath.pattern"
          />
          <c8y-error-feedback field="responseTemplateForm.base">
            <span
              ng-message="pattern"
              ng-bind="$ctrl.validation.jsonPath.message | translate"
            ></span>
          </c8y-error-feedback>
        </div>

        <div class="form-group col-md-6">
          <label
            for="condition"
            translate
          >
            Condition
          </label>
          <input
            class="form-control"
            id="condition"
            name="condition"
            type="text"
            ng-model="$ctrl.responseTemplate.condition"
            data-cy="responseEditor--response-condition"
            ng-pattern="$ctrl.validation.jsonPath.pattern"
          />
          <c8y-error-feedback field="responseTemplateForm.condition">
            <span
              ng-message="pattern"
              ng-bind="$ctrl.validation.jsonPath.message | translate"
            ></span>
          </c8y-error-feedback>
        </div>
      </div>
      <fieldset>
        <div
          class="legend form-block"
          translate
        >
          Patterns
        </div>
        <c8y-ui-empty-state
          [icon]="'c8y-data-points'"
          [title]="'No patterns to display.' | translate"
          [subtitle]="
            'At least one pattern is required. Click below to add the first one.' | translate
          "
          ng-if="$ctrl.responseTemplate.patterns.length === 0"
        ></c8y-ui-empty-state>
        <div ng-repeat="pattern in $ctrl.responseTemplate.patterns">
          <ng-form name="patternForm">
            <div class="form-group">
              <div class="input-group">
                <input
                  class="form-control"
                  placeholder="{{ 'e.g.' | translate }} c8y_SoftwareList[*].name"
                  name="path"
                  type="text"
                  required
                  ng-model="pattern.path"
                  data-cy="responseEditor--response-pattern-path"
                  ng-pattern="$ctrl.validation.jsonPath.pattern"
                />
                <span class="input-group-btn">
                  <button
                    class="btn-dot btn-dot--danger"
                    aria-label="{{ 'Remove' | translate }}"
                    uib-tooltip="{{ 'Remove' | translate }}"
                    tooltip-popup-delay="500"
                    tooltip-append-to-body="true"
                    tooltip-trigger="'mouseenter'"
                    type="button"
                    data-cy="responseEditor--remove-pattern"
                    ng-click="$ctrl.removePattern($ctrl.responseTemplate, pattern); 
                    responseTemplateForm.$setDirty()"
                  >
                    <i c8y-icon="minus-circle"></i>
                  </button>
                </span>
              </div>
              <c8y-error-feedback field="patternForm.path">
                <span
                  ng-message="pattern"
                  ng-bind="$ctrl.validation.jsonPath.message | translate"
                ></span>
              </c8y-error-feedback>
            </div>
          </ng-form>
        </div>
        <button
          class="btn btn-default"
          title="{{ 'Add pattern' | translate }}"
          type="button"
          data-cy="responseEditor--add-pattern-btn"
          ng-click="$ctrl.addPattern($ctrl.responseTemplate); 
          responseTemplateForm.$setDirty()"
        >
          <i c8y-icon="plus-circle"></i>
          {{ 'Add pattern' | translate }}
        </button>
      </fieldset>
    </div>
  </div>
  <div class="card-footer separator sticky-bottom">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="$ctrl.cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-danger"
      title="{{ 'Remove' | translate }}"
      type="button"
      data-cy="responseEditor--remove-btn"
      ng-if="$ctrl.originalMsgId"
      ng-click="$ctrl.remove()"
    >
      {{ 'Remove' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="button"
      data-cy="responseEditor--save-btn"
      ng-disabled="responseTemplateForm.$invalid || responseTemplateForm.$pristine || $ctrl.responseTemplate.patterns.length === 0"
      ng-click="$ctrl.save()"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>
