application-detail.html

<!--
 * Copyright (c) 2010-2025 Evolveum and contributors
 *
 * Licensed under the EUPL-1.2 or later.
 -->

<div class="container-fluid p-0 page-container">
  <!-- Header -->
  <div class="w-100 text-white text-center py-2 page-header">
    (HEADER)
  </div>
  @if (loading()) {
    <div class="container py-5">
      <div class="d-flex justify-content-center align-items-center loading-container">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </div>
  }

  @if (error()) {
    <div class="container py-5">
      <div class="alert alert-danger" role="alert">
        <h4 class="alert-heading">Error</h4>
        <p>{{ error() }}</p>
        <hr>
        <button class="btn btn-primary" (click)="goBack()">
          <i class="fa-solid fa-arrow-left me-1"></i> Back to Integration Catalog
        </button>
      </div>
    </div>
  }

  @if (!loading() && !error() && application()) {
    <!-- Header Section -->
    <div class="header-section">
      <div class="container">
        <div class="d-flex align-items-start gap-4">
        <!-- Logo -->
        <div class="flex-shrink-0">
          @if (!shouldShowLetterAvatar()) {
            <div class="logo-container d-flex align-items-center justify-content-center overflow-hidden">
              <img [src]="getLogoUrl()"
                   [alt]="application()!.displayName"
                   (error)="onLogoError()"
                   class="logo-image" />
            </div>
          } @else {
            <div class="letter-avatar d-flex align-items-center justify-content-center">
              {{ application()!.displayName.charAt(0) }}
            </div>
          }
        </div>

        <!-- Title and Info -->
        <div class="flex-grow-1">
          <h1 class="h2 mb-2 text-title">
            {{ application()!.displayName }}
            @if (application()!.tags && application()!.tags!.length > 0) {
              @for (tag of application()!.tags!; track tag.id) {
                @if (tag.name === 'popular') {
                  <span class="badge badge-popular d-inline-flex align-items-center gap-1">
                    <i class="fa-solid fa-fire icon-sm"></i>
                    {{ tag.displayName }}
                  </span>
                }
              }
            }
          </h1>
          @if (application()!.tags && application()!.tags!.length > 0) {
            @for (tag of application()!.tags!; track tag.id) {
              @if (tag.tagType === 'COMMON' && (tag.name === 'evolveum-creation' || tag.name === 'community-creation' || tag.name === 'partner-creation')) {
                <p class="mb-3 text-muted-custom text-md">{{ tag.displayName }}</p>
              }
            }
          }
          <p class="mb-4 text-body">{{ application()!.description }}</p>

          <!-- Stats Row -->
          <div class="d-flex align-items-center gap-4 text-body text-sm">
            <!-- Star Rating (Placeholder) -->
            <div class="d-flex align-items-center gap-1">
              <i class="fa-solid fa-star star-icon"></i>
              <span class="font-weight-medium"><b>"4.4</b> (404 reviews)"</span>
            </div>

            <!-- Installations (Placeholder) -->
            <div class="d-flex align-items-center gap-1">
              <i class="fa-solid fa-download icon-md"></i>
              <span class="font-weight-medium">{{ applicationDownloadsCount() }} download(s)</span>
            </div>

            <!-- Updated Date -->
            <div class="d-flex align-items-center gap-1">
              <i class="fa-regular fa-clock icon-md"></i>
              <span class="font-weight-medium">{{ getTimeSinceLastUpdate(application()!.lastModified) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container pt-3 pb-5">
    <p class="breadcrumb-text mb-4">
          <button class="breadcrumb-link" (click)="goBack()">Integration catalog</button>
          <span> / {{ application()!.displayName }} connector</span>
        </p>
    <div class="row">
      <!-- Left Panel - Main Content -->
      <div class="col-lg-8">
        <!-- Breadcrumb -->
        

        <div class="bg-white p-4 rounded mb-4">
          <!-- Description Section -->
          <div class="mb-4">
            <h2 class="h5 mb-3">Description</h2>
            <p>{{ application()!.description }}</p>
          </div>

            <!-- REQUESTED Application Info -->
            @if (application()!.lifecycleState === 'REQUESTED') {
              <div class="row mt-4">
                <div class="col-12">
                  <h2 class="h5 mb-3">Community Requested Integration</h2>
                  <p class="text-muted mb-3">
                    This integration has been requested by the community and is pending development.
                    Vote for this integration to help prioritize its development.
                  </p>

                  <!-- Capabilities -->
                  @if (application()!.capabilities && application()!.capabilities!.length > 0) {
                    <div class="mb-3">
                      <h3 class="h6 mb-2">Requested Capabilities:</h3>
                      <div class="d-flex flex-wrap gap-2">
                        @for (capability of application()!.capabilities!; track capability) {
                          <span class="badge badge-requested">
                            {{ capability }}
                          </span>
                        }
                      </div>
                    </div>
                  }

                  <!-- Created Date -->
                  @if (application()!.createdAt) {
                    <div class="mb-2">
                      <strong>Requested on: </strong>
                      <span class="text-muted">{{ application()!.createdAt | date: 'mediumDate' }}</span>
                    </div>
                  }

                  <!-- Requester -->
                  @if (application()!.requester) {
                    <div class="mb-2">
                      <strong>Requested by: </strong>
                      <span class="text-muted">{{ application()!.requester }}</span>
                    </div>
                  }
                </div>
              </div>
            }

            @if (activeEvolvumVersions().length > 0 || activeCommunityVersions().length > 0 || otherEvolvumVersions().length > 0 || otherCommunityVersions().length > 0) {
              <div class="row mt-4">
                <div class="col-12">
                  <!-- Tabs Navigation -->
                  <!-- <div class="tabs-container">
                    <button
                      (click)="setActiveTab('main')"
                      class="btn-tab"
                      [class.btn-tab-active]="activeTab() === 'main'"
                      [class.btn-tab-inactive]="activeTab() !== 'main'">
                      Main version(s)
                    </button>
                    <button
                      (click)="setActiveTab('other')"
                      class="btn-tab"
                      [class.btn-tab-active]="activeTab() === 'other'"
                      [class.btn-tab-inactive]="activeTab() !== 'other'">
                      Other versions ({{ getTotalVersionsCount() }})
                    </button>
                  </div><br> -->

                  <!-- Choose Integration Method Section -->
                  @if (!isContinuePressed()) {
                    <!-- Expanded View -->
                    <h5 class="mb-2">Choose an integration method</h5>
                    <p class="text-sm mb-3">This selection defines how {{ application()?.displayName }} will be integrated and filters available connector versions.</p>

                    <div class="integration-methods-grid gap-3 mb-3">
                      @for (method of integrationMethods; track method.id) {
                        <div
                          class="integration-method-card"
                          [class.selected]="selectedIntegrationMethod() === method.id"
                          (click)="selectIntegrationMethod(method.id)">
                          <div class="d-flex align-items-center gap-3">
                            <input
                              type="radio"
                              name="integrationMethod"
                              [id]="'method-' + method.id"
                              [value]="method.id"
                              [checked]="selectedIntegrationMethod() === method.id"
                              (change)="selectIntegrationMethod(method.id)"
                              class="integration-method-radio" />
                            <div>
                              <div class="integration-method-title">{{ method.name }}</div>
                              <div class="integration-method-description">{{ method.description }}</div>
                            </div>
                          </div>
                        </div>
                      }
                    </div>

                    <!-- Note -->
                    @if (isIntegrationNoteVisible()) {
                      <div class="integration-note mb-4 d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                          <i class="fa-solid fa-circle-exclamation note-icon me-2"></i>
                          <span class="text-sm"><strong>Note</strong> Select an integration method to see available connector versions</span>
                        </div>
                        <button type="button" class="btn-close-note d-flex align-items-center justify-content-center" (click)="hideIntegrationNote()">
                          <i class="fa-solid fa-xmark"></i>
                        </button>
                      </div>
                    }

                    <!-- Continue Button -->
                    <div class="mb-4 d-flex justify-content-end">
                      <button
                        class="btn btn-continue"
                        [disabled]="!selectedIntegrationMethod()"
                        (click)="onContinueClick()">
                        Continue
                      </button>
                    </div>
                  } @else {
                    <!-- Collapsed View -->
                    <h5 class="mb-3">Integration method</h5>
                    <div class="selected-method-container mb-4 d-inline-flex align-items-center gap-3 rounded-pill">
                      <span class="selected-method-name">{{ getSelectedMethodName() }}</span>
                      <button type="button" class="btn-change-method d-inline-flex align-items-center" (click)="onChangeMethodClick()">
                        <i class="fa-solid fa-pen-to-square me-1"></i>
                        Change
                      </button>
                    </div>
                  }

                  <!-- Search Connector Versions Section -->
                  <h5 class="mb-3">Search connector versions</h5>

                  <!-- Search and Filter Row -->
                  <div class="d-flex align-items-center gap-3 mb-4">
                    <!-- Search Input -->
                    <div class="input-group flex-grow-1">
                      <span class="input-group-text border-end-0" [class.bg-white]="isContinuePressed()" [class.search-disabled]="!isContinuePressed()">
                        <i class="fa-solid fa-magnifying-glass text-muted"></i>
                      </span>
                      <input
                        type="text"
                        class="form-control border-start-0"
                        [class.search-disabled]="!isContinuePressed()"
                        [placeholder]="isContinuePressed() ? 'Filter by name or version...' : 'Select an integration method first'"
                        [value]="versionSearchQuery()"
                        (input)="onVersionSearchChange($event)"
                        [disabled]="!isContinuePressed()"
                      />
                    </div>

                    <!-- Filter Buttons -->
                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                      <button type="button" (click)="toggleFilterModal()" class="btn btn-sm btn-filter d-flex align-items-center gap-2" [disabled]="!isContinuePressed()">
                        <i class="fa-solid fa-filter icon-xl"></i>
                        Filter
                      </button>
                      <button type="button" (click)="resetFilters()" class="btn btn-sm btn-reset" [disabled]="!isContinuePressed()">
                        Reset filter
                      </button>
                    </div>
                  </div>

                  <!-- Active Filter Chips -->
                  @if (hasActiveFilters()) {
                    <div class="d-flex align-items-center gap-2 flex-wrap mb-4">
                      <!-- Capabilities Filter Chip -->
                      @if (filterState().capabilities.length > 0) {
                        <div class="filter-chip position-relative d-inline-flex align-items-center gap-2 rounded-pill">
                          <span>Capability</span>
                          <span class="badge rounded-circle badge-counter d-inline-flex align-items-center justify-content-center">
                            {{ filterState().capabilities.length }}
                          </span>
                          <button type="button" (click)="toggleDropdown('capabilities', $event); $event.stopPropagation()" class="btn-icon d-inline-flex align-items-center">
                            <i class="fa-solid fa-chevron-down icon-xs"></i>
                          </button>
                          <button type="button" (click)="clearCapabilitiesFilter()" class="btn-icon d-inline-flex align-items-center">
                            <i class="fa-solid fa-xmark icon-sm"></i>
                          </button>
                        </div>
                      }

                      <!-- ConnId Version Filter Chip -->
                      @if (filterState().midpointVersions.length > 0) {
                        <div class="filter-chip position-relative d-inline-flex align-items-center gap-2 rounded-pill">
                          <span>ConnId Version</span>
                          <span class="badge rounded-circle badge-counter d-inline-flex align-items-center justify-content-center">
                            {{ filterState().midpointVersions.length }}
                          </span>
                          <button type="button" (click)="toggleDropdown('versions', $event); $event.stopPropagation()" class="btn-icon d-inline-flex align-items-center">
                            <i class="fa-solid fa-chevron-down icon-xs"></i>
                          </button>
                          <button type="button" (click)="clearVersionsFilter()" class="btn-icon d-inline-flex align-items-center">
                            <i class="fa-solid fa-xmark icon-sm"></i>
                          </button>
                        </div>
                      }
                    </div>
                  }

                  <!-- Filter Modal -->
                  @if (isFilterModalOpen()) {
                    <div class="position-fixed top-0 start-0 w-100 h-100 modal-backdrop" (click)="toggleFilterModal()">
                      <div class="position-fixed top-50 start-50 translate-middle bg-white rounded shadow-lg modal-content-box" (click)="$event.stopPropagation()">
                        <div class="d-flex flex-column h-100">
                          <!-- Two-panel layout -->
                          <div class="d-flex flex-grow-1 overflow-hidden">
                            <!-- Left Sidebar -->
                            <div class="border-end modal-sidebar overflow-auto">
                              <div class="d-flex flex-column">
                                <!-- Capabilities Section -->
                                <button type="button" (click)="selectFilterSection('capabilities')" class="modal-section-btn" [class.modal-section-btn-active]="selectedFilterSection() === 'capabilities'">
                                  <span class="font-weight-medium">Capabilities</span>
                                </button>

                                <!-- Midpoint Version Section -->
                                <button type="button" (click)="selectFilterSection('versions')" class="modal-section-btn" [class.modal-section-btn-active]="selectedFilterSection() === 'versions'">
                                  <span class="font-weight-medium">Midpoint Version</span>
                                </button>
                              </div>
                            </div>

                            <!-- Right Content Area -->
                            <div class="p-4 modal-main overflow-auto">
                              <!-- Capabilities Content -->
                              @if (selectedFilterSection() === 'capabilities') {
                                <div class="d-flex flex-wrap gap-2">
                                  @for (capability of allCapabilities; track capability) {
                                    <span
                                      class="badge badge-selectable"
                                      [class.badge-selectable-active]="isCapabilitySelected(capability)"
                                      [class.badge-selectable-inactive]="!isCapabilitySelected(capability)"
                                      (click)="toggleCapabilityFilter(capability)">
                                      {{ formatCapabilityText(capability) }}
                                    </span>
                                  }
                                </div>
                              }

                              <!-- Midpoint Version Content -->
                              @if (selectedFilterSection() === 'versions') {
                                <div class="d-flex flex-wrap gap-2">
                                  @for (version of getAllMidpointVersions(); track version) {
                                    <span
                                      class="badge badge-selectable"
                                      [class.badge-selectable-active]="isMidpointVersionSelected(version)"
                                      [class.badge-selectable-inactive]="!isMidpointVersionSelected(version)"
                                      (click)="toggleMidpointVersionFilter(version)">
                                      {{ version }}
                                    </span>
                                  } @empty {
                                    <p class="text-muted">No MidPoint versions available</p>
                                  }
                                </div>
                              }
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  }

                  <!-- Versions Content -->
                  @if (!isContinuePressed()) {
                    <!-- Placeholder when Continue not pressed -->
                    <div class="versions-placeholder text-center">
                      <p class="mb-2">Select an integration method to see available connector versions.</p>
                      <p class="text-muted">We will show only versions that support chosen method.</p>
                    </div>
                  } @else {
                    <!-- All Versions List -->
                    @for (version of allVersions(); track $index) {
                      <div class="mb-4">
                        <div class="border p-4 rounded position-relative version-card">
                          <!-- Version Header -->
                          <div class="d-flex align-items-start justify-content-between mb-3">
                            <div>
                              <div class="d-flex align-items-center gap-2 mb-2">
                                <h3 class="h5 mb-0">
                                  @if (version.connectorVersion) {
                                    Version {{ version.connectorVersion }}
                                  } @else {
                                    Version {{ $index + 1 }}
                                  }
                                </h3>
                                @if (version.systemVersion) {
                                  <span class="badge bg-secondary">{{ version.systemVersion }}</span>
                                }
                              </div>

                              <!-- Creator and Meta Info -->
                              <div class="d-flex align-items-center gap-3 text-muted text-sm">
                                @if (version.implementationTags && (version.implementationTags.includes('ai_generated') || version.implementationTags.includes('AI Generated'))) {
                                  <div class="d-flex align-items-center gap-1 fw-bold text-ai">
                                    <i class="fa-solid fa-wand-magic-sparkles icon-xs"></i>
                                    <span>AI Generated</span>
                                  </div>
                                }
                                @if (version.author) {
                                  <div class="d-flex align-items-center gap-1">
                                    <i class="fa-solid fa-user icon-sm"></i>
                                    <span>Created by [{{ version.author }}]</span>
                                  </div>
                                }
                              </div>

                              <!-- Connector Type, Published Date, Downloads -->
                              <div class="d-flex align-items-center gap-3 text-muted mt-2 text-sm">
                                <span>Connector type: {{ formatConnectorType(version.framework) }}</span>
                                @if (version.releasedDate) {
                                  <span>Published: {{ version.releasedDate | date: 'MMM d, yyyy' }}</span>
                                }
                                <div class="d-flex align-items-center gap-1">
                                  <i class="fa-solid fa-download icon-sm"></i>
                                  <span>{{ version.downloadCount || 0 }} Downloads</span>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- Description -->
                          @if (version.description) {
                            <p class="mb-3 text-black">{{ version.description }}</p>
                          } @else {
                            <p class="fst-italic mb-3 text-black">No description available</p>
                          }

                          <!-- Capabilities -->
                          @if (hasNonInstalledCapabilities(version.capabilities)) {
                            <div class="mb-3">
                              <p class="text-muted small mb-2 fw-normal">Capabilities:</p>
                              <div class="d-flex flex-wrap gap-2">
                                @let versionCapabilities = filterInstalledCapability(version.capabilities);
                                @let isVersionExpanded = isExpanded($index);
                                @let visibleCapabilities = isVersionExpanded ? versionCapabilities : versionCapabilities.slice(0, 10);
                                @let remainingCount = versionCapabilities.length - 10;

                                @for (item of visibleCapabilities; track $index) {
                                  <span class="badge badge-capability">{{ formatCapabilityText(item) }}</span>
                                }

                                @if (remainingCount > 0) {
                                  <span class="badge badge-show-more d-inline-flex align-items-center gap-1" (click)="toggleCapabilities($index)">
                                    @if (isVersionExpanded) {
                                      <i class="fa-solid fa-eye-slash icon-sm"></i>
                                    } @else {
                                      <i class="fa-solid fa-eye icon-sm"></i>
                                    }
                                    {{ isVersionExpanded ? 'Show less' : '+' + remainingCount + ' more' }}
                                  </span>
                                }
                              </div>
                            </div>
                          }

                          <!-- Action Buttons or Error Banner or Publishing State -->
                          @if (version.lifecycleState === 'IN_PUBLISH_PROCESS') {
                            <div class="text-center mt-3 py-3">
                              <p class="text-muted mb-3">Importing... This may take a moment.</p>
                              <i class="fa-solid fa-gears blink-animation icon-xxl publishing-icon"></i>
                            </div>
                          } @else if (version.errorMessage) {
                            <div class="d-flex align-items-center justify-content-between mt-3 p-3 rounded error-banner">
                              <div class="d-flex align-items-center gap-2">
                                <i class="fa-solid fa-triangle-exclamation icon-lg text-error"></i>
                                <span class="text-error text-sm">{{ version.errorMessage }}</span>
                              </div>
                              <div class="d-flex align-items-center gap-2">
                                <button class="btn btn-sm btn-retry d-flex align-items-center gap-1">
                                  <i class="fa-solid fa-rotate-right icon-sm"></i>
                                  Retry Publish
                                </button>
                                <button class="btn btn-sm btn-edit-error d-flex align-items-center gap-1">
                                  <i class="fa-solid fa-pen-to-square icon-sm"></i>
                                  Edit
                                </button>
                              </div>
                            </div>
                          } @else {
                            <div class="d-flex justify-content-end gap-2 mt-3">
                              <button class="btn btn-edit">
                                Edit
                              </button>
                              <button (click)="downloadVersion(version.id)" class="btn text-sm btn-download" [disabled]="!version.id">
                                <i class="fa-solid fa-download me-1 icon-sm"></i>
                                Download
                              </button>
                            </div>
                          }
                        </div>
                      </div>
                    } @empty {
                      <p class="text-muted fst-italic">No versions available</p>
                    }
                  }
                </div>
              </div>
            }
        </div>

      </div>

      <!-- Right Panel - Sidebar -->
      <div class="col-lg-4">
        <div class="p-4 rounded shadow-sm sidebar-panel">
          <!-- Tags Section -->
          <div class="mb-4">
            <h6 class="text-muted small mb-2">Tags</h6>
            @if (application()!.tags && application()!.tags!.length > 0) {
              <div class="d-flex flex-column gap-2">
                @for (tag of application()!.tags!; track tag.id) {
                  @if (tag.name !== 'popular' && tag.tagType !== 'CATEGORY' && tag.tagType !== 'COMMON') {
                    @if (tag.tagType === 'DEPLOYMENT') {
                      <span class="badge badge-deployment">{{ tag.displayName }}</span>
                    }
                    @if (tag.tagType === 'LOCALITY') {
                      <span class="badge badge-locality">{{ tag.displayName }}</span>
                    }
                    @if (tag.tagType === 'COMMON') {
                      <span class="badge badge-common">{{ tag.displayName }}</span>
                    }
                  }
                }
              </div>
            } @else {
              <p class="mb-0 text-muted text-sm">No tags available</p>
            }
          </div>

          <!-- <hr> -->

          <!-- App Category -->
          <div class="mb-5">
            <h6 class="text-muted small mb-1">App Category</h6>
            @if (application()!.categories && application()!.categories!.length > 0) {
              <div>
                @for (category of application()!.categories!; track category.id) {
                  <p class="mb-1">{{ category.displayName }}</p>
                }
              </div>
            } @else {
              <p class="mb-0 text-muted text-sm">Not available</p>
            }
          </div>

          <!-- Last Update -->
          <div class="mb-5">
            <h6 class="text-muted small mb-1">Last Update</h6>
            @if (application()!.lastModified) {
              <p class="mb-0">{{ application()!.lastModified | date: 'MMM d, yyyy' }}</p>
            } @else {
              <p class="mb-0 text-muted text-sm">Not available</p>
            }
          </div>

          <!-- Maintainer Location -->
          <div class="mb-5">
            <h6 class="text-muted small mb-1">Maintainer Location</h6>
            @if (application()!.origins && application()!.origins!.length > 0) {
              @for (origin of application()!.origins!; track origin.id) {
                <p class="mb-0 fw-bold text-body">{{ origin.displayName }}</p>
              }
            } @else {
              <p class="mb-0 text-muted text-sm">Not available</p>
            }
          </div>

          <!-- Installations -->
          <div class="mb-5">
            <h6 class="text-muted small mb-1">Installations</h6>
            <p class="mb-0 fw-bold text-body stat-value">0</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Back Button -->
    <div class="mt-4 ps-4">
      <button class="btn btn-back d-flex align-items-center" (click)="goBack()">
        <i class="fa-solid fa-arrow-left icon-md me-2"></i>
        Back to Integration Catalog
      </button>
    </div>
  </div>

  <!-- Fixed Position Filter Dropdowns -->
  @if (openDropdown() === 'capabilities' && dropdownPosition()) {
    <div class="filter-dropdown overflow-auto rounded-2" (click)="$event.stopPropagation()" [style.position]="'fixed'" [style.top.px]="dropdownPosition()!.top" [style.left.px]="dropdownPosition()!.left">
      @for (capability of allCapabilities; track capability) {
        <div class="d-flex align-items-center gap-2 mb-2 cursor-pointer" (click)="toggleCapabilityFilter(capability); $event.stopPropagation()">
          <div class="checkbox-custom d-flex align-items-center justify-content-center" [class.checkbox-checked]="isCapabilitySelected(capability)" [class.checkbox-unchecked]="!isCapabilitySelected(capability)">
            @if (isCapabilitySelected(capability)) {
              <i class="fa-solid fa-check icon-xs text-white"></i>
            }
          </div>
          <span>{{ formatCapabilityText(capability) }}</span>
        </div>
      }
      <div class="border-top pt-2 mt-2">
        <a href="javascript:void(0)" (click)="clearCapabilitiesFilter(); $event.stopPropagation()" class="text-primary text-sm text-decoration-none">Clear filter</a>
      </div>
    </div>
  }

  @if (openDropdown() === 'versions' && dropdownPosition()) {
    <div class="filter-dropdown overflow-auto rounded-2" (click)="$event.stopPropagation()" [style.position]="'fixed'" [style.top.px]="dropdownPosition()!.top" [style.left.px]="dropdownPosition()!.left">
      @for (version of getAllMidpointVersions(); track version) {
        <div class="d-flex align-items-center gap-2 mb-2 cursor-pointer" (click)="toggleMidpointVersionFilter(version); $event.stopPropagation()">
          <div class="checkbox-custom d-flex align-items-center justify-content-center" [class.checkbox-checked]="isMidpointVersionSelected(version)" [class.checkbox-unchecked]="!isMidpointVersionSelected(version)">
            @if (isMidpointVersionSelected(version)) {
              <i class="fa-solid fa-check icon-xs text-white"></i>
            }
          </div>
          <span>{{ version }}</span>
        </div>
      }
      <div class="border-top pt-2 mt-2">
        <a href="javascript:void(0)" (click)="clearVersionsFilter(); $event.stopPropagation()" class="text-primary text-sm text-decoration-none">Clear filter</a>
      </div>
    </div>
  }

  <!-- Backdrop to close dropdown when clicking outside -->
  @if (openDropdown()) {
    <div (click)="closeDropdown()" class="click-backdrop position-fixed top-0 start-0 end-0 bottom-0"></div>
  }
  }
</div>