@for (project of filteredProjects; track project; let i = $index; let isFirst = $first; let isLast = $last) {
  <li
    class="spot-list--item"
    role="none"
    data-test-selector="op-header-project-select--item"
    [attr.data-list-selector]="projectListItemIdentifier"
    >
    @if (!project.disabled) {
      <a
        tabindex="-1"
        class="spot-list--item-action"
        [id]="optionId(project)"
        role="option"
        [attr.aria-selected]="((searchableProjectListService.selectedItemID$ | async) === project.id).toString()"
        [ngClass]="{
          'spot-list--item-action_disabled': project.disabled,
          'spot-list--item-action_active': (searchableProjectListService.selectedItemID$ | async) === project.id
        }"
        [href]="extendedUrl(project.identifier)"
        [attr.data-list-selector]="projectListActionIdentifier"
        [attr.data-project-id]="project.id"
        [attr.data-test-selector]="currentProjectService.id === project.id.toString() ? 'op-header-project-select--active-item' : null"
        >
        <span
          class="spot-list--item-title spot-list--item-title_ellipse-text"
          data-test-selector="op-header-project-select--item-title"
          >
          <span
            [opSearchHighlight]="searchText"
          [textContent]="project.name"></span>
          @if (favorited?.includes(project.id.toString())) {
            <svg
              star-fill-icon
              class="op-primer--star-icon"
              size="small"
            ></svg>
          }
          @switch (project._type) {
            @case ('Portfolio') {
              <span class="description">
                <svg briefcase-icon size="xsmall" />
                {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
              </span>
            }
            @case ('Program') {
              <span class="description">
                <svg versions-icon size="xsmall" />
                {{ this.I18n.t('js.include_workspaces.types.program') }}
              </span>
            }
          }
        </span>
        @if (currentProjectService.id === project.id.toString()) {
          <a
            [href]="extendedUrl(null)"
            class="spot-list--item-remove"
            data-test-selector="op-header-project-select--item-remove-icon"
          >
            <svg x-circle-icon size="small" aria-hidden="true"/>
          </a>
        }
      </a>
    }
    @if (project.disabled) {
      <span
        class="spot-list--item-action spot-list--item-action_disabled"
        [id]="optionId(project)"
        role="option"
        aria-disabled="true"
        [attr.aria-selected]="((searchableProjectListService.selectedItemID$ | async) === project.id).toString()"
        [ngClass]="{
          'spot-list--item-action_active': (searchableProjectListService.selectedItemID$ | async) === project.id
        }"
      >
        <span
          class="spot-list--item-title spot-list--item-title_ellipse-text"
          data-test-selector="op-header-project-select--item-disabled-title"
        >
          <span>{{ project.name }}</span>
          @switch (project._type) {
            @case ('Portfolio') {
              <span class="description">
                <svg briefcase-icon size="xsmall" />
                {{ this.I18n.t('js.include_workspaces.types.portfolio') }}
              </span>
            }
            @case ('Program') {
              <span class="description">
                <svg versions-icon size="xsmall" />
                {{ this.I18n.t('js.include_workspaces.types.program') }}
              </span>
            }
          }
        </span>
      </span>
    }
    @if (project.children.length) {
      <ul
        op-header-project-select-list
        [projects]="project.children"
        [displayMode]="displayMode"
        [favorited]="favorited"
        [selected]="selected"
        [searchText]="searchText"
      ></ul>
    }
  </li>
}