<script lang="ts">
    import type { Writable } from "svelte/store"
    export let groupTitle: string
    export let checkboxes: { name: string; emailName: string }[]
    export let formValues: Writable<FormValues>
    export let rowNr: number
</script>

<div class="checkbox-group">
    <h3>{groupTitle}</h3>
    <div class="containerr">
        {#each checkboxes as checkbox, i}
            <label class="checkbox-label">
                <input
                    type="checkbox"
                    class="checkbox-input checkit"
                    bind:this="{$formValues[`checkbox_${groupTitle}_${rowNr}_${checkbox.emailName}`]}"
                />
                <span class="checkit-span"></span>
                {checkbox.name}
            </label>
        {/each}
    </div>
</div>

<style lang="less">
    .checkbox-group {
        .checkbox-input {
            vertical-align: middle;
            margin-right: 8px;
            width: fit-content !important;
        }

        .checkbox-label {
            width: 100%;
            vertical-align: middle;
            align-items: center;
            display: flex;
            gap: 10px;
        }
        & > .containerr {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    }
</style>
