<c8y-modal
  [title]="title"
  [headerClasses]="'dialog-header'"
  (onDismiss)="cancel()"
  [labels]="{ cancel: 'Cancel' }"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'laptop'"></span>
  </ng-container>
  <div>
    @for (provider of protocolProviders; track provider.protocolName) {
      <c8y-li>
        <c8y-li-icon>
          <i [c8yIcon]="provider.protocolIcon"></i>
        </c8y-li-icon>
        <c8y-li-body>
          <div class="d-flex j-c-between">
            <div>
              <p>{{ provider.protocolLabel | translate }}</p>
              <p>
                <small>{{ provider.protocolDescription | translate }}</small>
              </p>
            </div>
            <div>
              <button
                class="btn btn-primary"
                (click)="selectProtocol(provider)"
                [attr.data-cy]="'remoteAccessPickProtocolModal--select-' + provider.protocolName"
              >
                <span translate>Select</span>
              </button>
            </div>
          </div>
        </c8y-li-body>
      </c8y-li>
    }
  </div>
</c8y-modal>