{% import "_includes/forms" as forms %}

{{ forms.lightSwitchField({
    label: "Custom values"|t('freeform'),
    instructions: "Enable this to specify custom values for each option label."|t('freeform'),
    class: 'custom-values',
    name: 'types[checkbox_group][customValues]',
    on: field.hasCustomOptionValues,
}) }}

<table class="fullwidth editable value-group"
       id="checkbox-group-table"
       data-is-multiple
       data-type="checkbox_group">
    <thead>
    <tr>
        <th scope="col" class="field-label">{{ "Label" }}</th>
        <th scope="col" class="field-value">{{ "Value" }}</th>
        <th scope="col" colspan="3" class="">{{ "Is checked?" }}</th>
    </tr>
    </thead>
    <tbody>
        {% for option in field.metaProperty('options', []) %}
            <tr data-id="{{ loop.index0 }}">
                <td class="textual field-label">
                    <textarea name="types[checkbox_group][labels][]" rows="1">{{ option.label }}</textarea>
                </td>
                <td class="textual field-value">
                    <textarea name="types[checkbox_group][values][]" class="code" rows="1">{{ option.value }}</textarea>
                </td>
                <td>
                    {% set isChecked = option.value in field.getMetaProperty('values') or option.value == field.getMetaProperty('value') %}
                    <input type="hidden" value="{{ isChecked }}" name="types[checkbox_group][checked][]" />
                    <input type="checkbox" {{ isChecked ? "checked" : "" }} />
                </td>
                <td class="thin action"><a class="move icon" title="{{ 'Reorder'|t('freeform') }}"></a></td>
                <td class="thin action"><a class="delete icon" title="{{ 'Delete'|t('freeform') }}"></a></td>
            </tr>
        {% endfor %}
    </tbody>
</table>

<div class="btn dashed add icon">{{ addRowLabel is defined ? addRowLabel : "Add an option"|t('freeform') }}</div>