<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>
  <div class="c8y-wizard-body p-t-16">
    <form class="form" name="modelForm" novalidate>
      <div class="form-group">
        <label for="name" translate>Name</label>
        <input
          id="name"
          name="name"
          class="form-control"
          ng-model="vm.model.name"
          data-cy="device-type-create-step--name"
          ng-max="100"
          placeholder="{{ 'e.g. My 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="7"
          class="form-control"
          ng-model="vm.model.description"
          data-cy="device-type-create-step--description"
          ng-disabled="vm.pending"
        ></textarea>
      </div>
    </form>
  </div>

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