{$showAsCard = $showAsCard|default:false}
{$textBeforeInput = $textBeforeInput|default:''}
{$textAfterInput = $textAfterInput|default:''}
{$isDisabled = $isDisabled|default:false}
<form class="{if $showAsCard}tw-rounded-2xl tw-border tw-border-gray-200
    tw-bg-white tw-dark:border-gray-800 tw-dark:bg-white/[0.03]{/if}">
    <label for="{$id}"
           class="tw-flex! {if $isDisabled}tw-cursor-not-allowed!{else}tw-cursor-pointer{/if} tw-items-center
           tw-gap-3 tw-mb-0 tw-text-sm tw-font-medium
           tw-text-gray-700 tw-select-none tw-dark:text-gray-400{if $showAsCard}
            tw-flex-row tw-justify-between tw-w-full tw-gap-4 tw-px-6 tw-py-5 tw-h-full{/if}">
        {if $textBeforeInput !== ''}<span>{$textBeforeInput}</span>{/if}
        <div class="tw-relative tw-shrink-0">
            <input type="checkbox"
                   id="{$id}"
                   class="tw-sr-only"
                   name="settingValue"
                   value="on"
                    {if $isDisabled} disabled{/if}
                   hx-post="{stbIO uri='toggleSwitchSetting' settingName=$id}"
                   hx-trigger="change"
                   hx-sync="this:replace"
                   hx-swap="none"/>
            <div class="tw-block tw-h-6 tw-w-11 tw-rounded-full {if $isDisabled}
            tw-bg-gray-100 tw-dark:bg-gray-800{else}tw-bg-gray-200 tw-dark:bg-white/10{/if}"></div>
            <div class="tw-shadow-theme-sm tw-absolute tw-top-0.5 tw-left-0.5 tw-h-5 tw-w-5
            tw-rounded-full tw-bg-white tw-duration-300 tw-ease-linear tw-translate-x-0"></div>
        </div>
        {if $textAfterInput !== ''}<span>{$textAfterInput}</span>{/if}
    </label>
</form>
<script>
    (function() {
        const switchToggle = document.querySelector('#{$id}').closest('form');
        document.body.addEventListener('uiAttachedEvent', function () {
            {if $isActive}ui.switchToggle(switchToggle, 1);{/if}
        }, { once: true });
        switchToggle.addEventListener(
            'hxSwitchToggled',
            function (evt) {
                ui.switchToggle(switchToggle, parseInt(evt.detail.value));
                {if empty($jsCallback) === false}
                    {$jsCallback}
                {/if}
            }
        );
    })();
</script>
