<?xml version="1.0"?>
<t t-name="event.event_report_template_foldable_badge">
    <div class="o_event_foldable_badge_container o_event_badge_report_page_break">
        <div class="row">
            <!-- Front (Left) -->
            <div class="page col-6 o_event_badge_height o_event_foldable_badge_left_quarter pt-2">
                <div class="oe_structure"/>
                <t t-call="event.event_report_template_badge_card"/>
            </div>
            <!-- Front (Right) -->
            <div class="page col-6 o_event_badge_height position-relative pt-2">
                <div class="oe_structure"/>
                <t t-call="event.event_report_template_badge_card"/>
            </div>
        </div>
        <div class="row o_event_foldable_badge_bottom_row">
            <!-- Inner Left -->
            <div class="o_event_badge_height o_event_foldable_badge_left_quarter page col-6">
                <div class="oe_structure"/>
                <div class="o_event_foldable_badge_bottom_left text-center overflow-hidden pe-2 h-100 w-100">
                    <div class="o_event_badge_ticket_center_vertically position-relative">
                        <t t-if="event.use_barcode">
                            <t t-if="attendee">
                                <span t-field="attendee.barcode" class="barcode" t-options="{'widget': 'barcode', 'width': 200, 'height': 84, 'quiet': 0, 'humanreadable': 1}"/>
                            </t>
                            <t t-elif="not attendee">
                                <span t-out="'12345678901234567890'" class="barcode" t-options="{'widget': 'barcode', 'width': 200, 'height': 84, 'quiet': 0, 'humanreadable': 1}"/>
                            </t>
                        </t>
                        <div class="o_event_foldable_badge_barcode_container_top mb-2 mt-4">
                            <img t-attf-src="/report/barcode/QR/{{attendee.barcode if attendee else '12345678901234567890'}}?&amp;width=174&amp;height=174" alt="QR Code"/>
                        </div>
                        <div class="fs-4 mb-3">
                            <span t-out="attendee.barcode if attendee else '12345678901234567890'"/>
                        </div>
                        <h2 class="lh-1" t-if="attendee" t-field="attendee.name"/>
                        <h2 class="lh-1" t-elif="not attendee">John Doe</h2>
                        <div t-if="attendee" class="mt-3 py-2">
                            <span t-foreach="attendee.registration_answer_choice_ids" class="px-2 py-1 d-inline-block bg-200 text-black m-1 o_event_foldable_badge_answer" t-as="answer" t-out="answer.display_name"/>
                        </div>
                        <div t-else="">
                            <span t-foreach="event.question_ids.filtered(lambda q: q.question_type == 'simple_choice' and q.answer_ids)" class="px-2 py-1 d-inline-block bg-200 text-black m-1 o_event_foldable_badge_answer" t-as="question" t-out="question.answer_ids[0].name"/>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Inner Right -->
            <div class="o_event_badge_height o_event_foldable_badge_instructions page col-6">
                <div class="oe_structure"/>
                <div class="h-50 col-12 row m-0">
                    <div class="col-6 h-100 p-0">
                        <div class="o_event_foldable_badge_step fw-bold">1</div>
                        <img src="/event/static/src/img/how_to_fold_1.png" class="w-100 h-100" alt="How to Fold (1)"/>
                    </div>
                    <div class="col-6 h-100 p-0">
                        <div class="o_event_foldable_badge_step fw-bold">2</div>
                        <img src="/event/static/src/img/how_to_fold_2.png" class="w-100 h-100" alt="How to Fold (2)"/>
                    </div>
                </div>
                <div class="h-50 col-12 row m-0">
                    <div class="col-6 h-100 p-0">
                        <div class="o_event_foldable_badge_step fw-bold">3</div>
                        <img src="/event/static/src/img/how_to_fold_3.png" class="w-100 h-100" alt="How to Fold (3)"/>
                    </div>
                    <div class="col-6 h-100 p-0">
                        <div class="o_event_foldable_badge_step fw-bold">4</div>
                        <img src="/event/static/src/img/how_to_fold_4.png" class="w-100 h-100" alt="How to Fold (4)"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</t>

