@if (connectionContext) {
  @if (selectedDefinition()) {
    <ng-container [ngTemplateOutlet]="connectorDialog" />
  } @else {
    <div xpDialogLayout="standard" class="w-[560px] max-w-full max-h-[85dvh]">
      <header xpDialogHeader>
        <h2 xpDialogHeading id="workspace-connector-dialog-title">
          {{ 'XP.Xpert.Connectors' | translate: { Default: 'Connectors' } }}
        </h2>
        <button
          type="button"
          z-button
          zType="ghost"
          zSize="icon"
          xpDialogCloseButton
          [attr.aria-label]="'XP.ACTIONS.Close' | translate: { Default: 'Close' }"
          (click)="closeConnectorDialog()"
        >
          <z-icon zType="x" />
        </button>
      </header>
      <div xpDialogBody class="relative min-h-24">
        @if (errorMessage(); as error) {
          <p role="alert" class="text-destructive">{{ error }}</p>
        } @else {
          <xp-spin />
        }
      </div>
      <footer xpDialogFooter>
        <button z-button zType="outline" type="button" (click)="closeConnectorDialog()">
          {{ 'XP.ACTIONS.Close' | translate: { Default: 'Close' } }}
        </button>
        @if (errorMessage()) {
          <button z-button type="button" [zLoading]="loading()" [zDisabled]="loading()" (click)="refresh()">
            {{ 'XP.ACTIONS.Refresh' | translate: { Default: 'Refresh' } }}
          </button>
        }
      </footer>
    </div>
  }
} @else {
  <div class="relative min-h-full bg-background-body px-6 py-5 xl:px-10">
    <div class="w-full">
      <div class="mb-3 flex justify-end">
        <button
          z-button
          zType="ghost"
          zSize="icon"
          type="button"
          data-connector-action="refresh"
          [zDisabled]="loading()"
          [zTooltip]="
            'XP.Xpert.RefreshConnectorsTooltip' | translate: { Default: 'Refresh connector list and connection status' }
          "
          [attr.aria-label]="'XP.ACTIONS.Refresh' | translate: { Default: 'Refresh' }"
          (click)="refresh()"
        >
          <z-icon [zType]="refreshIcon" [class]="loading() ? 'animate-spin' : ''" />
        </button>
      </div>

      @if (errorMessage(); as error) {
        <div
          class="mb-4 flex items-start gap-2 rounded-lg border border-danger-500/30 bg-danger-500/10 px-3 py-2 text-sm text-text-danger"
        >
          <z-icon [zType]="errorIcon" class="mt-0.5 size-4 shrink-0" />
          <span>{{ error }}</span>
        </div>
      }

      <section aria-label="Connector catalog">
        @if (loading() && definitions().length === 0) {
          <div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,20rem),1fr))] gap-3">
            @for (card of skeletonCards; track card) {
              <div class="h-[116px] animate-pulse rounded-lg border border-divider-regular bg-components-card-bg"></div>
            }
          </div>
        } @else if (definitions().length === 0) {
          <div class="flex min-h-56 flex-col items-center justify-center gap-2 text-center">
            <z-icon [zType]="connectorIcon" class="size-8 text-text-tertiary" />
            <p class="text-sm font-medium text-text-primary">
              {{ 'XP.Xpert.NoConnectorsAvailable' | translate: { Default: 'No connectors are currently available.' } }}
            </p>
          </div>
        } @else if (filteredDefinitions().length === 0) {
          <div class="flex min-h-56 flex-col items-center justify-center gap-2 text-center">
            <z-icon zType="search" class="size-8 text-text-tertiary" />
            <p class="text-sm font-medium text-text-primary">
              {{ 'XP.Xpert.NoMatchingConnectors' | translate: { Default: 'No matching connectors found.' } }}
            </p>
            <button z-button zType="ghost" zSize="sm" type="button" (click)="searchQuery.set('')">
              {{ 'XP.ACTIONS.Clear' | translate: { Default: 'Clear search' } }}
            </button>
          </div>
        } @else {
          <div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,20rem),1fr))] gap-3" data-connector-grid>
            @for (definition of filteredDefinitions(); track definition.provider) {
              @let binding = bindingFor(definition);
              @let status = statusLabelFor(binding);

              <article
                [class]="
                  binding
                    ? 'group relative flex min-h-[116px] items-start gap-2 rounded-lg border border-divider-regular bg-background-default-subtle p-4 transition-colors'
                    : 'group relative flex min-h-[116px] items-start gap-2 rounded-lg border border-divider-regular bg-components-card-bg p-4 transition-colors hover:bg-background-default-subtle'
                "
                [attr.data-connector-provider]="definition.provider"
              >
                <button
                  type="button"
                  class="flex min-w-0 flex-1 cursor-pointer items-start gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
                  data-connector-action="open-details"
                  [attr.aria-label]="definition.label | i18n"
                  (click)="openConnectorDialog(definition)"
                >
                  <div
                    class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-divider-regular bg-components-card-bg"
                  >
                    @if (definition.icon; as icon) {
                      <xp-icon
                        [icon]="icon"
                        [size]="28"
                        class="flex size-7 items-center justify-center text-2xl leading-none"
                      />
                    } @else {
                      <z-icon [zType]="connectorIcon" class="size-5 text-text-secondary" />
                    }
                  </div>

                  <div class="min-w-0 flex-1">
                    <div class="flex min-w-0 items-center gap-2">
                      <h2 class="truncate text-base font-semibold text-text-primary">{{ definition.label | i18n }}</h2>
                      <span class="inline-flex shrink-0 items-center gap-1.5 text-sm text-text-secondary">
                        <span class="size-1.5 rounded-full" [class]="statusDotClass(binding)"></span>
                        {{ status.key | translate: { Default: status.defaultLabel } }}
                      </span>
                    </div>
                    <p class="mt-1.5 line-clamp-2 text-sm leading-5 text-text-secondary">
                      {{ descriptionFor(definition) | i18n }}
                    </p>
                  </div>
                </button>

                @if (!binding) {
                  @if (canManageWorkspace()) {
                    <button
                      z-button
                      zType="ghost"
                      zSize="icon-sm"
                      type="button"
                      class="!size-10 shrink-0 cursor-pointer rounded-lg !bg-hover-bg text-text-secondary transition-[background-color,color,transform] hover:!bg-components-list-option-active-bg hover:text-text-primary active:scale-95 disabled:cursor-default"
                      data-connector-action="quick-connect"
                      [zDisabled]="!!definition.unavailable || loading() || isConnecting(binding, definition)"
                      [attr.aria-label]="'XP.Xpert.ConnectConnector' | translate: { Default: 'Connect connector' }"
                      (click)="quickConnect(definition)"
                    >
                      @if (isConnecting(binding, definition)) {
                        <z-icon [zType]="loadingIcon" class="!size-5 animate-spin" />
                      } @else {
                        <z-icon zType="plus" class="!size-5" />
                      }
                    </button>
                  }
                } @else if (binding.status === 'pending' && pendingAuthorizationUrl(binding)) {
                  <button
                    z-button
                    zType="ghost"
                    zSize="sm"
                    type="button"
                    class="!h-10 shrink-0 cursor-pointer gap-1.5 rounded-lg !bg-hover-bg px-3 text-text-primary transition-[background-color,color,transform] hover:!bg-components-list-option-active-bg active:scale-[0.98] disabled:cursor-default"
                    data-connector-action="continue-authorization"
                    [zDisabled]="loading() || !canManageWorkspace()"
                    (click)="openPendingAuthorizationUrl(binding)"
                  >
                    <z-icon zType="arrow-up-right" class="!size-5" />
                    {{ 'XP.Xpert.ConnectorOpenAuthorization' | translate: { Default: 'Continue authorization' } }}
                  </button>
                } @else if (binding.status === 'active' && canManageWorkspace()) {
                  <button
                    z-button
                    zType="ghost"
                    zSize="icon-sm"
                    type="button"
                    class="!size-10 shrink-0 cursor-pointer rounded-lg !bg-hover-bg text-text-secondary transition-[background-color,color,transform] hover:!bg-components-list-option-active-bg hover:text-text-primary active:scale-95 disabled:cursor-default"
                    data-connector-action="disconnect"
                    [zDisabled]="loading() || isDisconnecting(binding)"
                    [attr.aria-label]="'XP.Xpert.ConnectorDisconnect' | translate: { Default: 'Disconnect' }"
                    (click)="disconnect(binding)"
                  >
                    @if (isDisconnecting(binding)) {
                      <z-icon [zType]="loadingIcon" class="!size-5 animate-spin" />
                    } @else {
                      <z-icon [zType]="disconnectIcon" class="!size-5" />
                    }
                  </button>
                } @else if (canManageWorkspace() && binding.status !== 'active') {
                  <button
                    z-button
                    zType="ghost"
                    zSize="icon-sm"
                    type="button"
                    class="!size-10 shrink-0 cursor-pointer rounded-lg !bg-hover-bg text-text-secondary transition-[background-color,color,transform] hover:!bg-components-list-option-active-bg hover:text-text-primary active:scale-95 disabled:cursor-default"
                    data-connector-action="quick-connect"
                    [zDisabled]="!!definition.unavailable || loading() || isConnecting(binding)"
                    [attr.aria-label]="'XP.Xpert.ConnectConnector' | translate: { Default: 'Connect connector' }"
                    (click)="quickConnect(definition)"
                  >
                    @if (isConnecting(binding)) {
                      <z-icon [zType]="loadingIcon" class="!size-5 animate-spin" />
                    } @else {
                      <z-icon zType="plus" class="!size-5" />
                    }
                  </button>
                }
              </article>
            }
          </div>
        }
      </section>
    </div>
  </div>
}

