<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="label_preview" name="Product Label Preview">
        <div t-att-style="back_style">
            <div t-att-style="label_style">
                <div name="transform_div">
                <t t-foreach="sections" t-as="section">
                    <t t-set="value" t-value="section.get_value(label)"/>
                    <t t-set="section_height" t-value="section.height - section.padding_top - section.padding_bottom"/>
                    <div t-att-style="'%s%s' % (section.get_html_style(), 'opacity: 0.3;' if editable_section_id and section.id != editable_section_id else '')">
                        <t t-if="section.type == 'product_attributes'">
                            <t t-if="section.widget == 'attribute_list'">
                                <div t-foreach="section.get_attribute_data(label)" t-as="attr">
                                    <span t-if="section.with_product_attribute_name" t-out="attr['name']" class="mx-1"/>
                                    <t t-foreach="attr['values']" t-as="attr_value">
                                        <span t-att-class="'badge rounded bg-%s text-%s mr-1' % ('dark' if attr_value['active'] else 'light', 'light' if attr_value['active'] else 'dark')">
                                            <t t-out="attr_value['name']"/>
                                        </span>
                                    </t>
                                </div>
                            </t>
                            <div t-else="" t-foreach="section.get_attribute_data(label)" t-as="attr" class="d-inline-flex flex-wrap">
                                <span class="mw-100 mx-1">
                                    <t t-if="section.with_product_attribute_name" class="mr-1"><t t-out="attr['name']"/>: </t>
                                    <t t-foreach="attr['values']" t-as="attr_value">
                                        <span t-if="attr_value['active']" t-out="attr_value['name']" style="padding-left: 3px;"/>
                                    </t>
                                </span>
                            </div>
                        </t>
                        <div t-if="section.type == 'multi_price'">
                            <t t-foreach="value" t-as="price">
                                <t t-out="price['amount']"/>
                                <small>(from <t t-out="price['qty']"/> <t t-out="label.product_id.uom_id.name"/>)</small>
                                <br/>
                            </t>
                        </div>
                        <t t-elif="section.widget == 'barcode'">
                            <img t-if="value" t-att-src="'/report/barcode/%s/%s?quiet=0&amp;humanreadable=%d' % (section.barcode_symbology, value, int(section.barcode_is_humanreadable))" style="width:85%;height:100%;"/>
                            <div t-else="" t-attf-style="width:100%;height:{{ section_height }}mm;background-image:url(/fusion_labels_pro/static/img/no-barcode.png);background-size:contain;background-repeat:no-repeat;background-position:center;"/>
                        </t>
                        <t t-elif="section.widget == 'price'">
                          <div>
                              <t t-esc="label.currency_id.symbol"/>&amp;nbsp;
                              <span class="oe_currency_value" t-esc="'%.0f.' % label.price"/><span class="oe_currency_value" style="font-size:0.5em">00</span>
                          </div>
                        </t>
                        <t t-elif="section.widget == 'qr_code'">
                            <t t-set="qr_code_size_px" t-value="section.height * section.template_id.ratio_px_in_mm"/>
                            <img t-att-src="'/report/barcode/?barcode_type=QR&amp;value=%s&amp;width=%d&amp;height=%d'%(value, qr_code_size_px, qr_code_size_px)" t-attf-style="display: block; height: 100%; width: {{ section_height }}mm;"/>
                        </t>
                        <t t-elif="section.widget == 'image'">
                            <div t-attf-style="width:100%;height:100%;background-image:url({{ section.get_image_url(label) }});background-size:contain;background-repeat:no-repeat;background-position:center;"/>
                        </t>
                        <t t-elif="section.type == 'image'">
                            <div t-attf-style="width:100%;height:100%;background-image:url(/web/image/print.product.label.section/{{ section.id }}/image);background-size:contain;background-repeat:no-repeat;background-position:center;"/>
                        </t>
                        <t t-else="">
                            <div t-esc="value" style="white-space:normal" t-att-title="value"/>
                        </t>
                    </div>
                </t>
                </div>
            </div>
        </div>
    </template>

</odoo>
