@if (type() === 'dropdown') {
  @if (pickedOptionType() === 'button') {
    <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
      <!-- Button -->
      <div>
        @if (icon()) {
          <pi-icon
            [icon]="icon()"
            class="pi-select-picked-option__custom-icon"
            color="primary"
            size="medium"
            animation="clickable"
            pi-disabled
            [isDisabled]="disabled()"
          ></pi-icon>
        }
        <span class="pi-select-picked-option__label">{{
          (selectedOptionsNames?.join(', ') | truncate: 33) ||
            (label() | translate)
        }}</span>
      </div>
      <pi-icon
        class="pi-select-picked-option__action-icon"
        [icon]="actionIcon()"
        size="small"
      ></pi-icon>
    </fieldset>
  } @else {
    @switch (appearance()) {
      <!-- Input Fill Appearance -->
      @case ('fill') {
        <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
          <pi-icon
            [icon]="icon()"
            class="pi-select-picked-option__custom-icon"
            color="primary"
            size="x-large"
            appearance="fill"
            [isStroked]="true"
            [animation]="disabled() ? undefined : 'clickable'"
          ></pi-icon>
          <!-- Input field -->
          <div>
            <span>
              <label class="pi-select-picked-option__label">{{
                label() | translate
              }}</label>
              <ng-template #defaultSelectedFill>
                <span class="pi-select-picked-option__placeholder">{{
                  (selectedOptionsNames?.join(', ') | truncate: 33) ||
                    (placeholder() | translate)
                }}</span>
              </ng-template>
              <ng-container
                [ngTemplateOutlet]="
                  selectedTemplateRef() || defaultSelectedFill
                "
                [ngTemplateOutletContext]="{ $implicit: value() }"
              >
              </ng-container>
            </span>

            <pi-icon
              class="pi-select-picked-option__action-icon"
              [icon]="actionIcon()"
              size="small"
            ></pi-icon>
          </div>
        </fieldset>
      }

      <!-- Input Outline Appearance -->
      @case ('outline') {
        <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
          <!-- Input field -->
          <label class="pi-select-picked-option__label">{{
            label() | translate
          }}</label>
          <div>
            <span>
              <ng-template #defaultSelectedOutline>
                <span class="pi-select-picked-option__placeholder">{{
                  (selectedOptionsNames?.join(', ') | truncate: 33) ||
                    (placeholder() | translate)
                }}</span>
              </ng-template>
              <ng-container
                [ngTemplateOutlet]="
                  selectedTemplateRef() || defaultSelectedOutline
                "
                [ngTemplateOutletContext]="{ $implicit: value() }"
              >
              </ng-container>
            </span>

            <pi-icon
              class="pi-select-picked-option__action-icon"
              [icon]="actionIcon()"
              size="small"
            ></pi-icon>
          </div>
        </fieldset>
      }
    }
  }
}

<!-- Options menu -->
<nav class="pi-select-options-menu">
  <!-- Select All Options -->
  @if (hasSelectAllOptions()) {
    <fieldset class="pi-select-options-menu__select-all">
      <mat-checkbox
        pi-dynamic-color
        [color]="color()"
        [checked]="areAllEnabledOptionsSelected"
        (change)="onSelectAllOptions($event)"
      >
      </mat-checkbox>
      <label pi-dynamic-color [color]="color()">
        {{ selectAllLabel() }}
      </label>
    </fieldset>
  }

  @if (pickedOptionType() === 'button') {
    <header class="pi-select-options-menu__picked-option">
      <!-- Only visible in a header of  Button -->

      @if (icon()) {
        <pi-icon
          [icon]="icon()"
          class="pi-select-options-menu-picked-option__custom-icon"
          [color]="color()"
          size="medium"
          pi-disabled
          [isDisabled]="disabled()"
        ></pi-icon>
      }

      <span class="pi-select-options-menu-picked-option__placeholder">{{
        (selectedOptionsNames?.join(', ') | truncate: 33) ||
          (placeholder() | translate)
      }}</span>

      <pi-icon
        (click)="onToggleDropdown()"
        class="pi-select-options-menu-picked-option__action-icon"
        [icon]="actionIcon()"
        [class.pi-select-options-menu-picked-option__action-icon--chevron]="
          actionIcon() === 'chevron-forward'
        "
        size="small"
      ></pi-icon>
    </header>
  }
  <!-- List of options -->
  <div class="pi-select-options-menu__options">
    @for (option of options(); track option; let i = $index) {
      <span (click)="onSelectOption(option)">
        <!-- Default options template menu for static data -->
        <ng-template #defaultOption>
          <pi-select-option
            type="multiple"
            [id]="option?.id"
            [label]="option?.name | translate"
            [initials]="option.initials ? option.initials : ''"
            [isSelected]="option === selectedOptions.includes(option)"
            [flexDirection]="flexDirection()"
            [size]="selectOptionSize"
          ></pi-select-option>
        </ng-template>
        <!-- Default options template menu for server data -->
        <ng-container
          [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
          [ngTemplateOutletContext]="{ $implicit: option, index: i }"
        >
        </ng-container>
      </span>
    }
  </div>

  @if (type() === 'dropdown') {
    <footer>
      <span>
        <button (click)="onClickReset()" pi-ghost pi-primary w100>
          Borrar
        </button>
        <button (click)="onClickSave()" pi-primary w100>Guardar</button>
      </span>
    </footer>
  }
</nav>