<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>
    <!-- Main survey layout -->
    <template id="survey.layout" name="Survey Layout" inherit_id="web.frontend_layout" primary="True">
        <xpath expr="//head" position="before">
            <!--TODO DBE Fix me : If one day, there is a survey_livechat bridge module, put this in that module-->
            <t t-set="no_livechat" t-value="True"/>
        </xpath>
        <xpath expr="//div[@id='wrapwrap']" position="attributes">
            <attribute name="t-att-style"
                       add="(('background-image: url(' + question.background_image_url + ');')
                             if question and question.background_image_url
                             else ('background-image: url(' + page.background_image_url + ');')
                             if page and page.background_image_url
                             else ('background-image: url(' + survey.background_image_url + ');')
                             if survey and survey.background_image_url and not survey_data
                             else '')"/>
            <attribute name="t-att-class"
                       add="(('o_survey_background o_survey_background_shadow')
                             if (question and question.background_image_url)
                             or (page and page.background_image_url)
                             or (survey and survey.background_image_url)
                             else 'o_survey_background')"
                       separator=" "/>
        </xpath>
        <xpath expr="//head/t[@t-call-assets][last()]" position="after">
            <t t-call-assets="survey.survey_assets" lazy_load="True"/>
        </xpath>
        <xpath expr="//header" position="before">
            <t t-set="no_header" t-value="True"/>
            <t t-set="no_footer" t-value="True"/>
        </xpath>
        <xpath expr="//header" position="after">
            <div id="wrap" class="oe_structure oe_empty"/>
        </xpath>
        <xpath expr="//footer" position="after">
            <div class="py-3 m-0 p-0 text-end">
                <div class="o_survey_progress_wrapper d-inline-block pe-1 text-start">
                    <t t-call="survey.survey_progression"
                        t-if="survey and survey.questions_layout != 'one_page' and answer and answer.state == 'in_progress' and (not question or not question.is_page) and not survey_form_readonly">
                        <t t-if="survey.questions_layout == 'page_per_section'">
                            <t t-set="page_ids" t-value="survey.page_ids.ids"/>
                            <t t-set="page_number" t-value="page_ids.index(page.id) + (1 if survey.progression_mode == 'number' else 0)"/>
                        </t>
                        <t t-else="">
                            <t t-if="not answer.is_session_answer and survey.questions_selection == 'random'">
                                <t t-set="page_ids" t-value="answer.predefined_question_ids.ids"/>
                            </t>
                            <t t-else="">
                                <t t-set="page_ids" t-value="survey.question_ids.ids"/>
                            </t>
                            <t t-set="page_number" t-value="page_ids.index(question.id)"/>
                        </t>
                    </t>
                </div>
                <div class="o_survey_brand_message float-end rounded me-3 border">
                    <div class="px-2 py-2 d-inline-block" t-call="web.brand_promotion_message">
                        <t t-set="_message"></t>
                        <t t-set="_utm_medium" t-valuef="survey"/>
                    </div>
                    <div t-if="not no_survey_navigation" class="o_survey_navigation_wrapper d-inline-block d-print-none" t-call="survey.survey_navigation">
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <!-- Main survey template -->
    <template id="survey_page_fill" name="Survey: main page (take survey)">
        <t t-call="survey.layout">
            <t t-if="answer.test_entry" t-call="survey.survey_button_form_view" />
            <div class="wrap o_survey_wrap d-flex">
                <div class="o_container_small o_survey_form d-flex flex-column mb-5">
                    <t t-call="survey.survey_fill_header" />
                    <t t-call="survey.survey_fill_form" />
                </div>
            </div>
        </t>
    </template>

    <template id="survey_fill_header" name="Survey: main page header">
        <div class="o_survey_nav pt16 mb-2">
            <div class="container m-0 p-0">
                <div class="row">
                    <div  class="col-lg-10">
                        <h1 t-if="answer.state == 'new' or survey.questions_layout != 'page_per_question'"
                            t-esc="survey.title" class="o_survey_main_title pt-4"></h1>
                    </div>
                    <div class="o_survey_timer col-lg-2 pt-4">
                        <h1 class="o_survey_timer_container timer text-end">
                        </h1>
                    </div>
                </div>
            </div>
            <div t-att-class="'o_survey_breadcrumb_container mt8' + (' d-none ' if answer.state != 'in_progress' else '')"
                 t-if="not survey.has_conditional_questions and survey.questions_layout == 'page_per_section' and answer.state != 'done'"
                t-att-data-can-go-back="survey.users_can_go_back"
                t-att-data-pages="json.dumps(breadcrumb_pages)" />
        </div>
    </template>

    <template id="survey_fill_form" name="Survey: main page content">
        <t t-set="survey_form_readonly" t-value="answer.state == 'done'"/>
        <t t-set="background_image_url"
           t-value="question.background_image_url
                    if question else page.background_image_url
                    if page else survey.background_image_url
                    if survey.background_image_url else False"/>
        <form role="form" method="post" t-att-name="survey.id"
                class="d-flex flex-grow-1 align-items-center"
                t-att-data-scoring-type="survey.scoring_type"
                t-att-data-answer-token="answer.access_token"
                t-att-data-survey-token="survey.access_token"
                t-att-data-users-can-go-back="survey.users_can_go_back and not answer.is_session_answer"
                t-att-data-session-in-progress="answer.is_session_answer"
                t-att-data-is-start-screen="answer.state == 'new'"
                t-att-data-readonly="survey_form_readonly"
                t-att-data-has-answered="bool(has_answered)"
                t-att-data-is-page-description="bool(question and question.is_page and not is_html_empty(question.description))"
                t-att-data-questions-layout="survey.questions_layout"
                t-att-data-triggered-questions-by-answer="json.dumps(triggered_questions_by_answer)"
                t-att-data-triggering-answers-by-question="json.dumps(triggering_answers_by_question)"
                t-att-data-selected-answers="json.dumps(selected_answers)"
                t-att-data-refresh-background="any(page.background_image for page in survey.page_ids)">
            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
            <input type="hidden" name="token" t-att-value="answer.access_token" />
            <div class="o_survey_error alert alert-danger d-none" role="alert">
                <p>There was an error during the validation of the survey.</p>
            </div>

            <div class="o_survey_form_content w-100">
                <t t-if="answer.state == 'new'" t-call="survey.survey_fill_form_start"/>
                <t t-elif="answer.state == 'in_progress'" t-call="survey.survey_fill_form_in_progress" />
                <t t-else="" t-call="survey.survey_fill_form_done"/>
            </div>
        </form>

        <!-- Modal used to display error message, i.c.o. ajax error -->
        <div role="dialog" class="modal fade" id="MasterTabErrorModal" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <header class="modal-header">
                        <h4 class="modal-title">A problem has occurred</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </header>
                    <main class="modal-body"><p>To take this survey, please close all other tabs on <strong class="text-danger"></strong>.</p></main>
                    <footer class="modal-footer"><button type="button" class="btn btn-primary" data-bs-dismiss="modal">Continue here</button></footer>
                </div>
            </div>
        </div>
    </template>

    <template id="survey_fill_form_start" name="Survey: start form content">
        <div class="wrap o_survey_start">
            <div class='mb32'>
                <div t-field='survey.description' class="oe_no_empty pb-5 text-break"/>
                <t t-if="answer.is_session_answer">
                    <div class="fw-bold">
                        The session will begin automatically when the host starts.
                    </div>
                </t>
                <t t-else="">
                    <div t-if="survey.is_time_limited">
                        <p>
                            <span t-if="not survey.certification">Time limit for this survey: </span>
                            <span t-else="">Time limit for this certification: </span>
                            <span class="fw-bold text-danger" t-field="survey.time_limit" t-options="{'widget': 'duration', 'unit': 'minute'}"></span>
                        </p>
                    </div>
                    <button type="submit" value="start" class="btn btn-primary btn-lg disabled">
                        <t t-if="survey.certification">
                            Start Certification
                        </t>
                        <t t-else="">
                            Start Survey
                        </t>
                    </button>
                    <span class="o_survey_enter fw-bold text-muted ms-2 d-none d-md-inline">or press Enter</span>
                </t>
            </div>
        </div>
    </template>

    <template id="survey_fill_form_in_progress" name="Survey: form with questions">
        <div class="o_survey_form_content_data d-none"
            t-att-data-question-time-limit-reached="answer.question_time_limit_reached"
            t-att-data-has-answered="bool(has_answered)"
            t-att-data-is-page-description="bool(question and question.is_page and not is_html_empty(question.description))"
            t-att-data-server-time="server_time"
            t-att-data-timer="timer_start"
            t-att-data-time-limit-minutes="time_limit_minutes"/>
        <t t-if="survey.questions_layout == 'one_page'">
            <!-- Questions without section -->
            <t t-foreach="survey.question_ids.filtered(lambda q: not q.page_id)" t-as="question">
                <t t-if="question in answer.predefined_question_ids" t-call="survey.question_container"/>
            </t>
            <!-- Questions with section -->
            <t t-foreach="survey.page_ids" t-as="page">
                <t t-set="display_section" t-value="page.description or any(not q.triggering_answer_ids for q in page.question_ids)
                    or (survey.questions_selection == 'random' and page.question_ids and page.random_questions_count > 0)"/>
                <div t-attf-class="js_section_wrapper #{'d-none' if not display_section else ''}">
                    <h2 t-field="page.title" class="o_survey_title pb16 text-break"/>
                    <div t-field="page.description" class="o_survey_description text-break"/>
                    <t t-foreach="page.question_ids" t-as="question">
                        <t t-if="question in answer.predefined_question_ids" t-call="survey.question_container"/>
                    </t>
                </div>
            </t>

            <div class="text-center mt16 mb256">
                <button type="submit" value="finish" class="btn btn-secondary disabled">Submit</button>
                <button id="next_page" t-attf-class="btn #{'btn-secondary' if survey_last else 'btn-primary'} d-none">Next</button>
                <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                    <span id="enter-tooltip">or press CTRL+Enter</span>
                </span>
            </div>
        </t>

        <t t-if="survey.questions_layout == 'page_per_section'">
            <h2 t-field='page.title' class="o_survey_title pb16 text-break" />
            <div t-field='page.description' class="oe_no_empty text-break"/>

            <input type="hidden" name="page_id" t-att-value="page.id" />
            <t t-foreach='page.question_ids' t-as='question'>
                <t t-if="question in answer.predefined_question_ids" t-call="survey.question_container"/>
            </t>

            <div class="row">
                <div class="col-12 text-center mt16">
                    <t t-set="submit_value" t-value="'finish' if survey_last or answer.is_session_answer else 'next_skipped'
                        if answer.survey_first_submitted and skipped_questions.page_id and page in skipped_questions.page_id else 'next'"/>
                    <button type="submit" t-att-value="submit_value" t-attf-class="btn #{'btn-secondary' if survey_last else 'btn-primary'} disabled">
                        <t t-if="submit_value == 'finish'">Submit</t>
                        <t t-elif="submit_value == 'next_skipped'">Next Skipped</t>
                        <t t-else="">Continue</t>
                    </button>
                    <button id="next_page" t-attf-class="btn #{'btn-secondary' if survey_last else 'btn-primary'} d-none">Next</button>
                    <span class="fw-bold text-muted ms-2 d-none d-md-inline" id="enter-tooltip"> or press CTRL+Enter</span>
                </div>
            </div>
        </t>

        <!-- Minimized display means we display the choices vertically (instead of optimized based on screen space).
        An exception is made for options with images, where we always want to optimize screen space.-->
        <t t-set="minimized_display" t-value="survey.questions_layout == 'page_per_question' and not any(suggestion.value_image for suggestion in question.suggested_answer_ids)" />
        <div t-if="survey.questions_layout == 'page_per_question'"
            t-attf-class="o_survey_page_per_question">
            <input type="hidden" name="question_id" t-att-value="question.id" />
            <!-- User has already answered for this session -->
            <t t-if="answer.is_session_answer and (has_answered or answer.question_time_limit_reached)">
                <div t-if="answer.question_time_limit_reached and not has_answered" class="fw-bold">Sorry, you have not been fast enough.</div>
                <div t-else="" class="fw-bold">We have registered your answer! Please wait for the host to go to the next question.</div>
                <fieldset disabled="disabled">
                    <t t-set="survey_form_readonly" t-value="True" />
                    <div class="mt-5">
                        <t t-call="survey.question_container" />
                    </div>
                </fieldset>
            </t>
            <t t-elif="answer.is_session_answer and question.is_page and not is_html_empty(question.description)">
                <div class="fw-bold mt-5">Pay attention to the host screen until the next question.</div>
            </t>
            <t t-else="">
                <div class="mt-5">
                    <t t-call="survey.question_container"/>
                </div>

                <div class="row">
                    <div class="col-12 text-center mt16">
                        <t t-set="submit_value" t-value="'finish' if survey_last or answer.is_session_answer else
                            'next_skipped' if answer.survey_first_submitted and skipped_questions and question in skipped_questions else 'next'"/>
                        <button type="submit" t-att-value="submit_value" t-attf-class="btn #{'btn-secondary' if survey_last else 'btn-primary'} disabled">
                            <t t-if="submit_value == 'finish'">Submit</t>
                            <t t-elif="submit_value == 'next_skipped'">Next Skipped</t>
                            <t t-else="">Continue</t>
                        </button>
                        <button id="next_page" t-attf-class="btn #{'btn-secondary' if survey_last else 'btn-primary'} d-none">Next</button>
                        <span class="fw-bold text-muted ms-2 d-none d-md-inline">
                            <span id="enter-tooltip">or press Enter</span>
                        </span>
                    </div>
                </div>
            </t>
        </div>
    </template>

    <!-- Finished (taken and finished) survey page -->
    <template id="survey_fill_form_done" name="Survey: finished">
        <div class="wrap">
            <div class="o_survey_finished mt32 mb32">
                <h1 class="fs-2">
                    <t t-if="survey.scoring_type != 'no_scoring'">
                        You scored <t t-out="answer.scoring_percentage"/>%
                    </t>
                    <t t-else="">Thank you!</t>
                </h1>
                <div t-field="survey.description_done" class="oe_no_empty" />
                <div class="row">
                    <div class="col">
                        <t t-if="survey.scoring_type != 'no_scoring' and survey.scoring_success_min">
                            <t t-if="answer.scoring_success">
                                <div>Congratulations, you have passed the test!</div>

                                <div t-if="survey.certification" class="mt16 mb16">
                                    <a role="button"
                                        class="btn btn-primary btn-lg"
                                        t-att-href="'/survey/%s/get_certification' % survey.id">
                                        <i class="fa fa-fw fa-trophy" role="img" aria-label="Download certification" title="Download certification"/>
                                        Download certification
                                    </a>
                                </div>
                            </t>
                            <t t-else="">
                                <div>Unfortunately, you have failed the test.</div>
                            </t>
                        </t>
                        <div class="d-flex gap-3 mt-3">
                            <t t-call="survey.survey_button_retake"/>
                            <p t-if="survey.scoring_type != 'scoring_without_answers'">
                                <a role="button" class="o_survey_review btn btn-secondary btn-lg"
                                    t-att-href="'/survey/print/%s?answer_token=%s&amp;review=True' % (survey.access_token, answer.access_token)">
                                    Review your answers
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="col-6 text-center" t-if="survey.certification_give_badge and answer.scoring_success">
                        <img t-att-src="'/web/image/gamification.badge/%s/image_128' % survey.certification_badge_id.id"/>
                        <div>You received the badge <span class="fw-bold" t-esc="survey.certification_badge_id.name"/>!</div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Question widgets -->
    <template id="question_container" name="Survey: question container">
        <t t-set="display_question"
           t-value="survey.questions_layout == 'page_per_question'
                    or survey.questions_selection == 'random'
                    or (survey.questions_layout == 'one_page' and not question.triggering_answer_ids)
                    or (survey.questions_layout == 'page_per_section' and (not question.triggering_answer_ids
                        or any(triggering_answer in selected_answers for triggering_answer in triggering_answers_by_question[question.id])))"/>

        <t t-set="answer_lines" t-value="answer.user_input_line_ids.filtered(lambda line: line.question_id == question)"/>
        <t t-set="answers_contain_image" t-value="any(a.value_image for a in question.suggested_answer_ids)"/>
        <t t-set="use_half_columns" t-value="survey.questions_layout == 'page_per_question' and answers_contain_image"/>
        <t t-set="use_half_col_lg" t-value="'col-lg-6' if (use_half_columns and not survey_form_readonly) or (answer.is_session_answer and answers_contain_image) else ''"/>
        <!--Use Key selection if number of choices is < 26 to keep Z for other choice if any-->
        <t t-set="letters" t-value="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
        <t t-set="useKeySelection" t-value="len(question.suggested_answer_ids) &lt; len(letters) and survey.questions_layout == 'page_per_question'"/>
        <!-- Extra 'right' margin is added on layouts that are not "page_per_question" to align with choices questions, since all choices have a me-2 class (pixel perfect yay...) -->
        <t t-set="extra_right_margin" t-value="survey.questions_layout != 'page_per_question' and question.question_type not in ['simple_choice', 'multiple_choice']"/>
        <t t-set="default_constr_error_msg">This question requires an answer.</t>
        <t t-set="default_validation_error_msg">The answer you entered is not valid.</t>
        <t t-set="default_comments_message">If other, please specify:</t>
        <t t-set="is_skipped_question" t-value="skipped_questions and question in skipped_questions"/>
        <div t-attf-class="js_question-wrapper pb-4
                           #{'d-none' if not display_question else ''}
                           #{'me-2' if extra_right_margin else ''}"
             t-att-id="question.id"
             t-att-data-required="bool(question.constr_mandatory and (not survey.users_can_go_back or survey.questions_layout == 'one_page')) or None"
             t-att-data-constr-error-msg="question.constr_error_msg or default_constr_error_msg if question.constr_mandatory else None"
             t-att-data-validation-error-msg="question.validation_error_msg or default_validation_error_msg if question.validation_required else None">
            <div class="mb-4">
                <h3 t-if="not hide_question_title">
                    <span t-field='question.title' class="text-break" />
                    <span t-if="question.constr_mandatory" class="text-danger">*</span>
                </h3>
                <div t-if="not is_html_empty(question.description)" t-field='question.description' class="text-muted oe_no_empty mt-1 text-break"/>
            </div>
            <t t-if="question.question_type == 'text_box'" t-call="survey.question_text_box"/>
            <t t-if="question.question_type == 'char_box'" t-call="survey.question_char_box"/>
            <t t-if="question.question_type == 'numerical_box'" t-call="survey.question_numerical_box"/>
            <t t-if="question.question_type == 'date'" t-call="survey.question_date"/>
            <t t-if="question.question_type == 'datetime'" t-call="survey.question_datetime"/>
            <t t-if="question.question_type == 'simple_choice'" t-call="survey.question_simple_choice"/>
            <t t-if="question.question_type == 'scale'" t-call="survey.question_scale"/>
            <t t-if="question.question_type == 'multiple_choice'" t-call="survey.question_multiple_choice"/>
            <t t-if="question.question_type == 'matrix'" t-call="survey.question_matrix"/>
            <div t-attf-class="o_survey_question_error d-flex align-items-center justify-content-between overflow-hidden
                 border-0 py-0 px-3 alert alert-danger mt-2 #{'slide_in' if is_skipped_question else ''}" role="alert">
                <span t-if="is_skipped_question" t-out="question.constr_error_msg or default_constr_error_msg"/>
            </div>
        </div>
    </template>

    <template id="question_text_box" name="Question: free text box">
        <div class="o_survey_comment_container h-auto p-0">
            <textarea class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0" rows="3"
                      t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                      t-att-data-question-type="question.question_type"><t t-if="answer_lines" t-esc="answer_lines[0].value_text_box or None"/></textarea>
        </div>
    </template>

    <template id="question_char_box" name="Question: text box">
        <div class="o_survey_comment_container p-0">
            <input t-att-type="'email' if question.validation_email else 'text'"
               class="form-control o_survey_question_text_box bg-transparent rounded-0 p-0"
               t-att-name="question.id" t-att-placeholder="question.question_placeholder"
               t-att-value="answer_lines[0].value_char_box if answer_lines else None"
               t-att-data-question-type="question.question_type"
               t-att-data-validation-length-min="question.validation_length_min if question.validation_required else False"
               t-att-data-validation-length-max="question.validation_length_max if question.validation_required else False"/>
        </div>
    </template>

    <template id="question_numerical_box" name="Question: numerical box">
        <div class="o_survey_answer_wrapper p-1 rounded">
            <input type="number" step="any" class="form-control o_survey_question_numerical_box bg-transparent rounded-0 p-0"
                t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                t-att-value="answer_lines[0].value_numerical_box if answer_lines else None"
                t-att-data-question-type="question.question_type"
                t-att-data-validation-float-min="question.validation_min_float_value if question.validation_required else False"
                t-att-data-validation-float-max="question.validation_max_float_value if question.validation_required else False"/>
        </div>
    </template>

    <template id="question_scale" name="Question: scale">
        <!-- A question already answered that the user resets is marked as skipped and not deleted, -->
        <!-- so we use the flag skipped to restore or not the answer state. -->
        <t t-set="answer_line" t-value="answer_lines and not answer_lines[0].skipped and answer_lines[0]"/>
        <div class="o_survey_answer_wrapper o_survey_form_choice"
             t-att-data-name="question.id"
             t-att-data-is-skipped-question="is_skipped_question or None"
             data-question-type="scale">
            <div role="radiogroup" class="btn-group d-flex mb-2" t-att-aria-label="">
                <t t-foreach="range(question.scale_min, question.scale_max + 1)" t-as="value">
                    <t t-set="answer_selected" t-value="answer_line and answer_line.value_scale == value"/>
                    <label t-attf-class="o_survey_choice_btn flex-shrink-1 rounded text-nowrap #{'me-2' if not value_last else ''} #{'o_survey_selected' if answer_selected else ''}"
                           t-attf-for="{{ question.id }}_{{ value }}">
                        <div class="d-none d-md-flex align-items-center fs-5">
                            <div class="fw-bold my-3 flex-fill align-self-center text-center" t-out="value"/>
                            <i class="fa fa-check-circle me-1 my-3"/>
                            <i class="fa fa-circle-thin me-1 my-3"/>
                        </div>
                        <div class="d-block d-md-none my-3 text-center fs-5">
                            <div class="fw-bold" t-out="value"/>
                            <i class="fa fa-check-circle"/>
                            <i class="fa fa-circle-thin"/>
                        </div>
                        <input autocomplete="off"
                               class="btn-check"
                               type="radio"
                               t-attf-class="o_survey_form_choice_item invisible position-absolute #{'o_survey_form_choice_item_selected' if answer_selected else ''}"
                               t-att-data-selection-key="letters[value_index] if useKeySelection else ''"
                               t-attf-name="{{ question.id }}"
                               t-att-checked="'checked' if answer_selected else None"
                               t-attf-value="{{ value }}"
                               t-attf-id="{{ question.id }}_{{ value }}"
                        />
                    </label>
                </t>
            </div>
            <div t-if="question.scale_min_label or question.scale_mid_label or question.scale_max_label"
                 class="d-flex justify-content-between text-primary">
                <div class="text-start" t-out="question.scale_min_label"/>
                <div class="text-center" t-out="question.scale_mid_label"/>
                <div class="text-end" t-out="question.scale_max_label"/>
            </div>
        </div>
    </template>

    <template id="question_date" name="Question: date box">
        <div class="input-group o_survey_form_date o_survey_answer_wrapper p-1 rounded">
            <input type="text" class="form-control datetimepicker-input o_survey_question_date bg-transparent rounded-0 p-0"
                   t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                   t-att-value="format_date(answer_lines[0].value_date) if answer_lines else None"
                   t-att-data-question-type="question.question_type"
                   data-widget="datetime-picker" data-widget-type="date"
                   t-att-data-min-date="question.validation_min_date"
                   t-att-data-max-date="question.validation_max_date"/>
            <div t-if="not survey_form_readonly" class="position-absolute input-group-text o_input_group_date_icon text-primary border-0 bg-transparent p-0 end-0"><i class="fa fa-calendar"></i></div>
        </div>
    </template>

    <template id="question_datetime" name="Question: datetime box">
        <div class="input-group o_survey_form_date o_survey_answer_wrapper p-1 rounded">
            <input type="text" class="form-control datetimepicker-input o_survey_question_datetime bg-transparent rounded-0 p-0"
                   t-att-name="question.id" t-att-placeholder="question.question_placeholder"
                   t-att-value="format_datetime(answer_lines[0].value_datetime) if answer_lines else None"
                   t-att-data-question-type="question.question_type"
                   data-widget="datetime-picker" data-widget-type="datetime"
                   t-att-data-min-date="question.validation_min_datetime"
                   t-att-data-max-date="question.validation_max_datetime"/>
            <div t-if="not survey_form_readonly" class="position-absolute input-group-text o_input_group_date_icon text-primary border-0 bg-transparent p-0 end-0"><i class="fa fa-calendar"></i></div>
        </div>
    </template>

    <template id="question_suggested_value_image" name="Image from the question suggested answer">
        <t t-if="label.value_image">
            <!-- Directly use field or route if the user doesn't have access rights -->
            <div t-if="not env.user.has_group('survey.group_survey_user')"
                class="o_survey_choice_img d-flex my-3 justify-content-center">
                <img t-att-src="'/survey/get_question_image/%s/%s/%s/%s' % (survey.access_token, answer.access_token, question.id, label.id)" class="mw-100 h-auto"/>
            </div>
            <div t-else=""  t-field="label.value_image"
                class="o_survey_choice_img d-flex my-3 justify-content-center"
                t-options="{'widget': 'image', 'alt-field': 'name', 'itemprop': 'image'}"/>
        </t>
    </template>

    <template id="question_simple_choice" name="Question: simple choice">
        <t t-set="answer_line" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id)"/>
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <div class="row g-2 o_survey_answer_wrapper o_survey_form_choice"
             t-att-data-name="question.id"
             t-att-data-is-skipped-question="is_skipped_question or None"
             data-question-type="simple_choice_radio">
            <t t-set="item_idx" t-value="0"/>
            <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_selected" t-value="answer_line and answer_line.suggested_answer_id.id == label.id"/>

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

                <div t-attf-class="col-sm-12 #{use_half_col_lg}">
                    <label t-att-for="str(question.id) + '_' + str(label.id)"
                        t-attf-class="o_survey_choice_btn py-1 px-3 w-100 h-100 rounded #{answer_class} #{'o_survey_selected' if answer_selected else ''}">
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative o_survey_radio_btn float-start d-flex'"/>
                        </t>
                        <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="label.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 ms-1 position-relative"/>
                            <i class="fa fa-circle-thin float-end mt-1 ms-1 position-relative"/>
                        </t>
                        <input t-att-id="str(question.id) + '_' + str(label.id)" type="radio" t-att-value='label.id'
                            t-attf-class="o_survey_form_choice_item invisible position-absolute #{'o_survey_form_choice_item_selected' if answer_selected else ''}"
                            t-att-name='question.id'
                            t-att-checked="'checked' if answer_selected 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-call="survey.question_suggested_value_image"/>
                    </label>
                </div>
            </t>
            <t t-if='question.comments_allowed and question.comment_count_as_answer'>
                <div t-attf-class="col-sm-12 #{use_half_col_lg}">
                    <label t-attf-class="o_survey_choice_btn py-1 px-3 h-100 w-100 rounded #{'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 o_survey_radio_btn float-start d-flex'"/>
                        </t>
                        <i class="fa fa-check-circle float-end mt-1 ms-1 position-relative"/>
                        <i class="fa fa-circle-thin float-end mt-1 ms-1 position-relative"/>
                        <input type="radio" 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" />
                    </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>
            </t>
            <div t-if='question.comments_allowed and not question.comment_count_as_answer'
                class="mb-2 o_survey_comment_container mt-3">
                <textarea type="text" class="col 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>
    </template>

    <template id="question_multiple_choice" name="Question: multiple choice">
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <div class="row g-2 o_survey_answer_wrapper 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"/>
            <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"/>

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

                <div t-attf-class="col-sm-12 #{use_half_col_lg}">
                    <label t-attf-class="o_survey_choice_btn py-1 px-3 w-100 h-100 rounded #{answer_class} #{'o_survey_selected' if answer_selected else ''}">
                        <t t-call="survey.survey_selection_key">
                            <t t-set="selection_key_class" t-value="'position-relative float-start d-flex'"/>
                        </t>
                        <!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
                        <i t-if="has_correct_answer and answer_selected" t-attf-class="float-end mt-1 position-relative d-inline
                            fa #{'fa-check-square' if is_correct else 'fa-times-square'}"/>
                        <t t-else="">
                            <i class="fa fa-check-square float-end mt-1 ms-1 position-relative"/>
                            <i class="fa fa-square-o float-end mt-1 ms-1 position-relative"/>
                        </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-call="survey.question_suggested_value_image"/>
                    </label>
                </div>
            </t>
            <t t-if='question.comments_allowed and question.comment_count_as_answer'>
                <div t-attf-class="col-sm-12 #{use_half_col_lg}">
                    <label t-attf-class="o_survey_choice_btn py-1 px-3 h-100 w-100 rounded #{'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>
                        <i class="fa fa-check-square float-end mt-1 ms-1 position-relative"/>
                        <i class="fa fa-square-o float-end mt-1 ms-1 position-relative"/>
                        <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" />
                    </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>
            </t>
            <div t-if='question.comments_allowed and not question.comment_count_as_answer' class="mb-2 o_survey_comment_container mt-3">
                <textarea type="text" class="col 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>
    </template>

    <template id="question_matrix" name="Question: matrix">
        <t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
        <table class="table table-borderless o_survey_question_matrix text-white text-center mb-0"
               t-att-data-name="question.id"
               t-att-data-question-type="question.question_type"
               t-att-data-sub-questions="question.matrix_row_ids.ids">
            <thead>
                <tr>
                    <th> </th>
                    <th class="fw-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
                </tr>
            </thead>
            <tbody>
                <t t-set="item_idx" t-value="0"/>
                <!-- For matrix, we have an extra check because we have rows * columns total options -->
                <t t-set="useKeySelection" t-value="useKeySelection and (len(question.suggested_answer_ids) * len(question.matrix_row_ids)) &lt; len(letters)" />
                <tr class="bg-white text-white" t-foreach="question.matrix_row_ids" t-as="row_label" t-att-id="row_label.id">
                    <th class="fw-normal text-start"><span t-field="row_label.value" /></th>
                    <t t-foreach="question.suggested_answer_ids" t-as="col_label">
                        <t t-set="answer" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == col_label and line.matrix_row_id == row_label)"/>
                        <td t-att-class="'o_survey_matrix_btn text-primary position-relative %s'
                        % ('o_survey_selected' if answer else '')">
                            <input t-att-type="'checkbox' if question.matrix_subtype == 'multiple' else 'radio'"
                                   t-att-name="'%s_%s' % (question.id, row_label.id)" t-att-value='col_label.id'
                                   t-att-checked="'checked' if answer else None"
                                   t-att-data-row-id="row_label.id"
                                   t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"
                                   class="o_survey_form_choice_item d-none"/>
                            <i t-att-class="'o_survey_matrix_empty_checkbox fa fa-%s position-relative'
                            % ('square-o' if question.matrix_subtype == 'multiple' else 'circle-thin')"></i>
                            <i t-att-class="'fa fa-%s position-relative'
                            % ('check-square' if question.matrix_subtype == 'multiple' else 'check-circle')"></i>
                            <t t-call="survey.survey_selection_key">
                                <t t-set="selection_key_class"
                                   t-value="'position-absolute float-end fw-bold %s' % ('o_survey_radio_btn' if question.matrix_subtype != 'multiple' else '')"/>
                            </t>
                            <t t-set="item_idx" t-value="item_idx + 1"/>
                        </td>
                    </t>
                </tr>
            </tbody>
        </table>
        <div t-if='question.comments_allowed'>
            <textarea type="text" class="form-control o_survey_question_text_box o_survey_comment bg-transparent rounded-0 p-0 mt-3"
                      t-att-placeholder="question.comments_message or default_comments_message if not survey_form_readonly else ''"
                      t-att-name="'%s_%s' % (question.id, 'comment')"><t t-esc="comment_line.value_char_box if comment_line else ''"/></textarea>
        </div>
    </template>

    <template id="survey_selection_key">
        <div t-if="useKeySelection" t-att-class="'o_survey_choice_key bg-white rounded %s' % selection_key_class">
             <span class="o_survey_key text-center position-absolute bg-white rounded-start py-0 ps-2"><span class="text-primary text-center text-center w-100 position-relative">Key</span></span>
             <span class="text-primary text-center w-100 position-relative" t-esc="letters[item_idx]"/>
        </div>
    </template>

    <template id="survey_progression" name="Survey: Progression">
        <t t-if="len(page_ids) > 1 and not survey.has_conditional_questions">
            <t t-set="percentage" t-value="round(100*(page_number/len(page_ids)))"/>
            <t t-if="survey.progression_mode == 'percent'">
                <span class="o_survey_progress_percent" t-esc="percentage"/> % completed
            </t>
            <t t-else="">
                <span class="o_survey_progress_number" t-esc="page_number"/> of <span t-esc="len(page_ids)"/>
                <span t-if="survey.questions_layout == 'page_per_question'">answered</span>
                <span t-else="">pages</span>
            </t>
            <div class="o_survey_progress progress flex-grow-1">
                <div class="progress-bar bg-primary" t-att-style="'width: ' + str(percentage) + '%'"/>
            </div>
        </t>
    </template>
</data>
</odoo>