<div class="gh-stack-item {{if (eq @index 0) "gh-setting-first" "gh-setting"}}">
    <div class="flex-grow-1">
        <div class="flex justify-between items-center relative">
            <span class="gh-setting-title mb0" for={{this.checkboxId}}>
                {{humanize-setting-key @setting.key}}
            </span>
            <div class="for-switch x-small">
                <label for={{this.checkboxId}} class="switch">
                    <input type="checkbox" class="gh-input" id={{this.checkboxId}} checked={{@setting.value}} {{on "input" this.toggleValue}}>
                    <span class="input-toggle-component mt1"></span>
                </label>
            </div>
        </div>
        {{#if @setting.description}}
            <div class="gh-setting-desc" style="margin-top: 1px">{{truncate @setting.description 100}}</div>
        {{/if}}
    </div>
</div>