<c8y-ui-action-bar-set>
  <c8y-if-allowed any-role="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_CREATE', 'ROLE_MANAGED_OBJECT_ADMIN', 'ROLE_MANAGED_OBJECT_CREATE']">
    <button
      title="{{ 'Import' | translate }}"
      class="btn btn-link"
      ng-click="vm.importDeviceType()"
    >
      <i c8y-icon="upload"></i>
      <span translate>Import</span>
    </button>
    <button
      title="{{ 'New' | translate }}"
      type="button"
      class="btn btn-dot"
      ng-click="vm.addDeviceType()"
    >
      <i c8y-icon="plus"></i>
      {{ 'New' | translate }}
    </button>
  </c8y-if-allowed>

  <c8y-refresh-btn></c8y-refresh-btn>
</c8y-ui-action-bar-set>

<!-- empty state -->
<div class="c8y-empty-state text-center m-t-40" ng-if="vm.deviceTypes.length === 0">
  <h1 class="c8y-icon c8y-icon-device-protocols c8y-icon-duocolor"></h1>
  <h3 translate>No device types found.</h3>
</div>
<!-- /.empty state -->

<div class="list-group" ng-if="vm.deviceTypes.length > 0">
  <div class="list-group-item d-flex" ng-repeat="deviceType in vm.deviceTypes | orderBy:'name'">
    <div class="list-item-actions">
      <c8y-if-allowed admin-mos="[deviceType.id]">
        <span class="dropdown settings" is-open="isopen" uib-dropdown>
          <button
            title="{{ 'Actions' | translate }}"
            type="button"
            class="dropdown-toggle c8y-dropdown btn-link"
            uib-dropdown-toggle
            aria-haspopup="true"
          >
            <i c8y-icon="ellipsis-v"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu="">
            <li>
              <button
                title="{{ 'Edit' | translate }}"
                type="button"
                ng-click="vm.navigateToDetails(deviceType)"
              >
                <i c8y-icon="pencil"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Export' | translate }}"
                type="button"
                ng-click="vm.onClickExport(deviceType)"
              >
                <i c8y-icon="download"></i>
                {{ 'Export' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Remove' | translate }}"
                type="button"
                ng-click="vm.onClickDelete(deviceType)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Remove' | translate }}
              </button>
            </li>
          </ul>
        </span>
      </c8y-if-allowed>
    </div>
    <div class="list-item-icon" ng-click="vm.navigateToDetails(deviceType)">
      <i c8y-icon="hdd-o"></i>
    </div>
    <div class="list-item-body" ng-click="vm.navigateToDetails(deviceType)">
      <span>{{ deviceType.name }}</span>

      <small class="text-muted hidden-sm hidden-xs">
        <strong>{{ 'Fieldbus type' | translate }}:</strong>
        <span>{{ vm.getFieldbusTypeLabel(deviceType) }}</span>
      </small>

      <small class="text-muted hidden-sm hidden-xs">
        <strong>{{ 'Fieldbus version' | translate }}:</strong>
        <span>{{ vm.getFieldbusVersion(deviceType) }}</span>
      </small>
    </div>
  </div>
  <c8y-load-more></c8y-load-more>
</div>
