<c8y-ui-title-set title="'Device protocols' | translate"></c8y-ui-title-set>
<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-device-protocols"
    label="{{ 'Device protocols' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-device-protocols"
    label="{{ 'Device types' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <li
    class="navbar-form"
    action-bar-position="left"
    ng-show="!vm.showEmptyState()"
  >
    <label
      class="sr-only"
      for="dpFilter"
    >
      {{ 'Filter' | translate }}
    </label>
    <div class="input-group input-group-search">
      <input
        class="form-control ng-pristine ng-untouched ng-valid ng-empty"
        title="{{ 'Filter' | translate }}"
        id="dpFilter"
        placeholder="{{ 'Filter…' | translate }}"
        type="search"
        ng-model="vm.searchString"
        ng-model-options="{ debounce: 500 }"
      />
      <span class="input-group-addon">
        <i
          c8y-icon="search"
          ng-show="vm.searchString.length === 0 || !vm.searchString"
        ></i>
        <i
          class="text-muted"
          c8y-icon="times"
          ng-show="vm.searchString.length > 0"
          ng-click="vm.searchString = ''"
        ></i>
      </span>
    </div>
  </li>

  <button
    class="btn btn-link"
    title="{{ 'Add device protocol' | translate }}"
    data-cy="deviceProtocolView--Add-device-protocol"
    ng-click="vm.add()"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add device protocol' | translate }}
  </button>
  <c8y-device-protocol-import-button on-imported="vm.refresh()"></c8y-device-protocol-import-button>
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    data-cy="deviceProtocolView--Import-protocol"
    title="{{ 'Reload' | translate }}"
    ng-click="vm.refresh()"
    ng-disabled="vm.isLoading"
  >
    <i
      ng-class="{ 'icon-spin': vm.isLoading }"
      c8y-icon="refresh"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-ui-action-bar-set>

<c8y-help
  src="/docs/device-management-application/managing-device-types/#managing-device-types"
></c8y-help>

<c8y-ui-empty-state
  [icon]="vm.CONFIG.icon"
  [title]="'No device protocols to display.' | translate"
  [subtitle]="'Click below to add your first device protocol.' | translate"
  ng-show="vm.showEmptyState()"
>
  <button
    class="btn btn-primary"
    title="{{ 'Add device protocol' | translate }}"
    ng-click="vm.add()"
  >
    <i c8y-icon="{{ vm.CONFIG.icon }}"></i>
    {{ 'Add device protocol' | translate }}
  </button>
</c8y-ui-empty-state>

<c8y-device-protocol-list filter="vm.searchString"></c8y-device-protocol-list>
