<div>
  <div class="c8y-wizard-nav">
    <i c8y-icon="copy"></i>
    <span translate>Duplicate application</span>
  </div>
  <hr class="m-0" />
  <div class="c8y-wizard-body">
    <h4 class="app-title d-flex flex-center">
      <c8y-app-icon app="vm.wizardCtrl.data.appClone.srcApp" class="m-r-8"></c8y-app-icon>
      <span ng-bind="vm.wizardCtrl.data.appClone.srcApp | humanizeAppName"></span>
    </h4>
  </div>

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

      <div class="form-group" ng-class="{ 'has-error': invalid('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.appClone.destApp.key"
          ng-maxlength="120"
          placeholder="{{ 'e.g. my-application-key' | translate }}"
          required
          uib-tooltip="{{ validationHints('key') }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
        />
      </div>

      <div class="form-group" ng-class="{ 'has-error': invalid('contextPath') }">
        <label for="contextPath"><span translate>Path</span></label>
        <div class="input-group">
          <span class="input-group-addon">{{ ctrl.host }}/apps/</span>
          <input
            type="text"
            class="form-control"
            id="contextPath"
            name="contextPath"
            ng-model="vm.wizardCtrl.data.appClone.destApp.contextPath"
            placeholder="{{ 'e.g. my-application`used in URL`' | translate }}"
            required
            ng-maxlentgh="120"
            uib-tooltip="{{ validationHints('contextPath') }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            c8y-application-context-path
          />
        </div>
      </div>
    </div>
    <c8y-rectangle-spinner
      class="c8y-wizard-processing"
      ng-show="vm.cloneInProgress"
    ></c8y-rectangle-spinner>
  </form>

  <div class="c8y-wizard-footer">
    <button
      class="btn btn-default"
      type="button"
      title="{{ 'Back' | translate }}"
      ng-click="vm.wizardCtrl.goTo('clone1')"
      ng-disabled="vm.cloneInProgress"
    >
      {{ 'Back' | translate }}
    </button>
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="vm.wizardCtrl.dismiss()"
      ng-disabled="vm.cloneInProgress"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      type="button"
      title="{{ 'Duplicate' | translate }}"
      ng-click="vm.clone(); processing = true;"
      ng-disabled="appCloneForm.$invalid || vm.cloneInProgress"
    >
      {{ 'Duplicate' | translate }}
    </button>
  </div>
</div>
