<c8y-title>{{ 'Remote access' | translate }}</c8y-title>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    (click)="addEndpoint()"
    [disabled]="!protocolProviders?.length"
    [attr.data-cy]="'remoteAccessConfigurationList--add-endpoint'"
  >
    <i [c8yIcon]="'plus-circle'"></i>
    <span translate>Add endpoint</span>
  </button>
</c8y-action-bar-item>

<div class="content-fullpage d-flex d-col border-top">
  <c8y-data-grid
    [title]="gridTitle"
    [rows]="rows"
    [columns]="columns"
    [pagination]="pagination"
    (onReload)="reload()"
    [actionControls]="actionControls"
    [displayOptions]="displayOptions"
  >
    <c8y-ui-empty-state
      [icon]="'window-restore'"
      [title]="'No endpoints configured.' | translate"
      [subtitle]="'Click below to add your first endpoint.' | translate"
      [horizontal]="false"
    >
      <button
        class="btn btn-default"
        (click)="addEndpoint()"
        translate
      >
        Add endpoint
      </button>
    </c8y-ui-empty-state>
  </c8y-data-grid>
</div>