<form
  class="d-contents"
  name="requestTemplateForm"
  novalidate
>
  <div class="d-flex d-col flex-grow">
    <div class="card-block">
      <div class="tight-grid">
        <div class="col-md-4">
          <div class="form-group">
            <label for="msgId">
              <span translate>Message ID</span>
              <button
                class="btn-help btn-help--sm"
                aria-label="{{ 'Help' | translate }}"
                type="button"
                uib-popover="{{
                  'Message template identifier. It must be unique among all message and response templates.'
                    | translate
                }}"
                popover-trigger="'focus'"
                popover-placement="right"
                popover-append-to-body="true"
              ></button>
            </label>
            <input
              class="form-control"
              id="msgId"
              placeholder="{{ 'e.g.' | translate }} 10"
              name="msgId"
              type="text"
              required
              data-cy="requestEditor--input-msgId"
              ng-model="vm.requestTemplate.msgId"
              c8y-smart-rest-validate-unique-msg-id-in-template="vm.template"
              original-msg-id="vm.originalMsgId"
            />
            <c8y-error-feedback field="requestTemplateForm.msgId">
              <span
                ng-message="uniqueMsgIdInTemplate"
                translate
              >
                Message ID must be unique among all message and response templates.
              </span>
            </c8y-error-feedback>
          </div>
        </div>
        <div class="col-md-8">
          <div class="form-group">
            <label for="name">
              <span translate>Name</span>
              <button
                class="btn-help"
                aria-label="{{ 'Help' | translate }}"
                type="button"
                uib-popover="{{
                  'Name is mandatory but has no restricted format or semantics.' | translate
                }}"
                popover-trigger="'focus'"
                popover-placement="right"
                popover-append-to-body="true"
              ></button>
            </label>
            <input
              class="form-control"
              id="name"
              placeholder="{{ 'e.g. My request template' | translate }}"
              name="name"
              type="text"
              required
              data-cy="requestEditor--input-name"
              ng-model="vm.requestTemplate.name"
            />
            <c8y-error-feedback field="requestTemplateForm.name"></c8y-error-feedback>
          </div>
        </div>
      </div>
      <div class="tight-grid">
        <div class="col-md-6">
          <div class="form-group">
            <label
              id="target"
              translate
            >
              Target REST API
            </label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                aria-labelledby="target"
                name="Target REST API"
                required
                ng-model="vm.requestTemplate.api"
                data-cy="requestEditor--rest-api-options"
                ng-options="api.value as (api.name | translate) for api in vm.apis | orderBy:'name'"
                ng-change="vm.setupRequestTemplateDefaults(vm.requestTemplate)"
              ></select>
              <span></span>
            </div>
            <c8y-error-feedback
              field="requestTemplateForm.api"
              check-on-dirty="true"
            ></c8y-error-feedback>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label
              id="method"
              translate
            >
              Method
            </label>
            <div class="c8y-select-wrapper">
              <select
                class="form-control"
                aria-labelledby="method"
                name="method"
                required
                ng-model="vm.requestTemplate.method"
                data-cy="requestEditor--method-options"
                ng-options="method.value as (method.name | translate) for method in vm.getMethodsForAPI(vm.requestTemplate.api)"
                ng-change="vm.setupRequestTemplateDefaults(vm.requestTemplate)"
              ></select>
              <span></span>
            </div>
            <c8y-error-feedback
              field="requestTemplateForm.method"
              check-on-dirty="true"
            ></c8y-error-feedback>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            ng-model="vm.requestTemplate.response"
          />
          <span></span>
          <span>{{ 'Includes response' | translate }}</span>
          <button
            class="btn-help"
            aria-label="{{ 'Help' | translate }}"
            type="button"
            uib-popover="{{
              'If selected, it will process the result of the request using response templates.'
                | translate
            }}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
          ></button>
        </label>
      </div>
      <fieldset>
        <div class="legend form-block">
          <span>{{ 'REST API built-in fields' | translate }}</span>
          <button
            class="btn-help"
            aria-label="{{ 'Help' | translate }}"
            type="button"
            uib-popover="{{
              'In case no value is provided, a device will be able to set it when sending an actual message.'
                | translate
            }}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
          ></button>
        </div>
        <div
          class="alert alert-warning"
          ng-if="!vm.apiAndMethodSelected()"
          translate
        >
          Select API and method above to see required API values.
        </div>
        <div
          class="alert alert-info"
          ng-if="vm.noRequiredApiValues()"
          translate
        >
          No required API values.
        </div>
        <div
          class="tight-grid"
          ng-show="vm.shouldShowByIdOrByExternalId()"
        >
          <div class="col-xs-12 form-inline">
            <div class="form-group">
              <label
                class="c8y-radio"
                title="{{ 'ID' | translate }}"
              >
                <input
                  type="radio"
                  ng-model="vm.requestTemplate.byId"
                  ng-value="true"
                />
                <span></span>
                <span>{{ 'ID' | translate }}</span>
              </label>
            </div>

            <div class="form-group">
              <label
                class="c8y-radio"
                title="{{ 'External ID' | translate }}"
              >
                <input
                  type="radio"
                  ng-model="vm.requestTemplate.byId"
                  ng-value="false"
                />
                <span></span>
                <span>{{ 'External ID' | translate }}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="tight-grid">
          <ng-form
            name="externalIdTypeForm"
            ng-if="
              vm.shouldShowExternalId() ||
              (vm.shouldShowByIdOrByExternalId() && !vm.requestTemplate.byId)
            "
          >
            <div class="form-group col-md-6">
              <label translate>External ID type</label>
              <input
                class="form-control"
                name="externalIdType"
                type="text"
                ng-model="vm.requestTemplate.externalIdType"
              />
              <c8y-error-feedback field="externalIdTypeForm.externalIdType"></c8y-error-feedback>
            </div>
          </ng-form>
          <div ng-repeat="mandatoryValue in vm.requestTemplate.mandatoryValues">
            <ng-form name="mandatoryValueForm">
              <div class="form-group col-md-6">
                <label>{{ mandatoryValue.path | translate }}</label>
                <div>
                  <c8y-smart-rest-value-input
                    aria-label="{{ 'Value' | translate }}"
                    name="'mandatoryValueInput' + $index"
                    type="mandatoryValue.type"
                    value="mandatoryValue.value"
                    data-required="false"
                  ></c8y-smart-rest-value-input>
                  <c8y-error-feedback
                    field="mandatoryValueForm.mandatoryValueInput"
                  ></c8y-error-feedback>
                </div>
              </div>
            </ng-form>
          </div>
        </div>
      </fieldset>
      <fieldset>
        <div class="legend form-block">
          <span>{{ 'REST API custom fields' | translate }}</span>
          <button
            class="btn-help"
            aria-label="{{ 'Help' | translate }}"
            type="button"
            uib-popover="{{
              'A custom fragment can be added to the message. For example, for the measurement API, we could have c8y_Temperature.T.unit - STRING - °C'
                | translate
            }}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
          ></button>
        </div>
        <div
          class="alert alert-info"
          ng-if="vm.requestTemplate.customValues.length === 0"
          translate
        >
          No REST API custom fields. Click below to add the first one.
        </div>
        <div
          class="tight-grid hidden-sm hidden-xs"
          ng-show="vm.requestTemplate.customValues > 0"
        >
          <div class="form-group col-md-3">
            <label translate>Key</label>
          </div>
          <div class="form-group col-md-4">
            <label translate>Type</label>
          </div>
          <div class="form-group col-md-4">
            <label translate>Value</label>
          </div>
        </div>
        <div
          class="tight-grid"
          ng-repeat="customValue in vm.requestTemplate.customValues"
        >
          <ng-form name="customValueForm">
            <div class="col-md-5">
              <div class="form-group">
                <label
                  class="visible-sm visible-xs"
                  translate
                >
                  Key
                </label>
                <input
                  class="form-control"
                  placeholder="{{ 'Key' | translate }}"
                  name="path"
                  type="text"
                  required
                  ng-model="customValue.path"
                  ng-pattern="vm.validation.jsonPath.pattern"
                  c8y-smart-rest-validate-custom-field-key-in-request-template="vm.requestTemplate"
                />
                <c8y-error-feedback field="customValueForm.path">
                  <span
                    ng-message="pattern"
                    ng-bind="vm.validation.jsonPath.message | translate"
                  ></span>
                  <span
                    ng-message="customFieldKey"
                    translate
                  >
                    Custom key must be different than built-in ones.
                  </span>
                </c8y-error-feedback>
              </div>
            </div>
            <div class="col-md-2">
              <div class="form-group">
                <label
                  class="visible-sm visible-xs"
                  translate
                >
                  Type
                </label>
                <div class="c8y-select-wrapper">
                  <select
                    class="form-control"
                    ng-model="customValue.type"
                    ng-options="type.value as (type.label | translate) for type in vm.types | orderBy:'label'"
                    ng-change="vm.onCustomValueDataTypeChanged(customValue)"
                  ></select>
                  <span></span>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label
                  class="visible-sm visible-xs"
                  translate
                >
                  Value
                </label>
                <c8y-smart-rest-value-input
                  aria-label="{{ 'Value' | translate }}"
                  placeholder="'Value' | translate"
                  name="'customValueInput' + $index"
                  type="customValue.type"
                  value="customValue.value"
                  data-required="false"
                ></c8y-smart-rest-value-input>
                <c8y-error-feedback field="customValueForm.customValueInput"></c8y-error-feedback>
              </div>
            </div>
            <div class="col-md-1">
              <div class="form-group">
                <button
                  class="btn-dot btn-dot--danger btn hidden-xs hidden-sm"
                  aria-label="{{ 'Remove' | translate }}"
                  uib-tooltip="{{ 'Remove' | translate }}"
                  tooltip-trigger="'focus'"
                  tooltip-popup-delay="500"
                  type="button"
                  ng-click="vm.removeCustomValue(vm.requestTemplate, customValue);  requestTemplateForm.$setDirty()"
                >
                  <i c8y-icon="minus-circle"></i>
                </button>
                <button
                  class="btn btn-danger btn-block btn-sm visible-xs visible-sm"
                  title="{{ 'Remove' | translate }}"
                  type="button"
                  ng-click="vm.removeCustomValue(vm.requestTemplate, customValue); requestTemplateForm.$setDirty()"
                >
                  <i c8y-icon="minus-circle"></i>
                  <span>{{ 'Remove' | translate }}</span>
                </button>
              </div>
            </div>
          </ng-form>
        </div>
        <button
          class="btn btn-default m-t-8"
          title="{{ 'Add field' | translate }}"
          type="button"
          data-cy="requestEditor--add-field-btn"
          ng-click="vm.addCustomValue(vm.requestTemplate); requestTemplateForm.$setDirty()"
        >
          <i c8y-icon="plus-circle"></i>
          {{ 'Add field' | translate }}
        </button>
      </fieldset>
      <fieldset>
        <div
          class="legend form-block"
          translate
        >
          Preview
        </div>
        <code>{{ vm.getPreviews(vm.requestTemplate) }}</code>
      </fieldset>
    </div>
  </div>

  <div class="card-footer separator sticky-bottom">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="vm.cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-danger"
      title="{{ 'Remove' | translate }}"
      type="button"
      ng-if="vm.originalMsgId"
      ng-click="vm.remove()"
      data-cy="requestEditor--remove-msg-btn"
    >
      {{ 'Remove' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="submit"
      ng-click="vm.save()"
      data-cy="save-message"
      ng-disabled="requestTemplateForm.$invalid || requestTemplateForm.$pristine"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>
