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

   The participant's selection per row is stored as the column index (1..N)
   in a column named after the row's id. 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%".

   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 %}

<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 %}
        </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 %}
            <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="{{ loop.index }}" {{ "required" if question.required }} {% if grid_question.value == loop.index|string %}checked{% endif %}>
                </label>
            </td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>