@if (shouldRender()) {
  <section
    class="cloud-sidebar-assistants"
    [class.is-collapsed]="collapsed()"
    [class.is-current-card]="isCurrentCardMode()"
    [class.is-embedded]="embedded()"
  >
    @if (isCurrentCardMode()) {
      @if (collapsed()) {
        <button
          type="button"
          class="cloud-sidebar-assistants__current-compact"
          [attr.aria-label]="currentAssistantLabel()"
          (click)="openClawXpert($event)"
        >
          <emoji-avatar
            class="cloud-sidebar-assistants__current-avatar"
            [xpAssistantProfile]="boundXpert()?.id || ''"
            [summary]="boundXpert()"
            zPlacement="right"
            xs
            [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"
                [xpAssistantProfile]="boundXpert()?.id || ''"
                [summary]="boundXpert()"
                zPlacement="right"
                xs
                [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>
                    {{ 'XP.Assistant.Online' | translate: { Default: 'Online' } }}
                    <span class="cloud-sidebar-assistants__current-separator">·</span>
                    {{ 'XP.Assistant.ActiveAssistant' | translate: { Default: 'Current assistant' } }}
                  } @else {
                    {{ 'XP.Assistant.NotConfigured' | translate: { Default: 'Not configured' } }}
                    <span class="cloud-sidebar-assistants__current-separator">·</span>
                    {{ 'XP.Assistant.Configure' | translate: { Default: 'Configure' } }}
                  }
                </span>
              </span>
              <i class="ri-arrow-right-s-line cloud-sidebar-assistants__current-chevron" aria-hidden="true"></i>
            </button>
            <button
              type="button"
              class="cloud-sidebar-assistants__current-config"
              [attr.aria-label]="'XP.Assistant.Configure' | translate: { Default: 'Configure' }"
              [zTooltip]="'XP.Assistant.Configure' | translate: { Default: 'Configure' }"
              zPosition="right"
              (click)="openClawXpertOverview($event)"
            >
              <i class="ri-equalizer-2-line"></i>
            </button>
            <button
              type="button"
              class="cloud-sidebar-assistants__current-action cloud-sidebar-assistants__current-action--primary"
              [attr.aria-label]="
                isClawXpertConfigured()
                  ? ('XP.Assistant.NewConversation' | translate: { Default: 'New conversation' })
                  : ('XP.Assistant.Configure' | translate: { Default: 'Configure' })
              "
              [zTooltip]="
                isClawXpertConfigured()
                  ? ('XP.Assistant.NewConversation' | translate: { Default: 'New conversation' })
                  : ('XP.Assistant.Configure' | translate: { Default: 'Configure' })
              "
              zPosition="right"
              (click)="startClawXpertConversation($event)"
            >
              <z-icon [zType]="isClawXpertConfigured() ? 'message-circle-more' : 'settings'"></z-icon>
              <span class="sr-only">
                @if (isClawXpertConfigured()) {
                  {{ 'XP.Assistant.NewConversation' | translate: { Default: 'New conversation' } }}
                } @else {
                  {{ 'XP.Assistant.Configure' | translate: { Default: 'Configure' } }}
                }
              </span>
            </button>
          </div>
        </div>
      }
    } @else {
      @if (!collapsed()) {
        <div class="cloud-sidebar-assistants__header group/assistants bg-transparent!" [class.is-open]="expanded()">
          <button
            type="button"
            [class]="
              embedded() ? 'cloud-sidebar-assistants__header-main flex-none!' : 'cloud-sidebar-assistants__header-main'
            "
            [disabled]="embedded()"
            [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">
                {{ 'XP.MENU.Assistants' | translate: { Default: 'Assistants' } }}
              </span>
            </span>
          </button>

          @if (embedded()) {
            <label
              class="mx-2 flex h-7 min-w-0 flex-1 items-center gap-1.5 rounded-md border border-divider-regular bg-components-input-bg-normal px-2 text-text-secondary focus-within:border-ring"
              [class]="
                query()
                  ? 'opacity-100'
                  : 'opacity-0 group-hover/assistants:opacity-100 group-focus-within/assistants:opacity-100 [@media(hover:none)]:opacity-100'
              "
            >
              <i class="ri-search-line shrink-0 text-sm" aria-hidden="true"></i>
              <input
                type="search"
                class="w-full min-w-0 flex-1 border-0 bg-transparent p-0 text-xs text-text-primary outline-none placeholder:text-text-tertiary"
                [value]="query()"
                [attr.aria-label]="'XP.Assistant.SearchAll' | translate: { Default: 'Search all assistants' }"
                [placeholder]="'XP.Assistant.SearchAll' | translate: { Default: 'Search all assistants' }"
                (input)="updateQuery($event)"
                (keydown.escape)="query.set(''); $event.stopPropagation()"
              />
            </label>
          }

          @if (activeBusinessAreaFilter(); as businessArea) {
            <button
              type="button"
              class="cloud-sidebar-assistants__business-area-filter"
              [attr.aria-label]="
                'XP.Sidebar.ClearBusinessAreaFilter'
                  | translate: { Default: 'Clear business area filter: ' + businessArea.name }
              "
              [attr.title]="businessArea.name"
              (click)="clearBusinessAreaFilter($event)"
            >
              <span>{{ businessArea.name }}</span>
              <i class="ri-close-line" aria-hidden="true"></i>
            </button>
          }

          <span class="cloud-sidebar-assistants__subtitle">{{
            hasAssistantFilter() ? filteredXperts().length : assistantHeaderCount()
          }}</span>

          @if (canCreateDigitalExpert()) {
            <button
              type="button"
              class="cloud-sidebar-assistants__create"
              [attr.aria-label]="'XP.Xpert.CreateDigitalExpert' | translate: { Default: 'Create digital expert' }"
              [zTooltip]="'XP.Xpert.CreateDigitalExpert' | translate: { Default: 'Create digital expert' }"
              zPosition="right"
              (click)="openCreateDigitalExpert($event)"
            >
              <i class="ri-add-line"></i>
            </button>
          }

          <button
            type="button"
            class="cloud-sidebar-assistants__header-toggle"
            [attr.aria-label]="'XP.MENU.Assistants' | translate: { Default: 'Assistants' }"
            [attr.aria-expanded]="expanded()"
            (click)="toggleExpanded()"
          >
            <i class="ri-arrow-down-s-line cloud-sidebar-assistants__chevron" [class.is-open]="expanded()"></i>
          </button>
        </div>

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

          @if (showCategoryFilters()) {
            <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"
          cdkDropList
          [cdkDropListData]="visibleXperts()"
          [cdkDropListDisabled]="collapsed()"
          (cdkDropListDropped)="dropAssistant($event)"
        >
          @for (xpert of visibleXperts(); track trackAssistant($index, xpert)) {
            <li
              class="cloud-sidebar-assistants__drag-row"
              cdkDrag
              cdkDragLockAxis="y"
              [cdkDragData]="xpert"
              [cdkDragDisabled]="collapsed()"
            >
              <div
                class="cloud-sidebar-assistants__item group relative"
                [class.is-active]="isActive(xpert)"
                (click)="openAssistant($event, xpert)"
              >
                @if (!collapsed()) {
                  <i class="ri-draggable cloud-sidebar-assistants__drag-handle" cdkDragHandle aria-hidden="true"></i>
                }
                <div class="cloud-sidebar-assistants__item-layout">
                  <emoji-avatar
                    xs
                    class="cloud-sidebar-assistants__avatar"
                    [xpAssistantProfile]="xpert.id"
                    [summary]="xpert"
                    zPlacement="right"
                    [avatar]="xpert.avatar"
                    [alt]="assistantLabel(xpert)"
                    [fallbackLabel]="assistantLabel(xpert)"
                  />

                  @if (!collapsed()) {
                    <span class="cloud-sidebar-assistants__content">
                      <span
                        class="cloud-sidebar-assistants__name text-text-secondary! group-hover:text-text-primary! group-focus-within:text-text-primary!"
                      >
                        @if (assistantBusinessAreaName(xpert); as businessAreaName) {
                          @if (canFilterByAssistantBusinessArea(xpert)) {
                            <button
                              type="button"
                              class="cloud-sidebar-assistants__business-area-link"
                              [class.is-active]="isBusinessAreaFilterActive(xpert)"
                              [attr.aria-label]="
                                'XP.Sidebar.FilterByBusinessArea'
                                  | translate: { Default: 'Filter assistants by ' + businessAreaName }
                              "
                              [attr.aria-pressed]="isBusinessAreaFilterActive(xpert)"
                              [attr.title]="businessAreaName"
                              [attr.data-initial]="assistantBusinessAreaInitial(xpert)"
                              (click)="filterByAssistantBusinessArea($event, xpert)"
                            >
                              <span class="cloud-sidebar-assistants__business-area-full">{{ businessAreaName }}</span>
                            </button>
                          } @else {
                            <span
                              class="cloud-sidebar-assistants__business-area-text"
                              [attr.data-initial]="assistantBusinessAreaInitial(xpert)"
                            >
                              <span class="cloud-sidebar-assistants__business-area-full">{{ businessAreaName }}</span>
                            </span>
                          }
                          <span
                            class="cloud-sidebar-assistants__business-area-separator"
                            aria-hidden="true"
                            [textContent]="' / '"
                          ></span>
                        }
                        <span class="cloud-sidebar-assistants__assistant-name">{{ assistantName(xpert) }}</span>
                      </span>
                      <span class="cloud-sidebar-assistants__description">{{ assistantDescription(xpert) }}</span>
                    </span>
                  }
                </div>

                @if (!collapsed()) {
                  @if (hasAssistantUnread(xpert)) {
                    <span class="cloud-sidebar-assistants__status absolute"></span>
                  }
                  @if (canEditAssistant(xpert)) {
                    <button
                      type="button"
                      class="cloud-sidebar-assistants__settings absolute right-1"
                      [attr.aria-label]="'XP.Assistant.OpenStudio' | translate: { Default: 'Edit' }"
                      (click)="openAssistantSettings($event, xpert)"
                    >
                      <i class="ri-equalizer-2-line"></i>
                    </button>
                  }
                  @if (embedded()) {
                    <button
                      type="button"
                      class="cloud-sidebar-assistants__item-toggle"
                      [attr.aria-label]="
                        (isAssistantExpanded(xpert) ? 'XP.Sidebar.CollapseAssistant' : 'XP.Sidebar.ExpandAssistant')
                          | translate
                            : { Default: isAssistantExpanded(xpert) ? 'Collapse assistant' : 'Expand assistant' }
                      "
                      [attr.aria-expanded]="isAssistantExpanded(xpert)"
                      [attr.aria-controls]="assistantMenuId(xpert)"
                      (click)="toggleAssistantExpanded($event, xpert)"
                    >
                      <i
                        class="cloud-sidebar-assistants__item-chevron text-text-secondary! group-hover:text-text-primary!"
                        [class.ri-arrow-right-s-line]="!isAssistantExpanded(xpert)"
                        [class.ri-arrow-down-s-line]="isAssistantExpanded(xpert)"
                        aria-hidden="true"
                      ></i>
                    </button>
                  }
                }
              </div>

              @if (embedded() && !collapsed() && isAssistantExpanded(xpert)) {
                <div
                  class="cloud-sidebar-assistants__children"
                  [id]="assistantMenuId(xpert)"
                  role="group"
                  [attr.aria-label]="assistantLabel(xpert)"
                >
                  @if (assistantMenuState(xpert).loading) {
                    <div class="cloud-sidebar-assistants__children-state">
                      {{ 'XP.Sidebar.LoadingAssistantViews' | translate: { Default: 'Loading views...' } }}
                    </div>
                  } @else if (assistantMenuState(xpert).items.length) {
                    @for (item of assistantMenuState(xpert).items; track item.viewKey) {
                      <button
                        type="button"
                        class="flex h-8 w-full min-w-0 cursor-pointer items-center gap-1 rounded-md border-0 px-2 py-1 text-left text-sm leading-5 transition-colors hover:bg-hover-bg hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        [class]="
                          isAssistantMenuItemActive(xpert, item)
                            ? 'cloud-sidebar-assistants__child-item is-active bg-components-list-option-active-bg text-text-primary'
                            : 'cloud-sidebar-assistants__child-item bg-transparent text-text-secondary'
                        "
                        [attr.aria-label]="item.title"
                        [attr.aria-current]="isAssistantMenuItemActive(xpert, item) ? 'page' : null"
                        (click)="openAssistantMenuItem($event, xpert, item)"
                      >
                        @if (item.icon) {
                          <xp-icon
                            class="cloud-sidebar-assistants__child-icon flex items-center justify-center"
                            [icon]="item.icon"
                            [size]="14"
                            aria-hidden="true"
                          />
                        } @else {
                          <i class="ri-file-list-3-line cloud-sidebar-assistants__child-icon" aria-hidden="true"></i>
                        }
                        <span class="min-w-0 truncate">{{ item.title }}</span>
                      </button>
                    }
                  } @else {
                    <div class="cloud-sidebar-assistants__children-state">
                      {{ 'XP.Sidebar.NoAssistantViews' | translate: { Default: 'No views yet' } }}
                    </div>
                  }

                  <section
                    class="cloud-sidebar-assistants__recent-conversations"
                    [attr.aria-label]="
                      'XP.Sidebar.RecentConversations' | translate: { Default: 'Recent conversations' }
                    "
                  >
                    <div class="cloud-sidebar-assistants__children-label">
                      {{ 'XP.Sidebar.RecentConversations' | translate: { Default: 'Recent conversations' } }}
                    </div>

                    @if (
                      assistantConversationState(xpert).loading && assistantConversationState(xpert).items.length === 0
                    ) {
                      <div class="cloud-sidebar-assistants__children-state">
                        {{
                          'XP.Sidebar.LoadingRecentConversations' | translate: { Default: 'Loading conversations...' }
                        }}
                      </div>
                    } @else if (assistantConversationState(xpert).error) {
                      <div class="cloud-sidebar-assistants__children-state">
                        {{
                          'XP.Sidebar.RecentConversationsLoadFailed'
                            | translate: { Default: 'Could not load conversations' }
                        }}
                      </div>
                    } @else if (assistantConversationState(xpert).items.length) {
                      @for (group of assistantConversationGroups(xpert); track group.name) {
                        <div class="cloud-sidebar-assistants__conversation-group-label">
                          {{
                            (group.name === 'Pinned'
                              ? 'XP.Sidebar.PinnedConversations'
                              : 'XP.KEY_WORDS.Date_' + group.name
                            ) | translate: { Default: group.name }
                          }}
                        </div>

                        @for (conversation of group.values; track conversation.id || conversation.threadId) {
                          <xp-sidebar-conversation
                            [conversation]="conversation"
                            [route]="assistantConversationRoute(xpert, conversation)"
                            [active]="isAssistantConversationActive(xpert, conversation)"
                            [compact]="true"
                            [preserveQueryParams]="true"
                          />
                        }
                      }

                      @if (
                        canLoadEarlierConversations(xpert) ||
                        (assistantConversationState(xpert).loading &&
                          assistantConversationState(xpert).items.length > 0)
                      ) {
                        <button
                          type="button"
                          class="cloud-sidebar-assistants__load-earlier"
                          [disabled]="assistantConversationState(xpert).loading"
                          (click)="loadEarlierConversations($event, xpert)"
                        >
                          @if (assistantConversationState(xpert).loading) {
                            {{
                              'XP.Sidebar.LoadingRecentConversations'
                                | translate: { Default: 'Loading conversations...' }
                            }}
                          } @else {
                            {{
                              'XP.Sidebar.LoadEarlierConversations'
                                | translate: { Default: 'Load earlier conversations' }
                            }}
                          }
                        </button>
                      }
                    } @else if (assistantConversationState(xpert).loaded) {
                      <div class="cloud-sidebar-assistants__children-state">
                        {{ 'XP.Sidebar.NoRecentConversations' | translate: { Default: 'No recent conversations' } }}
                      </div>
                    }
                    <xp-sidebar-conversation-archive
                      [xpertId]="xpert.id"
                      [routeBase]="['/chat/x', xpert.slug || xpert.id, 'c']"
                    />
                  </section>
                </div>
              }
            </li>
          } @empty {
            @if (!collapsed() && hasAssistantFilter()) {
              <li class="cloud-sidebar-assistants__empty">
                {{ 'XP.Assistant.EmptySearch' | translate: { Default: 'No matching assistants.' } }}
              </li>
            }
          }

          @if (!collapsed() && hiddenAssistantCount() > 0) {
            <li>
              <button
                type="button"
                class="cloud-sidebar-assistants__more mx-auto flex min-h-11 cursor-pointer items-center border-0 bg-transparent px-3 text-left text-text-secondary underline-offset-2 hover:text-text-primary hover:underline focus-visible:text-text-primary focus-visible:underline focus-visible:outline-none"
                [class]="embedded() ? 'mt-1 min-h-9! justify-center text-center' : ''"
                [class.is-open]="moreExpanded()"
                [attr.aria-expanded]="moreExpanded()"
                (click)="toggleMore($event)"
              >
                <span class="cloud-sidebar-assistants__more-label min-w-0 truncate text-sm font-medium leading-5">
                  @if (moreExpanded()) {
                    {{ 'XP.Assistant.CollapseDigitalExperts' | translate: { Default: 'Show less' } }}
                  } @else {
                    {{ 'XP.Assistant.MoreDigitalExperts' | translate: { Default: 'Show all' } }}
                  }
                </span>
              </button>
            </li>
          }
        </ul>
      }
    }
  </section>
}