<ng-template #connectorDialog>
  @if (selectedDefinition(); as definition) {
    @let binding = bindingFor(definition);
    @let status = statusLabelFor(binding);
    @let authMethods = authMethodsFor(definition);
    @let authMethod = selectedAuthMethod(binding, definition);
    @let bindingAuthMethod = binding ? authMethodForBinding(definition, binding) : null;
    @let credentialForm = credentialFormFor(authMethod);
    @let authorizationPresentation = authorizationPresentationFor(bindingAuthMethod);
    @let authorizationLink = pendingAuthorizationUrl(binding);

    <div
      xpDialogLayout="wide"
      xpDialogPurpose="workflow"
      class="max-w-full max-h-[85dvh]"
      [class]="authorizationPresentation && binding?.status === 'pending' ? 'w-[760px]' : 'w-[560px]'"
      data-connector-dialog
    >
      <header xpDialogHeader>
        <div class="flex min-w-0 items-center gap-3">
          <div
            class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-divider-regular bg-background-default-subtle"
          >
            @if (definition.icon; as icon) {
              <xp-icon
                [icon]="icon"
                [size]="32"
                class="flex size-8 items-center justify-center text-3xl leading-none"
              />
            } @else {
              <z-icon [zType]="connectorIcon" class="size-6 text-text-secondary" />
            }
          </div>
          <div class="min-w-0">
            <h2 id="workspace-connector-dialog-title" xpDialogHeading>
              {{ definition.label | i18n }}
            </h2>
            <div class="mt-1 flex items-center gap-1.5 text-xs text-text-secondary">
              <span class="size-1.5 rounded-full" [class]="statusDotClass(binding)"></span>
              {{ status.key | translate: { Default: status.defaultLabel } }}
            </div>
          </div>
        </div>
        <button
          z-button
          zType="ghost"
          zSize="icon"
          type="button"
          xpDialogCloseButton
          [attr.aria-label]="'XP.ACTIONS.Close' | translate: { Default: 'Close' }"
          (click)="closeConnectorDialog()"
        >
          <z-icon zType="x" />
        </button>
      </header>

      <div
        xpDialogBody
        class="[overflow-wrap:anywhere]"
        [class]="authorizationPresentation && binding?.status === 'pending' ? '' : 'space-y-4'"
      >
        @if (authorizationPresentation && binding?.status === 'pending' && authorizationLink) {
          <div class="py-4 sm:py-6" data-connector-authorization-qr>
            <div class="mx-auto flex w-full max-w-md flex-col items-center text-center">
              <h3 class="text-xl font-semibold text-text-primary">{{ authorizationPresentation.title | i18n }}</h3>
              <div class="mt-7 max-w-full rounded-lg bg-components-card-bg p-3">
                <qrcode
                  cssClass="flex max-w-full items-center justify-center [&_img]:max-w-full [&_img]:h-auto"
                  elementType="img"
                  [qrdata]="authorizationLink"
                  [width]="280"
                  [margin]="1"
                  [ariaLabel]="authorizationPresentation.ariaLabel | i18n"
                />
              </div>
              <p class="mt-5 max-w-xs text-sm leading-6 text-text-secondary">
                {{ authorizationPresentation.description | i18n }}
              </p>
              @if (isPolling(binding)) {
                <span class="mt-3 inline-flex items-center gap-1.5 text-xs text-text-tertiary">
                  <z-icon [zType]="loadingIcon" class="animate-spin" />
                  {{
                    'XP.Xpert.ConnectorAuthorizationPending'
                      | translate: { Default: 'Waiting for authorization to complete.' }
                  }}
                </span>
              }
            </div>
          </div>

          @if (binding.lastError) {
            <div class="mt-4 flex items-start gap-2 rounded-lg bg-danger-500/10 px-3 py-2.5 text-sm text-text-danger">
              <z-icon [zType]="errorIcon" class="mt-0.5 size-4 shrink-0" />
              <span class="min-w-0 [overflow-wrap:anywhere]">{{ binding.lastError }}</span>
            </div>
          }
        } @else {
          <p class="min-w-0 text-sm leading-6 text-text-secondary [overflow-wrap:anywhere]">
            {{ descriptionFor(definition) | i18n }}
          </p>
          @if (definition.unavailable) {
            <p role="alert" class="text-sm text-text-secondary">{{ definition.unavailable }}</p>
          }
          @if (credentialForm?.integration; as integration) {
            <xpert-connector-integration-form
              [workspaceId]="workspaceId()!"
              [provider]="definition.provider"
              [defaultName]="(definition.label | i18n) || definition.provider"
              [authMethodId]="authMethod!.id"
              [config]="integration"
              [savedIntegrationId]="connectionContext?.requiredIntegrationId || binding?.appIntegrationId"
              [readonly]="
                !!connectionContext?.requiredIntegrationId ||
                !canManageWorkspace() ||
                binding?.status === 'active' ||
                binding?.status === 'pending'
              "
            />
          }
          @if (binding?.authorizationMode === 'personal') {
            <p class="text-sm text-text-secondary">{{ 'XP.Xpert.ConnectorWorkspaceMigration' | translate }}</p>
          }

          @if (binding) {
            <div class="min-w-0 divide-y divide-divider-regular">
              <div class="flex min-w-0 items-start justify-between gap-4 py-3 text-sm">
                <span class="text-text-secondary">{{ 'XP.KEY_WORDS.Status' | translate: { Default: 'Status' } }}</span>
                <span class="inline-flex items-center gap-1.5 font-medium text-text-primary">
                  <span class="size-1.5 rounded-full" [class]="statusDotClass(binding)"></span>
                  {{ status.key | translate: { Default: status.defaultLabel } }}
                </span>
              </div>
              @if (binding.profile) {
                <div class="flex min-w-0 items-start justify-between gap-4 py-3 text-sm">
                  <span class="text-text-secondary">
                    {{ 'XP.Xpert.ConnectorConnectedAccount' | translate: { Default: 'Connected account' } }}
                  </span>
                  <span class="min-w-0 max-w-[65%] text-right font-medium text-text-primary [overflow-wrap:anywhere]">{{
                    profileLabel(binding)
                  }}</span>
                </div>
              }
              @if (binding.authMethodId) {
                <div class="flex min-w-0 items-start justify-between gap-4 py-3 text-sm">
                  <span class="text-text-secondary">
                    {{ 'XP.Xpert.ConnectorAuthenticationMethod' | translate: { Default: 'Authentication method' } }}
                  </span>
                  <span class="min-w-0 max-w-[65%] text-right font-medium text-text-primary [overflow-wrap:anywhere]">{{
                    binding.authMethodId
                  }}</span>
                </div>
              }
            </div>

            @if (binding.lastError) {
              <div class="flex items-start gap-2 rounded-lg bg-danger-500/10 px-3 py-2.5 text-sm text-text-danger">
                <z-icon [zType]="errorIcon" class="mt-0.5 size-4 shrink-0" />
                <span class="min-w-0 [overflow-wrap:anywhere]">{{ binding.lastError }}</span>
              </div>
            }
          }

          @if (binding?.status === 'pending') {
            <div xpDialogActionGroup="inline" class="flex flex-wrap items-center gap-2">
              @if (authorizationLink) {
                <button z-button type="button" zType="default" (click)="openPendingAuthorizationUrl(binding)">
                  <z-icon zType="arrow-up-right" />
                  {{ 'XP.Xpert.ConnectorOpenAuthorization' | translate: { Default: 'Continue authorization' } }}
                </button>
              }
              @if (isPolling(binding)) {
                <span class="inline-flex items-center gap-1.5 text-xs text-text-tertiary">
                  <z-icon [zType]="loadingIcon" class="animate-spin" />
                  {{
                    'XP.Xpert.ConnectorAuthorizationPending'
                      | translate: { Default: 'Waiting for authorization to complete.' }
                  }}
                </span>
              }
            </div>
          } @else if (canManageWorkspace() && binding?.status !== 'active') {
            <form class="grid gap-4" [formGroup]="formFor(binding, definition)">
              @if (authMethods.length > 1) {
                <z-form-field>
                  <z-form-label>
                    {{ 'XP.Xpert.ConnectorAuthenticationMethod' | translate: { Default: 'Authentication method' } }}
                  </z-form-label>
                  <z-select
                    class="w-full"
                    formControlName="authMethodId"
                    (zSelectionChange)="selectAuthMethod(binding, definition, $event)"
                  >
                    @for (method of authMethods; track method.id) {
                      <z-select-item [zValue]="method.id">{{ method.label | i18n }}</z-select-item>
                    }
                  </z-select>
                </z-form-field>
              }

              @for (field of credentialFieldsFor(authMethod); track field.name) {
                <z-form-field>
                  <z-form-label>
                    {{ field.label | i18n }}
                    @if (field.required) {
                      <span aria-hidden="true"> *</span>
                    }
                  </z-form-label>
                  <input
                    z-input
                    [attr.data-credential-field]="field.name"
                    [type]="field.type === 'password' || field.secret ? 'password' : 'text'"
                    [formControlName]="field.name"
                    [placeholder]="field.placeholder ? (field.placeholder | i18n) : ''"
                    [attr.autocomplete]="field.type === 'password' || field.secret ? 'new-password' : 'off'"
                  />
                  @if (field.description) {
                    <z-form-message>{{ field.description | i18n }}</z-form-message>
                  }
                  @if (
                    fieldControl(binding, definition, field)?.touched &&
                    fieldControl(binding, definition, field)?.hasError('required')
                  ) {
                    <z-form-message>
                      {{ 'XP.Xpert.ConnectorCredentialRequired' | translate: { Default: 'This field is required.' } }}
                    </z-form-message>
                  }
                </z-form-field>
              }

              @if (credentialForm?.help; as help) {
                <a
                  class="inline-flex w-fit items-center gap-1 text-xs text-text-secondary underline underline-offset-2"
                  [href]="help.url"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {{ help.label | i18n }}
                  <z-icon zType="arrow-up-right" class="size-3.5" />
                </a>
              }
            </form>
          } @else if (!canManageWorkspace()) {
            <div class="rounded-lg bg-background-default-subtle px-3 py-2.5 text-xs text-text-secondary">
              {{ 'XP.Xpert.ConnectorsReadonly' | translate }}
            </div>
          }
        }
      </div>

      <footer xpDialogFooter>
        @if (authorizationPresentation && binding?.status === 'pending') {
          <span class="mr-auto text-sm text-muted-foreground">{{
            authorizationPresentation.completionHint | i18n
          }}</span>
          <div class="flex flex-wrap items-center justify-end gap-2">
            <button
              z-button
              zType="outline"
              type="button"
              data-connector-action="cancel-authorization"
              class="text-text-danger"
              [zDisabled]="loading() || isCancelling(binding) || !canManageWorkspace()"
              [zLoading]="isCancelling(binding)"
              (click)="cancelAuthorization(binding)"
            >
              <z-icon [zType]="disconnectIcon" />
              {{ authorizationPresentation.cancelLabel | i18n }}
            </button>
            <button
              z-button
              zType="outline"
              type="button"
              data-connector-action="copy-authorization-url"
              [zDisabled]="!authorizationLink"
              (click)="copyPendingAuthorizationUrl(binding, authorizationPresentation)"
            >
              <z-icon zType="copy" />
              {{ authorizationPresentation.copyLinkLabel | i18n }}
            </button>
          </div>
        } @else {
          <button z-button zType="outline" type="button" (click)="closeConnectorDialog()">
            {{ 'XP.ACTIONS.Cancel' | translate: { Default: 'Cancel' } }}
          </button>

          @if (!binding) {
            @if (canManageWorkspace()) {
              <button
                z-button
                zType="default"
                type="button"
                data-connector-action="connect"
                [zDisabled]="!!definition.unavailable || loading() || isConnecting(binding, definition)"
                [zLoading]="isConnecting(binding, definition)"
                (click)="connect(binding, definition)"
              >
                <z-icon [zType]="connectorIcon" />
                {{ 'XP.Xpert.ConnectorConnect' | translate: { Default: 'Connect' } }}
              </button>
            }
          } @else {
            @if (binding.status === 'pending' && canManageWorkspace()) {
              <button
                z-button
                zType="outline"
                type="button"
                class="text-text-danger"
                data-connector-action="cancel-authorization"
                [zDisabled]="loading() || isCancelling(binding)"
                [zLoading]="isCancelling(binding)"
                (click)="cancelAuthorization(binding)"
              >
                <z-icon [zType]="disconnectIcon" />
                {{ 'XP.ACTIONS.Cancel' | translate: { Default: 'Cancel authorization' } }}
              </button>
            }

            @if (binding.status === 'active' && canManageWorkspace()) {
              <button
                z-button
                zType="outline"
                type="button"
                class="text-text-danger"
                data-connector-action="disconnect"
                [zDisabled]="loading() || isDisconnecting(binding)"
                [zLoading]="isDisconnecting(binding)"
                (click)="disconnect(binding)"
              >
                <z-icon [zType]="disconnectIcon" />
                {{ 'XP.Xpert.ConnectorDisconnect' | translate: { Default: 'Disconnect' } }}
              </button>
            } @else if (binding.status !== 'pending' && canManageWorkspace()) {
              <button
                z-button
                zType="default"
                type="button"
                data-connector-action="connect"
                [zDisabled]="!!definition.unavailable || loading() || isConnecting(binding)"
                [zLoading]="isConnecting(binding)"
                (click)="connect(binding, definition)"
              >
                <z-icon [zType]="connectorIcon" />
                {{ 'XP.Xpert.ConnectorConnect' | translate: { Default: 'Connect' } }}
              </button>
            }
          }
        }
      </footer>
    </div>
  }
</ng-template>