<ng-container *transloco="let t; prefix:'highlight-bar'">
  <div class="d-flex align-items-center" style="max-height: 2.9375rem; height: 2.9375rem;">
    @let collapsed = isCollapsed();

    @if (desktopLayout() && canCollapse()) {
      <button
        type="button"
        style="max-height: 2.9375rem"
        class="btn btn-outline-primary highlight-bar-toggle {{!collapsed ? 'open': 'collapsed'}}"
        (click)="collapse.toggle()"
        [attr.aria-expanded]="!collapsed"
        aria-controls="highlight-bar"
      >
        <i class="fa-solid fa-palette" aria-hidden="true"></i>
        <i class="fa-solid fa-angles-right" aria-hidden="true"></i>
      </button>
    }

    <div #collapse="ngbCollapse" [ngbCollapse]="collapsed" (ngbCollapseChange)="updateCollapse($event)"
         [horizontal]="true" style="max-width: 31.25rem" id="highlight-bar">
      <div class="highlight-bar" style="max-height: 2.9375rem">
        @let activeSlot = selectedSlot();
        @if (activeSlot) {
          <div class="color-picker-container">
            @for(slot of slots(); track slot.color; let index = $index) {
              <app-setting-colour-picker
                [id]="'slot-' + (index + 1)"
                [label]="t('slot-label', {slot: index + 1})"
                [color]="slot.color"
                (colorChange)="handleSlotColourChange(index, $event)"
                [selected]="slot.slotNumber === selectedSlotIndex()"
                (selectPicker)="selectSlot(index, slot)"
                [editMode]="isEditMode()"
                [canChangeEditMode]="allowEditMode()"
                (editModeChange)="isEditMode.set($event)"
                [first]="$first"
                [last]="$last"
              />
            }
          </div>
        }

        @if (desktopLayout() && allowEditMode()) {
          <button class="btn btn-icon ms-2 color" (click)="toggleEditMode()">
            @if (!isEditMode()) {
              <i class="fa-solid fa-pencil-alt" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('edit')}}</span>
            } @else {
              <i class="fa-solid fa-xmark" aria-hidden="true"></i>
              <span class="visually-hidden">{{t('close')}}</span>
            }
          </button>
        }
      </div>
    </div>
  </div>
</ng-container>
