<?xml version="1.0"?>
<t name="Question: multiple choice" t-name="survey.question_multiple_choice">
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <div class="row o_survey_form_choice o_survey_question_multiple_choice" t-att-data-name="question.id" t-att-data-question-type="question.question_type">
            <t t-set="item_idx" t-value="0"/>
            <div class="d-flex flex-wrap col-lg-12">
                <t t-set="has_correct_answer" t-value="scoring_display_correction and any(label.is_correct for label in question.suggested_answer_ids)"/>
                <t t-foreach="question.suggested_answer_ids" t-as="label">
                    <t t-set="item_idx" t-value="label_index"/>
                    <t t-set="answer_line" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == label)"/>
                    <t t-set="answer_selected" t-value="answer_line and answer_line.suggested_answer_id.id == label.id"/>
                    <t t-set="is_correct" t-value="label.is_correct"/>

                    <!--Used for print mode with corrections -->
                    <t t-set="answer_class" t-if="not has_correct_answer" t-value="''"/>
                    <t t-set="answer_class" t-elif="is_correct" t-value="'bg-success'"/>
                    <t t-set="answer_class" t-elif="not is_correct" t-value="'bg-danger'"/>

                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s %s' % (answer_class, 'o_survey_selected' if answer_line else '')">
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                        </t>
                        <input type="checkbox" t-att-value="label.id" class="o_survey_form_choice_item invisible position-absolute" t-att-name="question.id" t-att-checked="'checked' if answer_line else None" t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
                        <span class="ms-2 text-break" t-field="label.value"/>
                        <t t-if="has_correct_answer and answer_selected">
                            <!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
                            <i t-if="is_correct" class="float-end mt-1 position-relative d-inline fa fa-check-circle"/>
                            <i t-else="" class="float-end mt-1 position-relative d-inline fa fa-times-circle"/>
                        </t>
                        <t t-else="">
                            <i class="fa fa-check-circle float-end mt-1 position-relative"/>
                            <i class="fa fa-circle-thin float-end mt-1 position-relative"/>
                        </t>
                        <t t-call="survey.question_suggested_value_image"/>
                    </label>
                </t>
            </div>
            <div t-if="question.comments_allowed and question.comment_count_as_answer" class="js_ck_comments col-lg-12">
                <div class="d-flex flex-wrap">
                    <label t-att-class="'o_survey_choice_btn form-label me-2 py-1 px-3 rounded %s' % ('o_survey_selected' if comment_line else '')">
                        <t t-set="item_idx" t-value="item_idx + 1"/>
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                        </t>
                        <input type="checkbox" class="o_survey_form_choice_item o_survey_js_form_other_comment invisible position-absolute" value="-1" t-att-name="question.id" t-att-checked="comment_line and 'checked' or None" t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
                        <span class="ms-2" t-out="question.comments_message or default_comments_message"/>
                        <i class="fa fa-check-circle float-end mt-1 position-relative"/>
                        <i class="fa fa-circle-thin float-end mt-1 position-relative"/>
                    </label>
                </div>
                <div t-attf-class="o_survey_comment_container mt-3 py-0 px-1 #{'d-none' if not comment_line else ''}">
                    <textarea type="text" class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0" t-att-disabled="None if comment_line else 'disabled'"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
                </div>
            </div>
            <div t-if="question.comments_allowed and not question.comment_count_as_answer" class="col-lg-12 o_survey_comment_container mx-1 mt-3 py-0 ps-3 pe-4">
                <textarea type="text" class="form-control o_survey_comment o_survey_question_text_box bg-transparent rounded-0 p-0" t-att-placeholder="question.comments_message or default_comments_message if not survey_form_readonly else ''"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
            </div>
        </div>
    </t>

    