@let poHelper = setHelper(label, additionalHelpTooltip);
@if (help) {
  <po-field-container [p-disabled]="disabled" [p-size]="size">
    <div class="po-field-container-content">
      <ng-container *ngTemplateOutlet="checkboxContent"></ng-container>
    </div>
    <po-field-container-bottom [p-help]="help" [p-size]="size"></po-field-container-bottom>
  </po-field-container>
} @else {
  <ng-container *ngTemplateOutlet="checkboxContent"></ng-container>
}

<ng-template #checkboxContent>
  <div
    class="container-po-checkbox"
    [attr.checked]="checkboxValue"
    (click)="checkOption($event, checkboxValue)"
    (keydown)="onKeyDown($event, checkboxValue)"
  >
    <div
      #checkboxLabel
      role="checkbox"
      class="po-checkbox-outline"
      [class.po-checkbox-outline-aa]="size === 'small'"
      [class.po-checkbox-outline-large]="size === 'large'"
      [tabindex]="disabled || disabladTabindex ? -1 : 0"
      [attr.aria-checked]="checkboxValue"
      [attr.data-focused-element]="!disabled"
      [attr.data-inactive-component]="disabled"
      (blur)="onBlur()"
    >
      <span
        [attr.aria-checked]="checkboxValue"
        aria-label=" "
        [id]="id"
        class="po-checkbox"
        [ngClass]="iconNameLib === 'AnimaliaIcon' ? 'po-checkbox-phosphor' : 'po-checkbox-poicon'"
        [class.po-checkbox-aa]="size === 'small'"
        [class.po-checkbox-large]="size === 'large'"
        [attr.aria-disabled]="disabled"
        [attr.required]="checkBoxRequired"
      >
      </span>

      @if (label) {
        <po-label
          #labelEl
          class="po-checkbox-label"
          [class.po-checkbox-label-aa]="size === 'small'"
          tabindex="-1"
          [p-disabled]="disabled"
          [p-for]="id"
          [p-label]="label"
          [p-text-wrap]="labelTextWrap()"
          [p-tooltip]="showTip ? label : null"
          (mouseenter)="handleLabelTooltip()"
          (focus)="handleLabelTooltip()"
        >
        </po-label>
      }
      @if (poHelperComponent() || poHelper.hideAdditionalHelp) {
        <po-helper
          #helperEl
          class="po-checkbox-helper"
          [p-helper]="poHelper.helperSettings"
          [p-disabled]="disabled"
          [p-append-in-body]="appendBox"
          [p-size]="size === 'large' ? 'medium' : size"
        >
        </po-helper>
      }
    </div>
  </div>
</ng-template>