@if (gradientItems) {
  <div class="form-control gradient-select" (click)="handleToggleList()">
    @if (selectedItem) {
      <div>
        @if (showLabel) {
          <div>{{selectedItem?.name}}</div>
        }
        <fm-gradient [gradientItem]="selectedItem"></fm-gradient>
      </div>
    }
    <div class="gradient-list" [ngClass]="{'visible':listVisible}">
      @if (gradientItems) {
        <ul>
          @for (item of gradientItems; track item) {
            <li (click)="handleSelect(item)" [ngClass]="{'bg-primary':isSelected(item),'text-white':isSelected(item)} ">
              <div>{{item?.name}}</div>
              <div><fm-gradient [gradientItem]="item"></fm-gradient></div>
            </li>
          }
        </ul>
      }
      @if (showAdd) {
        <div class="addGradient"><a href="#" i18n (click)="handleAdd($event)" >Add gradient</a></div>
      }
    </div>
  </div>
}