@if (shouldRender()) {
  <section
    class="cloud-sidebar-assistants"
    [class.is-collapsed]="collapsed()"
    [class.is-current-card]="isCurrentCardMode()"
  >
    @if (isCurrentCardMode()) {
      @if (collapsed()) {
        <button
          type="button"
          class="cloud-sidebar-assistants__current-compact"
          [attr.aria-label]="currentAssistantLabel()"
          [zTooltip]="currentAssistantLabel()"
          zPosition="right"
          (click)="openClawXpert($event)"
        >
          <emoji-avatar
            class="cloud-sidebar-assistants__current-avatar"
            [avatar]="currentAssistantAvatar()"
            [alt]="currentAssistantLabel()"
            [fallbackLabel]="currentAssistantLabel()"
          />
        </button>
      } @else {
        <div class="cloud-sidebar-assistants__current-card">
          <div class="cloud-sidebar-assistants__current-header">
            <button
              type="button"
              class="cloud-sidebar-assistants__current-main"
              [attr.aria-label]="currentAssistantLabel()"
              (click)="openClawXpert($event)"
            >
              <emoji-avatar
                class="cloud-sidebar-assistants__current-avatar"
                [avatar]="currentAssistantAvatar()"
                [alt]="currentAssistantLabel()"
                [fallbackLabel]="currentAssistantLabel()"
              />

              <span class="cloud-sidebar-assistants__current-copy">
                <span class="cloud-sidebar-assistants__current-name">
                  {{ currentAssistantLabel() }}
                </span>
                <span class="cloud-sidebar-assistants__current-status">
                  @if (isClawXpertConfigured()) {
                    <span class="cloud-sidebar-assistants__current-status-dot"></span>
                    {{ 'PAC.Assistant.Online' | translate: { Default: 'Online' } }}
                    <span class="cloud-sidebar-assistants__current-separator">·</span>
                    {{ 'PAC.Assistant.ActiveAssistant' | translate: { Default: 'Current assistant' } }}
                  } @else {
                    {{ 'PAC.Assistant.NotConfigured' | translate: { Default: 'Not configured' } }}
                    <span class="cloud-sidebar-assistants__current-separator">·</span>
                    {{ 'PAC.Assistant.Configure' | translate: { Default: 'Configure' } }}
                  }
                </span>
              </span>
            </button>
            <button
              type="button"
              class="cloud-sidebar-assistants__current-config"
              [attr.aria-label]="'PAC.Assistant.Configure' | translate: { Default: 'Configure' }"
              [zTooltip]="'PAC.Assistant.Configure' | translate: { Default: 'Configure' }"
              zPosition="right"
              (click)="openClawXpertOverview($event)"
            >
              <i class="ri-equalizer-2-line"></i>
            </button>
          </div>

          <div class="cloud-sidebar-assistants__current-actions">
            <button
              type="button"
              class="cloud-sidebar-assistants__current-action cloud-sidebar-assistants__current-action--primary"
              (click)="startClawXpertConversation($event)"
            >
              <z-icon [zType]="isClawXpertConfigured() ? 'message-circle-more' : 'settings'"></z-icon>
              <span>
                @if (isClawXpertConfigured()) {
                  {{ 'PAC.Assistant.NewConversation' | translate: { Default: 'New conversation' } }}
                } @else {
                  {{ 'PAC.Assistant.Configure' | translate: { Default: 'Configure' } }}
                }
              </span>
            </button>
          </div>
        </div>
      }
    } @else {
      @if (!collapsed()) {
        <button
          type="button"
          class="cloud-sidebar-assistants__header"
          [class.is-open]="expanded()"
          [attr.aria-expanded]="expanded()"
          (click)="toggleExpanded()"
        >
          <span class="cloud-sidebar-assistants__header-icon">
            <i class="ri-robot-2-line"></i>
          </span>
          <span class="cloud-sidebar-assistants__header-copy">
            <span class="cloud-sidebar-assistants__title">
              {{ 'PAC.MENU.Assistants' | translate: { Default: 'Assistants' } }}
            </span>
          </span>
          <span class="cloud-sidebar-assistants__subtitle">{{ assistantCount() }}</span>
          <i class="ri-arrow-down-s-line cloud-sidebar-assistants__chevron" [class.is-open]="expanded()"></i>
        </button>

        @if (expanded()) {
          <label class="cloud-sidebar-assistants__search">
            <i class="ri-search-line"></i>
            <input
              type="search"
              [value]="query()"
              [placeholder]="'PAC.Assistant.Search' | translate: { Default: '搜索助手' }"
              (input)="updateQuery($event)"
            />
          </label>

          <div class="cloud-sidebar-assistants__filters" role="list">
            @for (categoryItem of categories(); track categoryItem.value) {
              <button
                type="button"
                class="cloud-sidebar-assistants__filter"
                [class.is-active]="activeCategory() === categoryItem.value"
                (click)="selectCategory(categoryItem.value)"
              >
                @if (categoryItem.labelKey) {
                  {{ categoryItem.labelKey | translate: { Default: categoryItem.labelDefault } }}
                } @else {
                  {{ categoryItem.labelDefault }}
                }
              </button>
            }
          </div>
        }
      }

      @if (collapsed() || expanded()) {
        <ul class="cloud-sidebar-assistants__list">
          @for (xpert of visibleXperts(); track trackAssistant($index, xpert)) {
            <li>
              <div
                class="cloud-sidebar-assistants__item relative"
                [class.is-active]="isActive(xpert)"
                [zTooltip]="assistantLabel(xpert)"
                zPosition="right"
                [zDisabled]="!collapsed()"
              >
                <button
                  type="button"
                  class="cloud-sidebar-assistants__item-main"
                  [attr.aria-label]="assistantLabel(xpert)"
                  (click)="openAssistant($event, xpert)"
                >
                  <emoji-avatar
                    class="cloud-sidebar-assistants__avatar"
                    [avatar]="xpert.avatar"
                    [alt]="assistantLabel(xpert)"
                    [fallbackLabel]="assistantLabel(xpert)"
                  />

                  @if (!collapsed()) {
                    <span class="cloud-sidebar-assistants__content">
                      <span class="cloud-sidebar-assistants__name">{{ assistantLabel(xpert) }}</span>
                      <span class="cloud-sidebar-assistants__description">{{ assistantDescription(xpert) }}</span>
                    </span>
                  }
                </button>

                @if (!collapsed()) {
                  @if (canEditAssistant(xpert)) {
                    <button
                      type="button"
                      class="cloud-sidebar-assistants__settings absolute right-1 bg-components-card-bg"
                      [attr.aria-label]="'PAC.Assistant.OpenStudio' | translate: { Default: '编排助手' }"
                      (click)="openAssistantSettings($event, xpert)"
                    >
                      <i class="ri-equalizer-2-line"></i>
                    </button>
                  }
                  @if (hasAssistantUnread(xpert)) {
                    <span class="cloud-sidebar-assistants__status absolute"></span>
                  }
                }
              </div>
            </li>
          } @empty {
            @if (!collapsed() && (query() || activeCategory() !== 'all')) {
              <li class="cloud-sidebar-assistants__empty">
                {{ 'PAC.Assistant.EmptySearch' | translate: { Default: 'No matching assistants.' } }}
              </li>
            }
          }

          @if (!collapsed() && hiddenAssistantCount() > 0) {
            <li>
              <button
                type="button"
                class="cloud-sidebar-assistants__more"
                [class.is-open]="moreExpanded()"
                [attr.aria-expanded]="moreExpanded()"
                (click)="toggleMore($event)"
              >
                <span class="cloud-sidebar-assistants__more-label">
                  @if (moreExpanded()) {
                    {{ 'PAC.Assistant.CollapseDigitalExperts' | translate: { Default: 'Show less' } }}
                  } @else {
                    {{ 'PAC.Assistant.MoreDigitalExperts' | translate: { Default: 'Show more' } }}
                  }
                </span>
              </button>
            </li>
          }
        </ul>
      }
    }
  </section>
}