<div class="modal-inner-scroll">
  <p
    class="text-medium text-center p-l-24 p-r-24 p-t-16 p-b-16 bg-component separator-bottom sticky-top"
  >
    {{ vm.wizardCtrl.data.selectedProtocol.name }}
  </p>
  <form class="form" name="modelForm" novalidate>
    <div class="c8y-wizard-body p-t-16">
      <div class="form-group">
        <label for="name" translate>Name</label>
        <input
          id="name"
          name="name"
          class="form-control"
          ng-model="vm.model.name"
          ng-max="100"
          placeholder="{{ 'e.g. My OPC UA protocol' | translate }}"
          required
          ng-disabled="vm.pending"
        />
        <c8y-error-feedback field="modelForm.name"></c8y-error-feedback>
      </div>
      <div class="form-group">
        <label for="description" translate>Description</label>
        <textarea
          id="description"
          rows="4"
          class="form-control"
          ng-model="vm.model.description"
          ng-disabled="vm.pending"
        ></textarea>
      </div>
      <div class="form-group selectize-container">
        <label class="control-label">
          {{ 'Reference server' | translate }}
          <button
            class="btn-help btn-help--sm"
            type="button"
            aria-label="{{ 'Help' | translate }}"
            uib-popover="{{
              'Selecting a reference server allows you to create device types based on the OPC UA model stored on an OPC UA server. This greatly simplifies the mapping process, since device types can be created based on OPC UA browse paths being actually present on the server.'
                | translate
            }}"
            popover-placement="right"
            popover-trigger="'focus'"
          ></button>
        </label>
        <ui-select
          ng-disabled="!vm.servers || (vm.servers && vm.servers.length === 0)"
          class="form-control"
          ng-model="vm.model.server"
          ng-change="vm.serverChanged($event)"
          append-to-body="true"
        >
          <ui-select-match placeholder="{{ vm.getPlaceholder() | translate }}">
            {{ $select.selected.name }}
          </ui-select-match>
          <ui-select-choices repeat="srvr in vm.servers | filter: $select.search" position="down">
            <div class="d-flex">
              <i c8y-icon="server" class="m-r-8 icon-20"></i>
              <div class="text-truncate" style="line-height: 1.25">
                <div title="{{ srvr.name }}" class="text-truncate" ng-bind="srvr.name"></div>
                <small
                  class="text-truncate"
                  title="{{ srvr.c8y_ua_ClientConfig.serverUrl }}"
                  ng-bind="srvr.c8y_ua_ClientConfig.serverUrl"
                ></small>
              </div>
            </div>
          </ui-select-choices>
        </ui-select>
        <span class="help-block" translate>
          Selecting a reference server requires selecting a reference node.
        </span>
      </div>
      <div style="min-height: 50px">
        <div ng-if="vm.model.server.id" style="margin-top: -16px">
          <c8y-opcua-address-space-tree
            class="d-block"
            style="margin-top: -16px"
            ng-if="vm.model.server.id"
            mo-id="{{ vm.model.server.id }}"
            (selected-node)="vm.onSelected($event)"
            required
          ></c8y-opcua-address-space-tree>
        </div>
      </div>
    </div>
  </form>
</div>

<div class="c8y-wizard-footer bg-component sticky-bottom">
  <button
    class="btn btn-default"
    title="{{ 'Back' | translate }}"
    ng-click="vm.wizardCtrl.goToIndex(0)"
  >
    {{ 'Back' | translate }}
  </button>
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="vm.wizardCtrl.dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="submit"
    title="{{ 'Create' | translate }}"
    ng-click="vm.create(vm.model)"
    ng-disabled="modelForm.$invalid || vm.pending"
  >
    {{ 'Create' | translate }}
  </button>
</div>
