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

<t t-name="web.Form.OuterGroup">
    <div class="o_group row align-items-start" t-attf-class="{{ allClasses }}" t-att-style="props.style">
        <t t-slot="title" t-if="props.slots and props.slots.title" />
        <t t-foreach="getItems()" t-as="item" t-key="item_index">
            <span class="o_newline" t-if="item.newline" />
            <t t-slot="{{ item.name }}" className="item.colspan !== props.maxCols ? 'col-lg-' + item.size : ''"/>
        </t>
    </div>
</t>

<t t-name="web.Form.InnerGroup">
    <div t-attf-class="{{ allClasses }}" class="o_inner_group grid" t-att-style="props.style">
        <div t-if="props.slots and props.slots.title" t-attf-class="g-col-sm-{{ props.maxCols }}">
            <t t-slot="title" />
        </div>
        <t t-foreach="getRows()" t-as="row" t-key="row_index" t-if="row.isVisible">
            <t t-foreach="row" t-as="cell" t-key="cell_index">
                <t t-set="marginOnSmallScreen" t-value="cell_last ? 'mb-3 mb-sm-0' : ''"/>
                <t t-if="cell.subType === 'item_component'">
                    <t t-call="web.Form.InnerGroup.ItemComponent">
                        <t t-set="cell" t-value="cell" />
                        <t t-set="marginOnSmallScreen" t-value="marginOnSmallScreen" />
                    </t>
                </t>

                <t t-else="">
                    <div
                        class="o_cell o_cell_custom"
                        t-attf-style="{{ cell.itemSpan > 1 ? '--o-grid-column-span: ' + cell.itemSpan + ';' : '' }}"
                        t-attf-class="{{ cell.subType === 'label' ? 'o_wrap_label text-break text-900' : null }} {{ marginOnSmallScreen }}"
                        t-if="cell.isVisible">
                        <t t-slot="{{ cell.name }}" />
                    </div>
                </t>

            </t>
        </t>
    </div>
</t>

<t t-name="web.Form.InnerGroup.ItemComponent">
    <t t-if="cell.props.fieldInfo.field.component.name !== 'BooleanField'">
        <div class="o_cell o_wrap_label text-break text-900">
            <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
        </div>
        <div
        class="o_cell o_wrap_input text-break"
        t-attf-class="{{ marginOnSmallScreen }}"
        t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}">
            <t t-slot="{{ cell.name }}"/>
        </div>
    </t>
    <t t-else="">
        <div class="o_wrap_field_boolean d-flex d-sm-contents" t-attf-class="{{ marginOnSmallScreen }}">
            <div class="o_cell o_wrap_label flex-sm-grow-0 text-break text-900">
                <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
            </div>
            <div class="o_cell o_wrap_input order-first flex-sm-grow-0 order-sm-0"
                t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}">
                <t t-slot="{{ cell.name }}" />
            </div>
        </div>
    </t>
</t>

</templates>
