<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8y-icon="import"></i>
    <h4 id="modal-title" translate>Import SmartREST template</h4>
  </div>
  <div class="modal-inner-scroll" id="modal-body">
    <div class="modal-body">
      <div class="form-group">
        <label><span translate>Load from file</span></label>
        <div
          class="input-group"
          id="smartRestTemplateFileInput"
          ng-file-select="$ctrl.onSmartRestTemplateFileSelected($files)"
        >
          <input
            type="text"
            readonly
            required
            class="form-control"
            ng-model="$ctrl.selection.file.name"
            placeholder="{{ 'Select file to upload' | translate }}…"
          />
          <span class="input-group-btn">
            <button title="{{ 'Import' | translate }}" class="btn btn-primary">
              <span><i c8y-icon="upload"></i></span>
            </button>
          </span>
        </div>
      </div>
      <form name="importForm" novalidate>
        <div class="form-group">
          <label for="name"><span translate>Save with the following name</span></label>
          <input
            id="name"
            name="name"
            type="text"
            class="form-control"
            ng-model="$ctrl.selection.newName.value"
            ng-change="$ctrl.selection.newName.edited = true"
            placeholder="{{ 'Template name' | translate }}"
            required
          />
          <c8y-error-feedback field="importForm.name"></c8y-error-feedback>
        </div>
        <div class="form-group">
          <label for="externalId">
            <span translate>and template ID</span>
          </label>
          <input
            id="externalId"
            name="externalId"
            type="text"
            class="form-control"
            ng-model="$ctrl.selection.newExternalId.value"
            ng-model-options="{debounce: 800}"
            ng-change="$ctrl.selection.newExternalId.edited = true"
            c8y-validate-unique-external-id="{{ $ctrl.externalIdType }}"
            placeholder="{{ 'Template ID' | translate }}"
            required
          />
          <c8y-error-feedback field="importForm.externalId">
            <span ng-message="c8yUniqueExternalId" translate>
              This template ID is already in use. Select another one.
            </span>
          </c8y-error-feedback>
        </div>
      </form>
    </div>
  </div>
  <div class="modal-footer">
    <button
      title="{{ 'Cancel' | translate }}"
      type="button"
      class="btn btn-default"
      ng-click="$ctrl.cancel()"
      translate
    >
      Cancel
    </button>
    <button
      title="{{ 'Import' | translate }}"
      type="button"
      class="btn btn-primary"
      ng-click="$ctrl.importSelectedTemplate()"
      data-cy="importTemplate-modal--import-btn"
      ng-disabled="!($ctrl.selection.template && importForm.$valid)"
      translate
    >
      Import
    </button>
  </div>
</div>
