<div>
  <div class="c8y-wizard-nav">
    <i title="{{ 'Create legacy smartapp' | translate }}" c8y-icon="code"></i>
    <span translate>Create legacy smartapp</span>
  </div>

  <form name="smartAppForm" class="c8y-wizard-form">
    <div class="form-group" ng-class="{ 'has-error': vm.invalid(smartAppForm.name) }">
      <label for="name"><span translate>Name</span></label>
      <input
        type="text"
        class="form-control"
        id="name"
        name="name"
        ng-model="vm.wizardCtrl.data.smartApp.name"
        placeholder="{{ 'e.g. My smart application' | translate }}"
        required
        ng-maxlength="120"
        uib-tooltip="{{ vm.validationHints(smartAppForm.name) }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      />
    </div>

    <div class="form-group" ng-class="{ 'has-error': vm.invalid(smartAppForm.contextPath) }">
      <label for="contextPath"><span translate>Path</span></label>
      <div class="input-group">
        <span class="input-group-addon">{{ vm.host }}/apps/</span>
        <input
          type="text"
          class="form-control"
          id="contextPath"
          name="contextPath"
          ng-model="vm.wizardCtrl.data.smartApp.contextPath"
          placeholder="{{ 'e.g. smart-application' | translate }}"
          required
          ng-maxlentgh="120"
          uib-tooltip="{{ vm.validationHints(smartAppForm.contextPath) }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
          c8y-application-context-path
        />
      </div>
    </div>
  </form>

  <div class="c8y-wizard-footer">
    <button
      class="btn btn-default"
      type="button"
      title="{{ 'Back' | translate }}"
      ng-click="vm.wizardCtrl.goTo('menu')"
    >
      {{ '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="button"
      title="{{ 'Create' | translate }}"
      ng-click="vm.create()"
      ng-disabled="smartAppForm.$invalid"
    >
      {{ 'Create' | translate }}
    </button>
  </div>
</div>
