@if ((providers() | keyvalue).length > 0) {
  @if (selectedModel()) {
    <div class="container">
      <div
        class="selected-model"
        [class.disabled]="disabled()">
        <div class="model-name">
          <div
            class="body-m"
            paEllipsisTooltip>
            {{ selectedModelData()?.provider?.title }} - {{ selectedModelData()?.title || selectedModel() }}
          </div>
          @if (selectedModelData()?.description) {
            <div
              class="body-xs description"
              paEllipsisTooltip>
              {{ selectedModelData()?.description }}
            </div>
          }
        </div>
        <pa-button
          icon="edit"
          aspect="basic"
          size="small"
          [disabled]="disabled()"
          (click)="selectOption('')">
          {{ 'generic.delete' | translate }}
        </pa-button>
      </div>
      @if (showDisclaimer() && disclaimerText()) {
        <div class="disclaimer">
          <pa-expander [expanded]="disclaimerExpanded()">
            <pa-expander-header>
              <div class="title-s">{{ 'kb.ai-models.model-selector.disclaimer.title' | translate }}</div>
            </pa-expander-header>
            <pa-expander-body>
              <div class="disclaimer-body">
                <p class="body-m">
                  {{
                    'kb.ai-models.model-selector.disclaimer.description'
                      | translate: { model: selectedModelData()?.title || '' }
                  }}
                </p>
                <div>{{ disclaimerText() }}</div>
              </div>
            </pa-expander-body>
          </pa-expander>
        </div>
        <pa-checkbox
          [value]="accepted()"
          (valueChange)="updateAccepted($event)"
          noEllipsis>
          {{ 'kb.ai-models.model-selector.disclaimer.label' | translate: { model: selectedModelData()?.title || '' } }}
        </pa-checkbox>
      }
    </div>
  } @else {
    <pa-input
      icon="search"
      [value]="term()"
      (valueChange)="updateTerm($event)"
      [paPopup]="dropdown"
      #popup="paPopupRef"
      (keyUp)="openDropdown()"
      [externalLabel]="externalLabel()"
      [placeholder]="externalLabel() ? ('kb.ai-models.model-selector.search' | translate) : undefined"
      sameWidth>
      @if (!externalLabel()) {
        {{ 'kb.ai-models.model-selector.search' | translate }}
      }
    </pa-input>
    <pa-dropdown #dropdown>
      @if (filteredByTerm().length > 1) {
        <div class="filters">
          @for (provider of filteredByTerm(); track provider.key) {
            <pa-button
              aspect="basic"
              size="small"
              [active]="filter() === provider.key"
              (click)="toggleFilter(provider.key)">
              {{ provider.value.title }}
            </pa-button>
          }
          <pa-button
            aspect="basic"
            size="small"
            [active]="filter() === enterpriseReadyFilter"
            (click)="toggleFilter(enterpriseReadyFilter)">
            {{ 'kb.ai-models.model-selector.features.enterprise-ready' | translate }}
          </pa-button>
        </div>
      }
      @for (provider of filteredByProvider(); track provider.key) {
        <pa-option-header>{{ provider.value.title }}</pa-option-header>
        @for (model of provider.value.models; track model.key) {
          <pa-option
            [description]="model.value.description"
            [disabled]="disabled()"
            (selectOption)="selectOption(provider.key === 'default' ? model.value.name : model.key)">
            <div class="option-name">
              <div>{{ model.value.title }}</div>
              @let guaranteedDataResidency = model.value.metadata.data_residency_status === DataResidencyStatus.GUARANTEED;
              @let enterpriseReady = provider.value.enterprise_readiness;
              @if (enterpriseReady || guaranteedDataResidency) {
                <div>
                  <pa-icon
                    size="small"
                    name="info"
                    [paPopover]="modelInfo"></pa-icon>
                  <pa-popover
                    #modelInfo
                    [keepOthersOpen]="true">
                    <ul class="more-info body-s">
                      @if (enterpriseReady) {
                        <li>{{ 'kb.ai-models.model-selector.features.enterprise-ready' | translate }}</li>
                      }
                      @if (guaranteedDataResidency) {
                        <li>
                          {{
                            'kb.ai-models.model-selector.features.data-residency' | translate: { zone: zone | async }
                          }}
                        </li>
                      }
                    </ul>
                  </pa-popover>
                </div>
              }
            </div>
          </pa-option>
        }
      } @empty {
        <pa-option readonly>{{ 'generic.no-results' | translate }}</pa-option>
      }
    </pa-dropdown>
  }
}