{{#if this.visible}}
    <div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}} {{@wrapperClass}}" {{did-update this.trackValue @value}}>
        <div class="flex items-center h-4">
            <Input
                @type="checkbox"
                @checked={{this.checked}}
                id={{this.id}}
                data-value={{this.checked}}
                data-checked={{this.checked}}
                disabled={{this.disabled}}
                class="fleetbase-checkbox form-checkbox {{this.colorClass}} {{@inputClass}}"
                {{on "change" this.toggle}}
                ...attributes
            />
            {{#if (has-block)}}
                <div class="ml-2 text-sm leading-5">
                    <label for={{this.id}} aria-disabled={{@disabled}} class="mb-0i font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
                        {{yield}}
                    </label>
                </div>
            {{else if @label}}
                <div class="ml-2 text-sm leading-5">
                    <label for={{this.id}} aria-disabled={{@disabled}} class="mb-0i font-medium text-gray-700 dark:text-gray-100 {{@labelClass}}">
                        {{@label}}
                    </label>
                </div>
            {{/if}}
            {{#if this.disabledByPermission}}
                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                    <InputInfo @text={{t "common.unauthorized"}} />
                </Attach::Tooltip>
            {{else if @helpText}}
                <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPlacement "top"}}>
                    <InputInfo @text={{@helpText}} @exampleText={{@exampleText}} />
                </Attach::Tooltip>
            {{/if}}
        </div>

    </div>
{{/if}}