<span class="sky-color-picker-label-wrapper">
  @if (labelText) {
    <label
      class="sky-control-label"
      [ngClass]="{
        'sky-screen-reader-only': labelHidden,
        'sky-control-label-required': requiredState?.isRequired()
      }"
      [for]="inputId"
      >{{ labelText }}</label
    >
    @if ((helpPopoverContent || helpKey) && !labelHidden) {
      <span class="sky-control-help-container">
        <sky-help-inline
          [helpKey]="helpKey"
          [labelText]="labelText"
          [popoverTitle]="helpPopoverTitle"
          [popoverContent]="helpPopoverContent"
        />
      </span>
    }
  }
</span>

<div
  class="sky-input-group"
  [ngClass]="{
    'sky-colorpicker-hidden': !isVisible,
    'sky-colorpicker-disabled': disabled
  }"
>
  <div [hidden]="true">
    <ng-content />
  </div>

  <button
    #triggerButtonRef
    aria-haspopup="dialog"
    class="sky-colorpicker-button"
    type="button"
    [attr.aria-controls]="isOpen ? colorpickerId : null"
    [attr.aria-expanded]="isOpen"
    [attr.aria-describedby]="hintText ? hintTextEl.id : undefined"
    [attr.aria-label]="
      label ||
      (labelledBy
        ? null
        : ('skyux_colorpicker_dropdown_button' | skyLibResources))
    "
    [attr.aria-labelledby]="labelledBy"
    [attr.id]="triggerButtonId"
    [attr.title]="
      label ||
      (labelledBy
        ? null
        : ('skyux_colorpicker_dropdown_button' | skyLibResources))
    "
    [disabled]="disabled"
    [ngClass]="{
      'sky-colorpicker-button-disabled': disabled,
      'sky-colorpicker-error':
        (ngControl?.touched || ngControl?.dirty) && ngControl?.errors
    }"
    [style.background-color]="backgroundColorForDisplay"
    (click)="onTriggerButtonClick()"
  >
    @if (pickerButtonIcon) {
      <sky-icon
        class="sky-colorpicker-button-icon"
        [icon]="pickerButtonIcon"
        [iconType]="pickerButtonIconType"
        [size]="'1x'"
        [style.color]="iconColor"
      />
    }
    <ng-container *skyThemeIf="'modern'">
      <sky-icon
        class="sky-colorpicker-button-modern-chevron"
        icon="chevron-down"
        size="xs"
        [ngClass]="{
          'sky-colorpicker-button-modern-chevron-disabled': disabled
        }"
      />
    </ng-container>
  </button>

  <ng-template #colorpickerTemplateRef>
    <div
      #colorpickerRef
      class="sky-colorpicker-container"
      role="dialog"
      [attr.aria-labelledby]="triggerButtonId"
      [attr.id]="colorpickerId"
      [hidden]="!isPickerVisible"
      [skyThemeClass]="{
        'sky-shadow': 'default',
        'sky-elevation-4': 'modern'
      }"
      [cdkTrapFocus]="true"
      [cdkTrapFocusAutoCapture]="false"
    >
      <div class="sky-colorpicker">
        <div
          class="saturation-lightness"
          [color]="slider.saturation - slider.value + ''"
          [skyColorpickerSlider]
          [style.background-color]="hueSliderColor"
          [xAxis]="1"
          [yAxis]="1"
          (newColorContrast)="saturationAndLightness = $event"
        >
          <div
            class="cursor sky-rounded-circle"
            [style.left.px]="slider.saturation"
            [style.top.px]="slider.value"
          ></div>
        </div>

        <div class="box">
          <div class="left">
            <div class="selected-color-background sky-rounded-circle"></div>
            <div
              class="selected-color sky-rounded-circle"
              [style.background-color]="selectedColor?.rgbaText"
            ></div>
          </div>
          <div class="right">
            <div
              #hueSlider
              class="hue"
              [skyColorpickerSlider]
              [xAxis]="1"
              (newColorContrast)="hue = $event"
            >
              <div
                class="cursor sky-rounded-circle"
                [style.left.px]="slider.hue"
              ></div>
            </div>
            @if (allowTransparency) {
              <div
                #alphaSlider
                class="alpha"
                [skyColorpickerSlider]
                [style.background-color]="alphaSliderColor"
                [xAxis]="1"
                (newColorContrast)="alphaAxis = $event"
              >
                <div
                  class="cursor sky-rounded-circle"
                  [style.left.px]="slider.alpha"
                ></div>
              </div>
            }
          </div>
        </div>

        <div
          class="rgba-text"
          (keydown.enter)="onContainerEnterKeyDown($event)"
        >
          <sky-input-box>
            <label
              class="sky-control-label"
              [attr.aria-label]="'skyux_colorpicker_aria_hex' | skyLibResources"
              [attr.for]="skyColorpickerHexId"
            >
              {{ 'skyux_colorpicker_hex' | skyLibResources }}
            </label>
            <input
              class="sky-form-control"
              pattern="^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$"
              [attr.id]="skyColorpickerHexId"
              [skyColorpickerText]
              [value]="hexText"
              (newColorContrast)="hex = $event"
            />
          </sky-input-box>

          <fieldset
            [attr.aria-label]="'skyux_colorpicker_aria_rgba' | skyLibResources"
          >
            <sky-input-box>
              <label
                class="sky-control-label"
                [attr.aria-label]="
                  'skyux_colorpicker_aria_red' | skyLibResources
                "
                [attr.for]="skyColorpickerRedId"
              >
                {{ 'skyux_colorpicker_red' | skyLibResources }}
              </label>
              <input
                class="sky-form-control"
                max="255"
                min="0"
                pattern="[0-9]*"
                type="number"
                [attr.id]="skyColorpickerRedId"
                [maxRange]="255"
                [skyColorpickerText]
                [value]="rgbaText?.red"
                (newColorContrast)="red = $event"
              />
            </sky-input-box>
            <sky-input-box>
              <label
                class="sky-control-label"
                [attr.aria-label]="
                  'skyux_colorpicker_aria_green' | skyLibResources
                "
                [attr.for]="skyColorpickerGreenId"
              >
                {{ 'skyux_colorpicker_green' | skyLibResources }}
              </label>
              <input
                class="sky-form-control"
                max="255"
                min="0"
                pattern="[0-9]*"
                type="number"
                [attr.id]="skyColorpickerGreenId"
                [maxRange]="255"
                [skyColorpickerText]
                [value]="rgbaText?.green"
                (newColorContrast)="green = $event"
              />
            </sky-input-box>
            <sky-input-box>
              <label
                class="sky-control-label"
                [attr.aria-label]="
                  'skyux_colorpicker_aria_blue' | skyLibResources
                "
                [attr.for]="skyColorpickerBlueId"
              >
                {{ 'skyux_colorpicker_blue' | skyLibResources }}
              </label>
              <input
                class="sky-form-control"
                max="255"
                min="0"
                pattern="[0-9]*"
                type="number"
                [attr.id]="skyColorpickerBlueId"
                [maxRange]="255"
                [skyColorpickerText]
                [value]="rgbaText?.blue"
                (newColorContrast)="blue = $event"
              />
            </sky-input-box>
            @if (allowTransparency) {
              <sky-input-box>
                <label
                  class="sky-control-label"
                  [attr.aria-label]="
                    'skyux_colorpicker_aria_alpha' | skyLibResources
                  "
                  [attr.for]="skyColorpickerAlphaId"
                >
                  {{ 'skyux_colorpicker_alpha' | skyLibResources }}
                </label>
                <input
                  class="sky-form-control"
                  max="1"
                  min="0"
                  pattern="[0-9]+([\.,][0-9]{1,2})?"
                  step="0.1"
                  type="number"
                  [attr.id]="skyColorpickerAlphaId"
                  [maxRange]="1"
                  [skyColorpickerText]
                  [value]="rgbaText?.alpha"
                  (newColorContrast)="alphaColor = $event"
                />
              </sky-input-box>
            }
          </fieldset>
        </div>
        @if (presetColors && presetColors.length) {
          <div class="sky-colorpicker-preset-color-area">
            @for (
              color of presetColors | slice: 0 : 12;
              track color;
              let i = $index
            ) {
              <button
                class="sky-preset-color"
                type="button"
                [attr.aria-label]="
                  ('skyux_colorpicker_preset_color' | skyLibResources) +
                  ' ' +
                  color
                "
                [skyThemeClass]="{
                  'sky-btn sky-btn-link': 'modern'
                }"
                [style.backgroundColor]="color"
                (click)="onPresetClick(color)"
              ></button>
            }
          </div>
        }
      </div>

      <div class="sky-colorpicker-footer">
        <section class="sky-colorpicker-column">
          <button
            class="sky-btn sky-btn-primary sky-btn-colorpicker-apply"
            type="button"
            [attr.aria-label]="'skyux_colorpicker_apply' | skyLibResources"
            (click)="onApplyColorClick()"
          >
            {{ 'skyux_colorpicker_apply' | skyLibResources }}
          </button>
          <button
            class="sky-btn sky-btn-link sky-btn-colorpicker-close"
            type="button"
            [attr.aria-label]="'skyux_colorpicker_close' | skyLibResources"
            (click)="onCancelClick()"
          >
            {{ 'skyux_colorpicker_close' | skyLibResources }}
          </button>
        </section>
      </div>
    </div>
  </ng-template>
  @if (allowTransparency) {
    <span aria-hidden="true" class="sky-colorpicker-checkered-background">
    </span>
  }

  @if (showResetButton) {
    <button
      type="button"
      [attr.aria-label]="'skyux_colorpicker_reset' | skyLibResources"
      [disabled]="disabled"
      [ngClass]="{
        'sky-colorpicker-reset-button-disabled': disabled
      }"
      [skyThemeClass]="{
        'sky-colorpicker-reset-button': 'default',
        'sky-btn sky-btn-icon-borderless sky-colorpicker-reset-button-modern':
          'modern'
      }"
      (click)="onResetClick()"
    >
      <sky-icon *skyThemeIf="'default'" icon="times" size="sm" />
      <sky-icon *skyThemeIf="'modern'" icon="trash" size="lg" />
    </button>
  }
</div>

<div #hintTextEl="skyId" skyId>
  @if (hintText) {
    <div
      class="sky-colorpicker-hint-text"
      [skyThemeClass]="{
        'sky-font-deemphasized': 'default',
        'sky-font-hint-text-s': 'modern'
      }"
    >
      {{ hintText }}
    </div>
  }
</div>

<sky-form-errors
  [id]="errorId"
  [errors]="ngControl?.errors"
  [labelText]="labelText"
  [touched]="ngControl?.touched"
  [dirty]="ngControl?.dirty"
>
  <ng-content select="sky-form-error" />
</sky-form-errors>
