<div>
  <div class="c8y-wizard-nav">
    <i c8y-icon="external-link-square"></i>
    <span translate>External application</span>
  </div>

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

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

    <div class="form-group" ng-class="{ 'has-error': vm.invalid(externalAppForm.externalUrl) }">
      <label for="externalUrl"><span translate>External URL</span></label>
      <input
        id="externalUrl"
        name="externalUrl"
        type="url"
        ng-pattern="/^(?!javascript:).+/"
        class="form-control"
        ng-model="vm.wizardCtrl.data.externalApp.externalUrl"
        placeholder="{{ 'e.g.' | translate }} http://www.example.com"
        required
        uib-tooltip="{{ vm.validationHints(externalAppForm.externalUrl) }}"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
      />
    </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="{{ 'Save' | translate }}"
      ng-click="vm.save(vm.wizardCtrl.data.externalApp)"
      ng-disabled="externalAppForm.$invalid"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>
