@if (membership(); as membership) {
  <div
    class="mb-4 flex flex-col gap-3 rounded-xl border-[0.5px] border-divider-regular bg-components-card-bg px-4 py-3"
  >
    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
      <div class="min-w-0">
        <div class="text-sm text-text-tertiary">
          {{ 'XP.Membership.CurrentPlan' | translate: { Default: 'Current plan' } }}
        </div>
        <div class="mt-1 flex flex-wrap items-center gap-2">
          <div
            class="truncate font-semibold text-text-primary"
            [title]="membership.plan?.name || membership.membership.planId || '-'"
          >
            {{ membership.plan?.name || membership.membership.planId || '-' }}
          </div>
          @if (membership.membership.status === MembershipStatusEnum.Expired) {
            <z-badge zType="destructive" zShape="pill">
              {{ 'XP.Membership.PlanExpired' | translate: { Default: 'Membership plan expired' } }}
            </z-badge>
          }
          @if (membership.membership.status === MembershipStatusEnum.Paused) {
            <z-badge zType="secondary" zShape="pill">
              {{ 'XP.Membership.MemberStatuses.paused' | translate: { Default: 'Paused' } }}
            </z-badge>
          }
        </div>
      </div>

      <div class="grid shrink-0 grid-cols-1 gap-3 sm:grid-cols-2 sm:text-right">
        <div>
          <div class="text-sm text-text-tertiary">
            {{ 'XP.Membership.CyclePoints' | translate: { Default: 'Plan cycle points' } }}
          </div>
          <div class="mt-1 font-semibold text-text-primary">
            @if (isUnlimitedMembership()) {
              <span
                [attr.aria-label]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                [title]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                >∞</span
              >
            } @else {
              {{ membership.pointsRemaining | number: '1.0-2' }} /
              {{ membership.pointsGranted | number: '1.0-2' }}
            }
          </div>
          <div class="mt-1 text-xs text-text-tertiary">
            @if (membership.membership.status === MembershipStatusEnum.Expired) {
              {{ 'XP.Membership.PlanExpired' | translate: { Default: 'Membership plan expired' } }}
            } @else if (isUnlimitedMembership()) {
              {{ 'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' } }}
            } @else {
              {{ membershipRemainingPercent() | number: '1.0-0' }}%
              {{ 'XP.Membership.RemainingPoints' | translate: { Default: 'Remaining points' } }}
            }
          </div>
        </div>
        <div>
          <div class="text-sm text-text-tertiary">
            {{ 'XP.Membership.PersonalPoints' | translate: { Default: 'Personal points' } }}
          </div>
          <div class="mt-1 font-semibold text-text-primary">
            {{ membership.personalPointsBalance | number: '1.0-2' }}
          </div>
          <div class="mt-1 text-xs text-text-tertiary">
            {{ 'XP.Membership.Permanent' | translate: { Default: 'Permanent' } }}
          </div>
        </div>
      </div>
    </div>

    <div class="border-t border-divider-subtle pt-3 text-xs text-text-tertiary">
      @if (membership.personalPointsOnly) {
        <div class="mb-1 font-medium text-text-secondary">
          {{
            'XP.Membership.PersonalPointsOnlyHint'
              | translate: { Default: 'The membership plan is unavailable. Only personal points are currently used.' }
          }}
        </div>
      }
      <div>
        {{
          'XP.Membership.PersonalPointsHint'
            | translate
              : {
                  Default:
                    'Permanent. While the membership plan is active, cycle points are used first, then personal points.'
                }
        }}
      </div>
    </div>
  </div>
}

@if (tenantCopilots()?.length) {
  <div class="text-lg px-2 py-2">
    {{ 'XP.Membership.AllowedModels' | translate: { Default: 'Available models' } }}
  </div>

  @for (copilot of tenantCopilots(); track copilot.id) {
    <copilot-provider
      @disappear1
      readonly
      class="shadow-sm mb-2 rounded-xl border-[0.5px] border-black/5"
      [providerId]="copilot.modelProvider.id"
    />
  }
}

