<div class="modal-header dialog-header">
  <i c8y-icon="c8y-device-protocols"></i>
  <h4 translate id="modal-title">Import device protocol</h4>
</div>

<div class="modal-inner-scroll" style="max-height: calc(100vh - 335px)">
  <div class="modal-body" id="modal-body">
    <div class="legend form-block m-t-0">
      <span class="dot bg-primary-light dot-30">1</span>
      <strong translate>Select device protocol</strong>
    </div>

    <div class="form-group">
      <label translate>Select from predefined</label>
      <ui-select
        ng-model="vm.selectedPredefined"
        on-select="vm.onPredefinedDeviceTypeInfoSelected($model)"
        uis-open-close="onOpenClose(isOpen)"
      >
        <ui-select-match placeholder="{{ 'Select device protocol' | translate }}">
          {{ $select.selected.nameDisplay || $select.selected.name | translate }}
        </ui-select-match>
        <ui-select-choices
          position="down"
          repeat="deviceTypeInfo in vm.predefinedDeviceTypeInfos | filter:$select.search"
        >
          <div>
            <a
              class="btn btn-primary btn-xs showOnHover pull-right"
              uib-tooltip="{{ 'Download' | translate }}"
              aria-label="{{ 'Download' | translate }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
              download="{{ vm.downloadFileName(deviceTypeInfo) }}"
              ng-href="data:application/json;base64,{{ vm.downloadFileHref(deviceTypeInfo) }}"
            >
              <i c8y-icon="download"></i>
            </a>
            <span class="list-group-item-heading">
              <span ng-bind-html="deviceTypeInfo.name | highlight:$select.search"></span>
              <small
                ng-if="deviceTypeInfo.category"
                class="text-muted"
                ng-bind-html="deviceTypeInfo.category | highlight:$select.search"
              ></small>
            </span>
            <span class="list-group-item-text">
              <small
                class="text-muted"
                ng-bind-html="deviceTypeInfo.description | highlight:$select.search"
              ></small>
            </span>
          </div>
        </ui-select-choices>
      </ui-select>
    </div>

    <label for="file" translate>Or load it from a file</label>
    <div
      class="input-group"
      ng-file-select="vm.onCustomDeviceTypeFileSelected($files)"
      ng-class="{ 'has-error': vm.customDeviceTypeFeedback.type === 'error' }"
    >
      <input
        id="file"
        class="form-control"
        ng-model="vm.selection.custom.file.name"
        placeholder="{{ 'Select file to upload' | translate }}…"
        readonly
      />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" title="{{ 'Browse' | translate }}">
          <span><i c8y-icon="ellipsis-h"></i></span>
        </button>
      </span>
    </div>
    <c8y-feedback-panel feedback="vm.customDeviceTypeFeedback"></c8y-feedback-panel>
  </div>

  <div class="modal-body bg-level-1">
    <div class="legend from-block m-t-0">
      <span class="dot bg-primary-light dot-30">2</span>
      <strong translate>Save with the following name</strong>
    </div>
    <form name="vm.importForm">
      <div
        class="form-group"
        ng-class="{ 'has-error': vm.importForm.name.$dirty && vm.importForm.name.$invalid }"
      >
        <label for="name" translate>Name</label>
        <input
          class="form-control"
          id="name"
          name="name"
          ng-model="vm.selection.newName.value"
          placeholder="{{ 'e.g. My protocol' | translate }}"
          ng-change="vm.onNewNameEdited()"
          required
        />
      </div>
    </form>
  </div>
</div>

<div class="modal-footer">
  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Cancel' | translate }}"
    ng-click="vm.dismiss()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    title="{{ 'Import' | translate }}"
    ng-click="vm.import(selectedDeviceType)"
    ng-disabled="!((vm.selection.predefined.deviceType || vm.selection.custom.deviceType) && vm.importForm.$valid)"
  >
    {{ 'Import' | translate }}
  </button>
</div>
