<div class="c8y-list__group m-b-24">
  <div
    class="page-sticky-header c8y-list__item hidden-xs"
    ng-if="vm.protocols.length && (vm.protocols | filter: vm.filter).length"
  >
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon">
        <i class="p-l-16 p-r-4"></i>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-60">
          <div class="col-4" data-cy="deviceProtocolList--Device-protocol-column-name">
            {{ 'Device protocol' | translate }}
          </div>
          <div class="col-4" data-cy="deviceProtocolList--Description-column-name">
            {{ 'Description' | translate }}
          </div>
          <div class="col-2" data-cy="deviceProtocolList--Type-column-name">
            {{ 'Type' | translate }}
          </div>
          <div class="col-2" data-cy="deviceProtocolList--Resources-column-name">
            {{ 'Resources' | translate }}
          </div>
        </div>
      </div>
      <div class="c8y-list__item__actions">
        <div class="c8y-list__item--empty-actions"></div>
      </div>
    </div>
  </div>

  <div class="c8y-list__item" ng-repeat="protocol in vm.protocols | orderBy:['name', vm.getTitle]" data-cy="deviceProtocolSelect--Protocol-select">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon">
        <i c8y-icon="{{ vm.CONFIG.icon }}"></i>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-60">
          <div class="col-4">
            <span
              ng-if="::vm.isReadOnly(protocol)"
              class="text-truncate"
              title="{{::vm.getTitle(protocol)}}"
            >
              {{ ::vm.getTitle(protocol) }}
            </span>
            <button
              class="btn-clean text-truncate"
              type="button"
              title="{{::vm.getTitle(protocol)}}"
              ng-click="vm.edit(protocol)"
              ng-if="::!vm.isReadOnly(protocol)"
            >
              {{::vm.getTitle(protocol)}}
            </button>
          </div>

          <div class="col-4">
            <span class="text-label-small visible-xs" ng-if="::protocol.data.description.length">
              {{ 'Description' | translate }}
            </span>
            <span title="{{ ::vm.getDescription(protocol) }}" class="text-truncate-wrap small">
              {{::vm.getDescription(protocol)}}
            </span>
          </div>

          <div class="col-2">
            <span class="label label-info">
              {{::protocol.name}}
            </span>
          </div>

          <div class="col-2">
            <c8y-ui-component
              component-name="::vm.getRowInfoComponent(protocol)"
              data="protocol.data"
            ></c8y-ui-component>
          </div>
        </div>
      </div>
      <div class="c8y-list__item__actions">
        <span class="dropdown" uib-dropdown>
          <button
            class="dropdown-toggle c8y-dropdown"
            type="button"
            title="{{ 'Actions' | translate }}"
            uib-dropdown-toggle
            aria-haspopup="true"
          >
            <i c8y-icon="ellipsis-v"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
            <li ng-if="::!vm.isReadOnly(protocol)">
              <button type="button" title="{{ 'Edit' | translate }}" ng-click="vm.edit(protocol)">
                <i c8y-icon="edit"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                type="button"
                title="{{ 'Delete' | translate }}"
                ng-click="vm.remove(protocol)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Delete' | translate }}
              </button>
            </li>
            <li
              ng-repeat="action in vm.getProtocolActionsMemoized(protocol)"
              ng-if="::!vm.isReadOnly(protocol)"
            >
              <button
                type="button"
                title="{{ action.label | translate }}"
                ng-click="action.execute(protocol)"
              >
                <i c8y-icon="{{ action.icon }}"></i>
                {{ action.label | translate }}
              </button>
            </li>
          </ul>
        </span>
      </div>
    </div>
  </div>

  <c8y-load-more></c8y-load-more>

  <!-- no results when filtering -->
  <c8y-ui-empty-state
    ng-if="vm.protocols.length === 0 && vm.getSearchTerm().length > 0 && !vm.hasMore()"
    [icon]="'search'"
    [title]="'No results to display.' | translate"
    [subtitle]="'Refine your search terms or check your spelling.' | translate"
  ></c8y-ui-empty-state>
</div>
