@if (connection().type === 'toolset') {
  <div class="px-2 pb-1">
    {{ 'XP.Xpert.AccessTools' | translate: { Default: 'Access Tools' } }}:
    @if (selectedAll()) {
      <span class="mx-1 text-sm font-semibold">{{ 'XP.Xpert.All' | translate: { Default: 'All' } }}</span>
    } @else {
      <span class="mx-1 text-sm font-semibold">{{ 'XP.Xpert.Partial' | translate: { Default: 'Partial' } }}</span>
    }
  </div>
  <ul cdkListbox cdkListboxMultiple [ngModel]="availableTools()" (ngModelChange)="updateAvailableTools($event)">
    @for (tool of tools(); track tool.name) {
      <li
        [cdkOption]="tool.name"
        class="tool-option relative flex items-center cursor-pointer rounded-lg pl-6 pr-2 py-1 hover:bg-hover-bg"
      >
        {{ tool.name }}
      </li>
    }
  </ul>
}

@if (isSubAgentConnection()) {
  <label class="flex items-start gap-3 rounded-lg px-2 py-2 text-sm">
    <input
      type="checkbox"
      class="mt-1 h-4 w-4 shrink-0"
      [ngModel]="requiredSubAgent()"
      (ngModelChange)="updateSubAgentRequired($event)"
      [disabled]="connection().readonly"
    />
    <span class="min-w-0 flex-1">
      <span class="block font-medium">
        {{ 'XP.Xpert.RequiredSubAgent' | translate: { Default: 'Required sub-agent' } }}
      </span>
      <span class="mt-1 block text-xs leading-5 text-text-tertiary">
        {{
          'XP.Xpert.RequiredSubAgentTooltip'
            | translate
              : {
                  Default:
                    'Always make this sub-agent available at runtime and hide it from ChatKit sub-agent selection.'
                }
        }}
      </span>
    </span>
  </label>
}

@if (!connection().readonly) {
  <div class="w-full my-1 border-b border-solid border-divider-regular"></div>
  <div cdkMenuItem class="xp-cdk-menu-item danger" (click)="removeConnection()">
    <i class="ri-delete-bin-line mr-1"></i>
    <span>{{ 'XP.Xpert.RemoveConnection' | translate: { Default: 'Remove connection' } }}</span>
  </div>
}