<div class="sky-timepicker">
  @if (!inputBoxHostService) {
    <div class="sky-input-group">
      <ng-container *ngTemplateOutlet="inputTemplateRef" />
      <ng-container *ngTemplateOutlet="triggerButtonTemplateRef" />
    </div>
  }
</div>

<ng-template #inputTemplateRef>
  <ng-content />
</ng-template>

<ng-template #triggerButtonTemplateRef>
  <div class="sky-input-group-btn">
    <button
      #triggerButtonRef
      aria-haspopup="dialog"
      class="sky-btn sky-btn-default sky-input-group-timepicker-btn"
      type="button"
      [attr.aria-controls]="isOpen ? timepickerId : null"
      [attr.aria-expanded]="isOpen"
      [attr.aria-label]="
        inputBoxHostService?.labelText
          ? ('skyux_timepicker_button_label_context'
            | skyLibResources: inputBoxHostService?.labelText)
          : ('skyux_timepicker_button_label' | skyLibResources)
      "
      [attr.id]="triggerButtonId"
      [attr.title]="
        inputBoxHostService?.labelText
          ? ('skyux_timepicker_button_label_context'
            | skyLibResources: inputBoxHostService?.labelText)
          : ('skyux_timepicker_button_label' | skyLibResources)
      "
      [disabled]="disabled"
      (click)="onTriggerButtonClick()"
    >
      <sky-icon icon="clock" size="lg" />
    </button>
  </div>
</ng-template>

<ng-template #timepickerTemplateRef>
  <div
    #timepickerRef
    class="sky-timepicker-container sky-shadow sky-box sky-elevation-4"
    role="dialog"
    [attr.aria-labelledby]="triggerButtonId"
    [attr.id]="timepickerId"
    [class.sky-timepicker-hidden]="!isVisible"
  >
    <div class="sky-timepicker-content">
      <section
        class="sky-timepicker-column"
        [ngClass]="{ 'sky-timepicker-24hour': is8601 }"
      >
        <ol>
          @for (hour of hours; track hour) {
            <li>
              <button
                name="hour"
                type="button"
                [ngClass]="{ 'sky-btn-active': selectedHour === hour }"
                (click)="setTime($event)"
              >
                {{ hour }}
              </button>
            </li>
          }
        </ol>
      </section>
      <section class="sky-timepicker-column">
        <ol>
          @for (minute of minutes; track minute) {
            <li>
              <button
                name="minute"
                type="button"
                [ngClass]="{
                  'sky-btn-active': highlightMinute(selectedMinute, minute)
                }"
                (click)="setTime($event)"
              >
                {{ '00'.substring(0, 2 - minute.toString().length) + minute }}
              </button>
            </li>
          }
        </ol>
      </section>
      @if (!is8601) {
        <section class="sky-timepicker-column">
          <ol>
            <li>
              <button
                name="meridie"
                type="button"
                [ngClass]="{ 'sky-btn-active': selectedMeridies === 'AM' }"
                (click)="setTime($event)"
              >
                AM
              </button>
            </li>
            <li>
              <button
                name="meridie"
                type="button"
                [ngClass]="{ 'sky-btn-active': selectedMeridies === 'PM' }"
                (click)="setTime($event)"
              >
                PM
              </button>
            </li>
          </ol>
        </section>
      }
    </div>
    <div class="sky-timepicker-footer">
      <section class="sky-timepicker-column">
        <button
          class="sky-btn sky-btn-primary"
          type="button"
          (click)="onCloseButtonClick()"
        >
          {{ 'skyux_timepicker_close' | skyLibResources }}
        </button>
      </section>
    </div>
  </div>
</ng-template>
