<?xml version="1.0"?>
<t t-name="web.external_layout_folder">
        <t t-set="header_shape_height" t-value="'174'"/>

        <div t-attf-class="header o_company_#{company.id}_layout {{report_type != 'pdf' and 'h-0'}}">
            <div class="o_folder_header_container position-absolute start-0 top-0 z-n1 w-100">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" t-att-height="header_shape_height" fill="none" preserveAspectRatio="none">
                    <rect width="100%" t-att-height="header_shape_height"/>
                </svg>
                <div class="o_folder_adaptative_shape d-flex flex-start position-relative">
                    <svg xmlns="http://www.w3.org/2000/svg" class="d-block flex-grow-1" fill="none" height="100%">
                        <rect width="100%" height="100%"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="o_folder_angle_shape" width="80" height="100%" viewBox="0 0 80 48" fill="none">
                        <path d="M5.70364 48H0V0.00100806H73.5404L80 0C74.2028 0.665869 68.7417 3.06684 64.332 6.88852L25.3513 40.6709C19.8969 45.3979 12.9212 48 5.70364 48Z"/>
                    </svg>
                    <h2 t-attf-class="{{layout_document_title and 'o_folder_title mt-2 text-nowrap' or 'w-25'}}">
                        <t t-out="layout_document_title"/>
                    </h2>
                </div>
            </div>
            <div class="o_folder_company_info d-flex justify-content-between">
                <div class="w-50">
                    <img t-if="company.logo" class="o_company_logo_big mb-2" t-att-src="image_data_uri(company.logo)" alt="Logo"/>
                    <div t-if="company.report_header" t-field="company.report_header" class="o_company_tagline fw-bold">Company tagline</div>
                </div>
                <div name="company_address" class="w-50 text-end">
                    <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">
                            <t t-if="company.vat">
                                <t t-esc="company.country_id.vat_label or 'Tax ID'">Tax ID</t>:
                                <span t-esc="company.vat">US12345671</span>
                            </t>
                        </li>
                        <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>
            </div>
        </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_folder o_table_striped o_company_#{company.id}_layout {{'o_report_layout_background' if company.layout_background != 'Blank' else ''}}" t-attf-style="{{report_type != 'pdf' and 'margin-top:' + header_shape_height + 'px;'}}                 {{ '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')">
            <div class="pt-2" t-attf-style="{{report_type != 'pdf' and 'margin-top:' + str(env['ir.actions.report'].get_paperformat().margin_top) + 'pt;'}}">
                <t t-set="custom_layout_address" t-value="true"/>
                <t t-call="web.address_layout"/>
            </div>
            <h3 t-if="report_type == 'pdf'" t-out="layout_document_title" class="opacity-0" t-att-style="'height: 0px'"/>
            <t t-out="0"/>
        </div>

        <!-- Footer -->
        <div t-attf-class="footer o_company_#{company.id}_layout {{report_type != 'pdf' and 'mt-auto'}}">
            <div class="o_footer_content d-flex border-top pt-2">
                <div class="flex-grow-1 me-2 text-start" t-field="company.report_footer"/>
                <div class="text-end text-muted">
                    <div t-if="report_type == 'pdf' and display_name_in_footer" t-out="o.name">(document name)</div>
                    <div t-if="report_type == 'pdf'" class="text-nowrap">Page <span class="page"/> / <span class="topage"/></div>
                </div>
            </div>
        </div>
    </t>

    