{# Matrix of radio buttons. One row per item; columns share a common scale.

   The participant's selection per row is stored in a column named after the
   row's id. By default the stored value is the column index (1..N); set
   `store_labels` to record the label string instead. The grid as a whole has
   no id of its own — only the row ids become database columns.

   Args:
       labels (list): Column headers, in display order. Each row offers one
           radio button per column.
       q_text (list): Rows. Each entry is an object with `id` (becomes the
           column name) and `text` (the row label, HTML allowed).
       questions (list, optional): Legacy alias for q_text, accepted for
           backwards compatibility.
       shuffle (bool, optional): Randomise the row order on each render.
           Defaults to False.
       question_width (str, optional): CSS width for the first column (the
           row labels). Defaults to "30%".
       na_column (bool, optional): Add an extra "not applicable" column at
           the right of the grid. Selecting it satisfies `required` but
           records the row's value as null. Defaults to False.
       na_label (str, optional): Header text for the N/A column. Defaults
           to "N/A".
       store_labels (bool, optional): Store the chosen column's label
           string instead of its 1-based index. Calculated fields that
           reference rows in this grid are rejected at load time, since
           label values are not numeric. Defaults to False.

   Example:
       {
           "questiontype": "radiogrid",
           "instructions": "",
           "shuffle": false,
           "labels": ["Strongly disagree", "", "Neutral", "", "Strongly agree"],
           "q_text": [
               {"id": "row_1", "text": "Item 1"},
               {"id": "row_2", "text": "Item 2"}
           ]
       }
#}
{% if question.shuffle %}
    {% do shuffle(question.q_text) %}
{% endif %}

{% if question.question_width is undefined %}
    {% set question_width = "30%" %}
{% else %}
    {% set question_width = question.question_width %}
{% endif %}

{% set na_label = question.na_label if question.na_label else "N/A" %}
<table class="bofs-radiogrid-table" style="--bofs-radiogrid-first-col-width: {{ question_width }}">
    <thead>
        <tr>
            <th></th>
            {% for label in question.labels %}
            <th scope="col" style="text-align:center;">{{ label }}</th>
            {% endfor %}
            {% if question.na_column %}
            <th scope="col" style="text-align:center;">{{ na_label }}</th>
            {% endif %}
        </tr>
    </thead>
    <tbody>
        {% if question.q_text is undefined %}
            {% set questions = question.questions %}
        {% else %}
            {% set questions = question.q_text %}
        {% endif %}

        {% for grid_question in questions %}
        <tr class="{{ "bofs-row-odd" if loop.index % 2 == 0 else "bofs-row-even" }}">
            <td>{{ grid_question.text | safe }}</td>
            {% for label in question.labels %}
            {% set radio_value = label if question.store_labels else loop.index|string %}
            <td>
                <label class="bofs-radiogrid-cell">
                    <input class="bofs-form-check-input" title="{{ label }}" type="radio" name="{{ grid_question.id }}" id="{{ grid_question.id }}{{ loop.index }}" value="{{ radio_value }}" {{ "required" if question.required }} {% if grid_question.has_value and grid_question.value == radio_value %}checked{% endif %}>
                </label>
            </td>
            {% endfor %}
            {% if question.na_column %}
            <td>
                <label class="bofs-radiogrid-cell">
                    <input class="bofs-form-check-input" title="{{ na_label }}" type="radio" name="{{ grid_question.id }}" id="{{ grid_question.id }}_na" value="" {{ "required" if question.required }} {% if grid_question.has_value and grid_question.value is none %}checked{% endif %}>
                </label>
            </td>
            {% endif %}
        </tr>
        {% endfor %}
    </tbody>
</table>