<?xml version="1.0"?>
<t t-name="web.external_layout_bubble">
        <!-- HEADER -->
        <div t-attf-class="header o_company_#{company.id}_layout {{report_type == 'pdf' and 'pt-5'}}">
            <svg xmlns="http://www.w3.org/2000/svg" t-attf-class="o_shape_bubble_1 z-n1 {{report_type == 'pdf' and 'position-fixed' or 'position-absolute'}}" width="1100" height="1100">
               <circle cx="550" cy="550" r="550" t-att-fill="company.primary_color" fill-opacity=".1"/>
            </svg>
            <table class="o_ignore_layout_styling table table-borderless mb-0">
                <tbody>
                    <tr>
                        <td t-if="company.report_header" class="o_company_tagline fw-bold p-0 pe-2">
                            <span t-field="company.report_header">
                                Company tagline
                            </span>
                        </td>
                        <td class="p-0 text-end">
                            <img t-if="company.logo" class="o_company_logo mb-2" t-att-src="image_data_uri(company.logo)" alt="Logo"/>
                            <div name="company_address">
                                <ul class="list-unstyled" name="company_address_list">
                                    <li t-if="company.is_company_details_empty">
                                        <span t-field="company.partner_id" t-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;address&quot;, &quot;name&quot;], &quot;no_marker&quot;: true}">
                                            <div class="d-flex flex-column align-items-center justify-content-center border-1 rounded p-4 h-100 w-100 bg-light opacity-75 text-muted text-center">
                                                <strong>Company address block</strong>
                                                <div>Contains the company address.</div>
                                            </div>
                                        </span>
                                    </li>
                                    <li t-else="">
                                        <span t-field="company.company_details">
                                            <div class="d-flex flex-column align-items-center justify-content-center border-1 rounded p-4 h-100 w-100 bg-light opacity-75 text-muted text-center">
                                                <strong>Company details block</strong>
                                                <div>Contains the company details.</div>
                                            </div>
                                        </span>
                                    </li>
                                    <li t-if="not forced_vat"/>
                                    <li t-else="">
                                        <t t-esc="company.country_id.vat_label or 'Tax ID'">Tax ID</t>:
                                        <span t-esc="forced_vat">US12345671</span>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- BODY -->
        <t t-set="layout_background_url" t-value="'data:image/png;base64,%s' % company.layout_background_image.decode('utf-8') if company.layout_background_image and company.layout_background == 'Custom' else                 '/base/static/img/demo_logo_report.png' if company.layout_background == 'Demo logo' else ''"/>
        <div t-attf-class="article o_report_layout_bubble o_table_boxed-rounded o_company_#{company.id}_layout {{'o_report_layout_background' if company.layout_background != 'Blank' else ''}}" t-attf-style="{{ 'background-image: url(%s);' % layout_background_url if layout_background_url else '' }}" t-att-data-oe-model="o and o._name" t-att-data-oe-id="o and o.id" t-att-data-oe-lang="o and o.env.context.get('lang')">
            <table class="o_ignore_layout_styling table table-borderless mb-0">
                <tbody>
                    <tr>
                        <td t-call="web.address_layout" t-attf-class="p-0 {{'pt-3' if information_block else ''}}">
                            <t t-set="custom_layout_address" t-value="true"/>
                        </td>
                        <td t-if="not information_block" class="align-bottom p-0 ps-2">
                            <h2 class="mb-4 text-nowrap text-end" t-out="layout_document_title"/>
                        </td>
                    </tr>
                    <tr t-if="information_block">
                        <td colspan="2" class="align-bottom p-0">
                            <h2 class="text-nowrap text-end" t-out="layout_document_title"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            <t t-out="0"/>
        </div>

        <!-- Footer -->
        <div t-attf-class="footer o_company_#{company.id}_layout {{report_type != 'pdf' and 'position-relative mt-auto mx-n5'}}">
            <svg xmlns="http://www.w3.org/2000/svg" t-attf-class="{{report_type == 'pdf' and 'position-fixed start-0'}}" width="500" height="228" viewBox="0 0 500 228" fill="none">
                <path d="M500 228H0V6.52743C26.3323 2.23278 53.3561 0 80.9008 0C256.522 0 410.969 90.7656 500 228Z" t-att-fill="company.secondary_color" fill-opacity=".1"/>
            </svg>
            <div t-attf-class="o_footer_content {{report_type != 'pdf' and 'position-absolute end-0 start-0 bottom-0 mx-5'}} pt-4 text-center">
                <div class="border-top pt-2" t-field="company.report_footer"/>
                <span t-if="report_type == 'pdf' and display_name_in_footer" class="text-muted" t-out="str(o.name) + ', '">(document name)</span>
                <span t-if="report_type == 'pdf'" class="text-muted">Page <span class="page"/> / <span class="topage"/></span>
            </div>
        </div>
    </t>

    