@if (quotaCopilots()?.length) {
  <div class="text-lg px-2 py-2">
    {{ 'PAC.Copilot.FreeQuota' | translate: { Default: 'Free Quota' } }}
  </div>

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

@if (quotaCopilots()?.length) {
  <div class="text-lg px-2 py-4">
    {{ 'PAC.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">
          {{ 'PAC.KEY_WORDS.Primary' | translate: { Default: 'Primary' } }}
          {{ 'PAC.KEY_WORDS.Provider' | translate: { Default: 'Provider' } }}
        </div>
      </z-accordion-title>
      <z-accordion-description class="!flex-none">
        <z-switch
          labelPosition="before"
          [zTooltip]="'PAC.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>

    <pac-copilot-form [copilot]="primary()" />
  </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 {
                  {{
                    'PAC.KEY_WORDS.' + (copilot.role | capitalize) | translate: { Default: (copilot.role | capitalize) }
                  }}
                  {{ 'PAC.KEY_WORDS.Provider' | translate: { Default: 'Provider' } }}
                }
              </div>
            }
          </div>
        </z-accordion-title>
        <z-accordion-description class="!flex-none">
          <z-switch
            labelPosition="before"
            [zTooltip]="'PAC.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]="'PAC.ACTIONS.Delete' | translate: { Default: 'Delete' }"
              zPosition="top"
              (click)="deleteCopilot(copilot)"
            >
              <i class="ri-close-line"></i>
            </button>
          }
        </z-accordion-description>
      </z-accordion-header>

      <pac-copilot-form [copilot]="copilot" />
    </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> {{ 'PAC.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)">
        {{ 'PAC.KEY_WORDS.' + provider.label | translate: { Default: provider.label } }}
      </div>
    }
  </div>
</ng-template>

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