@if (tenantCopilots()?.length) {
  <div class="text-lg px-2 py-4">
    {{ 'XP.Copilot.CustomCopilots' | translate: { Default: 'Custom Copilots' } }}
  </div>
}
<z-accordion class="space-y-2">
  <z-accordion-item
    #expansion="zAccordionItem"
    hideToggle
    class="shadow-sm rounded-[1rem]"
    [disabled]="!primary()?.enabled"
    [expanded]="!!primary()?.enabled"
  >
    <z-accordion-header>
      <z-accordion-title>
        @if (primary(); as copilot) {
          @if (copilot.modelProvider?.provider && !expansion.expanded) {
            <div class="flex" [zTooltip]="copilot.id" zPosition="left">
              @if (copilot.modelProvider.provider.icon_large) {
                <img
                  alt="provider-icon"
                  class="w-auto h-6 ml-2"
                  [src]="copilot.modelProvider.provider.icon_large | i18n"
                />
              } @else {
                @if (copilot.modelProvider.provider.icon_small) {
                  <img
                    alt="provider-icon"
                    class="w-auto h-6 ml-2"
                    [src]="copilot.modelProvider.provider.icon_small | i18n"
                  />
                }
                <span class="ml-2">{{ copilot.modelProvider.provider.label | i18n }}</span>
              }
            </div>
          }
        }
        <div class="ml-2">
          {{ 'XP.KEY_WORDS.Primary' | translate: { Default: 'Primary' } }}
          {{ 'XP.KEY_WORDS.Provider' | translate: { Default: 'Provider' } }}
        </div>
      </z-accordion-title>
      <z-accordion-description class="!flex-none">
        <z-switch
          labelPosition="before"
          [zTooltip]="'XP.Copilot.EnableCopilot' | translate: { Default: 'Enable Copilot' }"
          zPosition="top"
          [checked]="primary()?.enabled"
          (change)="onToggle(null, eAiProviderRole.Primary, primary()?.enabled, expansion)"
          (click)="$event.stopPropagation()"
          zSize="sm"
        >
        </z-switch>
      </z-accordion-description>
    </z-accordion-header>

    <xp-copilot-form [copilot]="primary()" (saved)="copilotServer.refresh()" />
  </z-accordion-item>

  @for (copilot of copilots(); track copilot.id) {
    <z-accordion-item
      #expansion="zAccordionItem"
      hideToggle
      class="shadow-sm rounded-[1rem]"
      [disabled]="!copilot.enabled"
    >
      <z-accordion-header>
        <z-accordion-title>
          <div [zTooltip]="copilot.id" zPosition="left" class="flex">
            @if (copilot.modelProvider?.provider && !expansion.expanded) {
              @if (copilot.modelProvider.provider.icon_large) {
                <img
                  alt="provider-icon"
                  class="w-auto h-6 ml-2"
                  [src]="copilot.modelProvider.provider.icon_large | i18n"
                />
              } @else {
                @if (copilot.modelProvider.provider.icon_small) {
                  <img
                    alt="provider-icon"
                    class="w-auto h-6 ml-2"
                    [src]="copilot.modelProvider.provider.icon_small | i18n"
                  />
                }
                <span class="ml-2">{{ copilot.modelProvider.provider.label | i18n }}</span>
              }
            }
          </div>

          <div class="ml-2 flex items-center justify-start">
            @if (editingId() === copilot.id) {
              <input
                class="flex-1 bg-background-body focus-visible:outline-none p-1 rounded-xs"
                cdkFocusInitial
                type="text"
                [(ngModel)]="name"
                (click)="$event.stopPropagation()"
              />
              <button
                z-button
                zType="ghost"
                zSize="sm"
                class="ml-2 w-4 h-4 shrink-0 rounded-full"
                type="button"
                (click)="$event.stopPropagation(); saveCopilotName(copilot)"
              >
                <i class="ri-check-line text-lg"></i>
              </button>
            } @else {
              <div
                [ngClass]="expansion.expanded ? 'cursor-text' : ''"
                (click)="expansion.expanded ? editName($event, copilot) : null"
              >
                @if (copilot.name) {
                  {{ copilot.name }}
                } @else {
                  {{
                    'XP.KEY_WORDS.' + (copilot.role | capitalize) | translate: { Default: (copilot.role | capitalize) }
                  }}
                  {{ 'XP.KEY_WORDS.Provider' | translate: { Default: 'Provider' } }}
                }
              </div>
            }
          </div>
        </z-accordion-title>
        <z-accordion-description class="!flex-none">
          <z-switch
            labelPosition="before"
            [zTooltip]="'XP.Copilot.EnableCopilot' | translate: { Default: 'Enable Copilot' }"
            zPosition="top"
            [checked]="copilot.enabled"
            (change)="onToggle(copilot, null, copilot.enabled, expansion)"
            (click)="$event.stopPropagation()"
            zSize="sm"
          >
          </z-switch>
          @if (!copilot.enabled) {
            <button
              type="button"
              class="btn pressable danger rounded-full w-6 h-6 p-0 justify-center ml-2"
              [zTooltip]="'XP.ACTIONS.Delete' | translate: { Default: 'Delete' }"
              zPosition="top"
              (click)="deleteCopilot(copilot)"
            >
              <i class="ri-close-line"></i>
            </button>
          }
        </z-accordion-description>
      </z-accordion-header>

      <xp-copilot-form [copilot]="copilot" (saved)="copilotServer.refresh()" />
    </z-accordion-item>
  }
</z-accordion>

<div class="flex justify-end mt-2">
  <button type="button" class="btn btn-primary btn-large pressable" [cdkMenuTriggerFor]="addMenu">
    <i class="ri-apps-2-add-line"></i> {{ 'XP.ACTIONS.Add' | translate: { Default: 'Add' } }}
  </button>
</div>

<ng-template #addMenu>
  <div cdkMenu class="cdk-menu__large w-[200px] divide-y-2 p-2">
    @for (provider of providers(); track provider.value) {
      <div cdkMenuItem (click)="addProvider(provider.value)">
        {{ 'XP.KEY_WORDS.' + provider.label | translate: { Default: provider.label } }}
      </div>
    }
  </div>
</ng-template>

@if (loading()) {
  <xp-spin class="absolute top-0 left-0 w-full h-full" />
}