<div class="modal-inner-scroll">
  <div class="p-l-24 p-r-24 p-t-16 p-b-16 bg-component separator-bottom sticky-top">
    <p
      class="text-medium text-center m-0"
      translate
    >
      Select one of the available options
    </p>
    <p c8y-guide-docs>
      <small
        class="text-muted"
        translate
      >
        Find your protocol in the
        <a c8y-guide-href="/docs/protocol-integration/device-protocols">user documentation</a>
        to get more information.
      </small>
    </p>
  </div>
  <div class="list-group list-group-links">
    <button
      class="list-group-item"
      title="{{ protocol.name | translate }}"
      type="button"
      ng-repeat="protocol in vm.protocols | orderBy:'name'"
      ng-click="vm.protocolCtrl.select(protocol)"
    >
      <i c8y-icon="{{ protocol.icon || vm.CONFIG.icon }} m-r-4"></i>
      <span>{{ protocol.name | translate }}</span>
    </button>
  </div>

  <div class="bg-component modal-footer sticky-bottom">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="vm.wizardCtrl.dismiss()"
    >
      {{ 'Cancel' | translate }}
    </button>
  </div>
</div>
