<div class="card-header d-flex a-i-center gap-4 separator flex-no-shrink">
  <div class="flex-grow min-width-0">
    @if (selectedConversation()) {
      <c8y-input-group-editable
        ariaLabel="Conversation title"
        [ngModel]="selectedConversation()!.title"
        formGroupClass="m-b-0"
        [maxLength]="100"
        (save)="updateConversationTitle($event)"
      ></c8y-input-group-editable>
    } @else {
      <p class="conversation-picker__placeholder text-truncate text-muted">
        {{ 'New conversation' | translate }}
      </p>
    }
  </div>

  <ng-content></ng-content>

  <div
    class="dropdown flex-no-shrink"
    #convDropdown="bs-dropdown"
    dropdown
    c8yDropdownFocusTrap
    [insideClick]="true"
  >
    <button
      class="btn btn-icon dropdown-toggle"
      [attr.aria-label]="'Conversation history' | translate"
      [tooltip]="'Conversation history' | translate"
      placement="top"
      container="body"
      type="button"
      #historyToggle
      [adaptivePosition]="false"
      [delay]="500"
      dropdownToggle
    >
      <i c8yIcon="history"></i>
    </button>
    <div
      class="dropdown-menu dropdown-menu-right conversation-picker__menu"
      *dropdownMenu
    >
      <div class="sticky-top separator-bottom p-8">
        <p class="p-b-8 p-l-8">
          <strong>{{ 'Conversations' | translate }}</strong>
        </p>
        <div class="input-group input-group-search input-group-sm">
          <input
            class="form-control"
            [attr.aria-label]="'Search conversations' | translate"
            type="text"
            [value]="searchTerm()"
            [placeholder]="'Search…' | translate"
            (input)="onSearchInput($any($event.target).value)"
          />
          <span class="input-group-btn">
            <button
              class="btn btn-clean"
              [title]="(searchTerm() ? 'Clear search' : 'Search') | translate"
              type="button"
              data-dropdown-keep-open
              (click)="clearSearch()"
            >
              <i [c8yIcon]="searchTerm() ? 'close' : 'search'"></i>
            </button>
          </span>
        </div>
      </div>

      @if (isLoadingConversations()) {
        <div class="p-16 text-center">
          <c8y-loading></c8y-loading>
        </div>
      } @else if ((conversationPage()?.data?.length ?? 0) === 0) {
        <!-- The list changes as the user types in the search, so announce the empty result. -->
        <div
          class="p-16"
          role="status"
        >
          @if (searchTerm()) {
            <c8y-ui-empty-state
              [icon]="'search'"
              [title]="'No results to display.' | translate"
              [subtitle]="'Adjust or clear the search.' | translate"
              [horizontal]="true"
            ></c8y-ui-empty-state>
          } @else {
            <c8y-ui-empty-state
              [icon]="'history'"
              [title]="'No conversations to display.' | translate"
              [horizontal]="true"
            ></c8y-ui-empty-state>
          }
        </div>
      } @else {
        <ul class="list-unstyled m-0">
          @for (conv of conversationPage()!.data; track conv.id) {
            @let isSelected = conv.id === selectedConversation()?.id;
            <li
              class="conversation-picker__item d-flex a-i-center gap-8 p-t-8 p-b-8 p-l-16 p-r-16 separator-bottom"
              [class.conversation-picker__item--active]="isSelected"
            >
              <button
                class="btn-clean d-col flex-grow min-width-0 text-left"
                [attr.aria-current]="isSelected ? 'true' : null"
                type="button"
                (click)="convDropdown.hide(); selectConversation(conv)"
              >
                <span class="text-truncate">
                  <c8y-highlight
                    [text]="conv.title"
                    [pattern]="searchTerm()"
                  ></c8y-highlight>
                </span>
                @if (conv.updatedAt) {
                  <small class="text-muted text-nowrap">{{ conv.updatedAt | c8yDate }}</small>
                }
              </button>
              <c8y-popover-confirm
                class="flex-no-shrink showOnHover"
                [class.open]="rowConfirm.isOpen"
                [title]="'Delete conversation' | translate"
                [placement]="'bottom'"
                [outsideClick]="true"
                #rowConfirm
              >
                <button
                  class="btn-icon btn btn-sm"
                  [attr.aria-label]="'Delete conversation' | translate"
                  [tooltip]="'Delete conversation' | translate"
                  container="body"
                  aria-haspopup="dialog"
                  type="button"
                  [adaptivePosition]="false"
                  [delay]="500"
                  (click)="$event.stopPropagation(); confirmAndDelete(rowConfirm, conv)"
                >
                  <i c8yIcon="trash"></i>
                </button>
              </c8y-popover-confirm>
            </li>
          }
        </ul>
        @if (conversationPage()?.paging?.next) {
          <button
            class="btn btn-default btn-block m-t-8 m-b-8"
            [class.btn-pending]="isLoadingMore()"
            type="button"
            data-dropdown-keep-open
            [disabled]="isLoadingMore()"
            (click)="loadMoreConversations()"
          >
            {{ loadMoreConversationsLabel | translate }}
          </button>
        }
      }
    </div>
  </div>

  <c8y-popover-confirm
    class="flex-no-shrink"
    [title]="'Delete conversation' | translate"
    [placement]="'bottom'"
    [outsideClick]="true"
    [adaptivePosition]="true"
    #headerConfirm
  >
    <button
      class="btn btn-icon"
      [attr.aria-label]="'Delete conversation' | translate"
      [tooltip]="'Delete conversation' | translate"
      container="body"
      aria-haspopup="dialog"
      type="button"
      [adaptivePosition]="false"
      [delay]="500"
      [disabled]="!selectedConversation()"
      (click)="confirmAndDelete(headerConfirm, selectedConversation())"
    >
      <i c8yIcon="trash"></i>
    </button>
  </c8y-popover-confirm>
</div>