<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="survey.survey_image_zoomer">
        <div role="dialog" class="o_survey_img_zoom_modal show modal fade d-flex align-items-center p-0"
            data-bs-backdrop="false" aria-label="Image Zoom Dialog" tabindex="-1">
            <div class="o_survey_img_zoom_dialog modal-dialog h-100 w-100 mw-100 py-0" role="Picture Enlarged">
                <div class="modal-content h-100 bg-transparent">
                    <div class="o_survey_img_zoom_body modal-body h-100 bg-transparent d-flex justify-content-center">
                        <button type="button" data-bs-dismiss="modal" aria-label="close"
                            class="o_survey_img_zoom_close_btn close text-white btn-close-white btn-close position-absolute"/>
                        <img class="o_survey_img_zoom_image img img-fluid d-block m-auto" t-att-src="sourceImage" alt="Zoomed Image"/>
                        <div class="o_survey_img_zoom_controls_wrapper position-absolute">
                            <button type="button" class="o_survey_img_zoom_in_btn text-white me-1" aria-label="Zoom in">
                                <span class="fa fa-plus"/>
                            </button>
                            <button type="button" class="o_survey_img_zoom_out_btn text-white ms-1" aria-label="Zoom out">
                                <span class="fa fa-minus"/>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

</templates>
