{# Multi-select list of checkboxes. Each checkbox stores 1/0 in its own
   column; checkboxes with `text_entry` instead store the entered string.

   Args:
       questions (list): Checkbox items. Each entry is an object with `id`
           (becomes the database column name) and `text` (the label, HTML
           allowed). Optional per-item fields:
             text_entry (bool): When true, the row becomes a checkbox plus a
               free-text input; the column stores the entered string.
             text_entry_hides (bool): Hide the text input until the
               checkbox is ticked.
             text_entry_width (int): Pixel width of the text input.
       shuffle (bool, optional): Randomise the item order on each render.
           Defaults to False.

   Example:
       {
           "questiontype": "checklist",
           "instructions": "",
           "questions": [
               {"id": "item_1", "text": "Option 1"},
               {"id": "item_2", "text": "Option 2"},
               {"id": "item_3", "text": "Option 3"}
           ]
       }
#}
{% if question.shuffle %}
    {% do shuffle(question.questions) %}
{% endif %}

{% for check_question in question.questions %}
{% set is_filled = check_question.has_value and check_question.value %}
<div class="bofs-form-check">
    {% if check_question.text_entry %}
        <label class="bofs-form-check-label">
            <input class="bofs-form-check-input"
                   type="checkbox"
                   name="{{ check_question.id }}_enable"
                   id="{{ check_question.id }}_enable"
                   value="1"
                   {% if is_filled %}checked{% endif %}
                   {% if check_question.text_entry_hides %}
                   onclick="{ $('#{{ check_question.id }}_enable').prop('checked') ? $('#{{ check_question.id }}').css('display', 'block') : $('#{{ check_question.id }}').css('display', 'none')  }"
                   {% endif %}>
            {{ check_question.text | safe }}
        </label>
        <input
            style="display: {% if check_question.text_entry_hides and not is_filled %}none{% else %}block{% endif %}; margin-left: 28px; width: {{ check_question.text_entry_width if check_question.text_entry_width else config['DEFAULT_FIELD_WIDTH'] }}px;"
            type="text"
            name="{{ check_question.id }}"
            id="{{ check_question.id }}"
            {% if is_filled %}value="{{ check_question.value|e }}"{% endif %}
            aria-label="custom text entry">
    {% else %}
        <label class="bofs-form-check-label">
            <input class="bofs-form-check-input" type="checkbox" name="{{ check_question.id }}" id="{{ check_question.id }}" value="1" {% if check_question.checked %}checked{% endif %}>
            {{ check_question.text | safe }}
        </label>
    {% endif %}
</div>
{% endfor %}