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

    <!-- Buttons -->
    <t t-name="odex30_account_accountant.BankRecRecordFormButtonsHeaderLeft">
        <div class="o_statusbar_buttons o_bank_rec_stats_buttons_aside_left py-1 ps-1">
            <t t-set="areAllLinesValid" t-value="this.checkBankRecLinesInvalidFields(data)"/>
            <button accesskey="v"
                    class="btn btn-primary"
                    t-if="data.state === 'valid' and areAllLinesValid"
                    t-on-click="(ev) => this.actionValidate()">
                <span>Validate</span>
            </button>
            <button class="btn btn-secondary text-muted"
                    t-if="data.state === 'invalid' or (data.state === 'valid' and !areAllLinesValid)">
                <span>Validate</span>
            </button>
            <button accesskey="r"
                    class="btn btn-secondary"
                    t-if="data.state === 'reconciled'"
                    t-on-click="(ev) => this.actionReset()">
                <span>Reset</span>
            </button>
            <button accesskey="e"
                    class="btn btn-secondary"
                    t-if="data.st_line_checked and areAllLinesValid"
                    t-on-click="(ev) => this.actionToCheck()">
                <span>To Check</span>
            </button>
            <button class="btn btn-secondary text-muted"
                    t-if="data.st_line_checked and !areAllLinesValid">
                <span>To Check</span>
            </button>
            <button accesskey="e"
                    class="btn btn-secondary"
                    t-if="!data.st_line_checked"
                    t-on-click="(ev) => this.actionSetAsChecked()">
                <span>Set as Checked</span>
            </button>
        </div>
    </t>

    <!-- Reconciliation models -->
    <t t-name="odex30_account_accountant.BankRecRecordFormButtonsHeaderRight">
        <div t-if="hasGroupReadOnly" class="o_statusbar_buttons o_bank_rec_stats_buttons_aside_right">
            <div class="available_reco_model_ids">

                <!-- Displayed reco models -->
                <t t-set="nb_rendered_buttons" t-value="0"/>

                <div class="o_bank_rec_reco_models_widget_div">
                    <t t-foreach="data.available_reco_model_ids.records"
                       t-as="reco_model"
                       t-key="reco_model.data.id">
                        <t t-set="is_selected"
                           t-value="reco_model.data.id === data.selected_reco_model_id[0]"/>

                        <t t-if="reco_model_index lt 5 or is_selected">
                            <button
                                t-att-accesskey="'SHIFT+'+(reco_model_index + 1)"
                                t-on-click="() => this.actionSelectRecoModel(reco_model)"
                                class="btn recon_model_button me-1 my-1"
                                t-att-class="{'btn-secondary': !is_selected, 'btn-primary': is_selected}"
                                t-out="reco_model.data.display_name"/>

                            <t t-set="nb_rendered_buttons" t-value="nb_rendered_buttons + 1"/>
                        </t>
                    </t>

                    <!-- Dropdown if more reco models -->
                    <div t-if="data.available_reco_model_ids.records.length gt nb_rendered_buttons" class="bank_rec_reco_model_dropdown my-1">
                        <Dropdown>
                            <button class="btn btn-light">
                                More
                            </button>
                            <t t-set-slot="content">
                                <t t-foreach="data.available_reco_model_ids.records" t-as="reco_model" t-key="reco_model.data.id">
                                    <t t-set="is_selected" t-value="reco_model.data.id === data.selected_reco_model_id.id"/>
                                    <DropdownItem t-if="reco_model_index gte 5 and !is_selected"
                                                  onSelected="() => this.actionSelectRecoModel(reco_model)">
                                        <t t-out="reco_model.data.display_name"/>
                                    </DropdownItem>
                                </t>
                            </t>
                        </Dropdown>
                    </div>
                </div>

                <!-- Creation of reco models -->
                <div class="bank_rec_reco_model_dropdown">
                    <Dropdown position="'bottom-end'">
                        <button class="btn btn-light">
                            <i class="fa fa-cog"/>
                        </button>
                        <t t-set-slot="content">
                            <DropdownItem onSelected="() => this.actionCreateRecoModel()">
                                Create model
                            </DropdownItem>
                            <DropdownItem onSelected="() => this.actionViewRecoModels()">
                                View models
                            </DropdownItem>
                        </t>
                    </Dropdown>
                </div>

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

    <!-- line_ids field -->
    <t t-name="odex30_account_accountant.BankRecRecordFormLineIds">
        <div name="line_ids" class="w-100">
            <div class="o_list_renderer table-responsive">
                <table class="o_list_table table table-sm position-relative mb-0 o_list_table_ungrouped table-striped o_bank_rec_lines_widget_table">
                    <thead>
                        <tr>
                            <t t-foreach="line_ids_columns" t-as="column" t-key="column[0]">
                                <t t-if="['amount_currency', 'debit', 'credit', 'balance'].includes(column[0])">
                                    <th class="o_list_number_th text-end" t-esc="column[1]"/>
                                </t>
                                <t t-elif="column[0] === '__trash'">
                                    <th class="o_list_actions_header"/>
                                </t>
                                <t t-else="">
                                    <th t-out="column[1]"/>
                                </t>
                            </t>
                        </tr>
                    </thead>
                    <tbody>
                        <t t-foreach="data.line_ids.records" t-as="line" t-key="line_index">
                            <t t-set="invalidFields" t-value="this.getBankRecLineInvalidFields(line)"/>

                            <tr class="o_data_row o_selected_row o_list_no_open o_bank_rec_expanded_line"
                                t-att-class="{
                                    'o_bank_rec_liquidity_line': line.data.flag === 'liquidity',
                                    'o_bank_rec_auto_balance_line': line.data.flag === 'auto_balance',
                                    'o_bank_rec_selected_line': line.data.index === data.form_index and this.state.bankRecNotebookPage === 'manual_operations_tab',
                                    'table-info': line.data.index === data.form_index and this.state.bankRecNotebookPage === 'manual_operations_tab',
                                }"
                                t-on-click="(ev) => this.handleLineClicked(ev, line)">

                                <t t-foreach="line_ids_columns" t-as="column" t-key="column[0]">
                                    <t t-if="column[0] === 'account'">
                                        <td class="o_data_cell o_field_cell o_list_many2one"
                                            t-att-class="{'o_invalid_cell': invalidFields.includes('account_id')}"
                                            field="account_id"
                                            t-att-title="line.data.account_id[1]"
                                            t-out="line.data.account_id[1]"/>
                                    </t>
                                    <t t-if="column[0] === 'partner'">
                                        <t t-if="line.data.flag === 'liquidity' and !line.data.partner_id">
                                            <td class="o_data_cell o_field_cell o_list_many2one text-muted"
                                                field="partner_id"
                                                t-att-title="data.partner_name or ''"
                                                t-out="data.partner_name or ''"/>
                                        </t>
                                        <t t-else="">
                                            <td class="o_data_cell o_field_cell o_list_many2one"
                                                field="partner_id"
                                                t-att-title="line.data.partner_id[1]"
                                                t-out="line.data.partner_id[1]"/>
                                        </t>
                                    </t>
                                    <t t-if="column[0] === 'date'">
                                        <t t-if="['manual', 'early_payment', 'auto_balance', 'tax_line'].includes(line.data.flag)">
                                            <td class="o_data_cell o_field_cell" field="date">
                                                <span field="date" class="badge text-bg-secondary">New</span>
                                            </td>
                                        </t>
                                        <t t-else="">
                                            <td class="o_data_cell o_field_cell"
                                                t-att-class="{'o_invalid_cell': invalidFields.includes('date')}"
                                                field="date"
                                                t-out="formatDateField(line.data.date)"/>
                                        </t>
                                    </t>
                                    <t t-if="column[0] === 'analytic_distribution'">
                                        <td class="o_data_cell o_field_cell o_field_widget o_field_analytic_distribution" field="analytic_distribution">
                                            <div class="o_field_tags d-inline-flex flex-wrap mw-100">
                                                <AnalyticDistribution
                                                    name="'analytic_distribution'"
                                                    record="line"
                                                    readonly="true"
                                                    t-key="getKey(line.data)"
                                                />
                                            </div>
                                        </td>
                                    </t>
                                    <t t-if="column[0] === 'taxes'" name="col_taxes">
                                        <td class="o_data_cell o_field_cell o_field_widget o_field_many2many_tags"
                                            field="tax_ids">
                                            <div class="o_field_tags d-inline-flex flex-wrap mw-100">
                                                <TagsList tags="line.data.tax_ids.records.map((tax) => ({text: tax.data.display_name, id: tax.resId}))"/>
                                            </div>
                                        </td>
                                    </t>
                                    <t t-if="column[0] === 'amount_currency'">
                                        <t t-if="line.data.flag === 'exchange_diff'">
                                            <td/>
                                        </t>
                                        <t t-else="">
                                            <td class="o_data_cell o_field_cell o_list_number"
                                                field="amount_currency"
                                                style="justify-content: right;"
                                                t-out="isMonetaryZero(line.data.amount_currency, line.data.currency_id[0]) ? '' : formatMonetaryField(line.data.amount_currency, line.data.currency_id[0])"/>
                                        </t>
                                    </t>
                                    <t t-if="column[0] === 'currency'">
                                        <t t-if="line.data.flag === 'exchange_diff'">
                                            <td/>
                                        </t>
                                        <t t-else="">
                                            <td class="o_data_cell o_field_cell o_list_many2one"
                                                field="currency_id"
                                                t-att-title="line.data.currency_id[1]"
                                                t-out="line.data.currency_id[1]"/>
                                        </t>
                                    </t>
                                    <t t-if="column[0] === 'debit'">
                                        <td class="o_data_cell o_field_cell o_list_number"
                                            field="debit"
                                            t-out="isMonetaryZero(line.data.debit, line.data.company_currency_id[0]) ? '' : formatMonetaryField(line.data.debit, line.data.company_currency_id[0])"/>
                                    </t>
                                    <t t-if="column[0] === 'credit'">
                                        <td class="o_data_cell o_field_cell o_list_number"
                                            field="credit"
                                            t-out="isMonetaryZero(line.data.credit, line.data.company_currency_id[0]) ? '' : formatMonetaryField(line.data.credit, line.data.company_currency_id[0])"/>
                                    </t>
                                    <t t-if="column[0] === 'balance'">
                                        <td class="o_data_cell o_field_cell o_list_number"
                                            field="balance"
                                            t-out="isMonetaryZero(line.data.balance, line.data.company_currency_id[0]) ? '' : formatMonetaryField(line.data.balance, line.data.company_currency_id[0])"/>
                                    </t>
                                    <t t-if="column[0] === '__trash'">
                                        <td class="o_list_record_remove">
                                            <button t-if="['valid', 'invalid'].includes(data.state) and !['liquidity', 'auto_balance', 'tax_line'].includes(line.data.flag)"
                                                    t-on-click.prevent.stop="(ev) => this.actionRemoveLine(line)"
                                                    class="btn fa fa-trash-o"/>
                                        </td>
                                    </t>
                                </t>
                            </tr>
                            <!-- Ensure the same color band will be applied -->
                            <tr/>
                            <tr class="o_data_row o_selected_row o_list_no_open o_bank_rec_second_line"
                                t-att-class="{
                                    'o_bank_rec_liquidity_line': line.data.flag === 'liquidity',
                                    'o_bank_rec_auto_balance_line': line.data.flag === 'auto_balance',
                                    'o_bank_rec_selected_line': line.data.index === data.form_index and this.state.bankRecNotebookPage === 'manual_operations_tab',
                                    'table-info': line.data.index === data.form_index and this.state.bankRecNotebookPage === 'manual_operations_tab',
                                }"
                                t-on-click="(ev) => this.handleLineClicked(ev, line)">
                                <td t-att-colspan="line_ids_columns.length - (display_currency_columns ? 5 : 3) + (hasGroupReadOnly ? 0 : 1)"
                                    class="o_data_cell o_field_cell o_list_char text-wrap fw-normal"
                                    field="name">
                                    <t t-if="line.data.source_aml_move_id[0] and (['new_aml', 'aml'].includes(line.data.flag) or (line.data.flag == 'liquidity' and data.state == 'reconciled' and hasGroupReadOnly))">
                                        <span class="o_form_uri fst-italic"
                                              t-out="line.data.source_aml_move_id[1]"
                                              t-on-click="() => this.actionRedirectToSourceMove(line)"/>
                                        <span class="me-1 fst-italic" t-if="line.data.name">:</span>
                                    </t>
                                    <span t-if="line.data.bank_account"
                                          class="text-muted fst-italic me-1"
                                          t-out="line.data.bank_account"/>
                                    <span class="text-muted fst-italic"
                                          t-out="line.data.name"/>
                                </td>
                                <td t-if="display_currency_columns"
                                    class="o_data_cell o_field_cell o_list_number"
                                    field="amount_currency">
                                    <span t-if="line.data.display_stroked_amount_currency"
                                          class="text-muted text-decoration-line-through"
                                          field="amount_currency"
                                          t-out="formatMonetaryField(line.data.source_amount_currency, line.data.currency_id[0])"/>
                                </td>
                                <td t-if="display_currency_columns" field="currency_id"/>
                                <td t-if="hasGroupReadOnly"
                                    class="o_data_cell o_field_cell o_list_number text-end"
                                    field="debit">
                                    <span t-if="line.data.display_stroked_balance and !isMonetaryZero(line.data.debit, line.data.company_currency_id[0])"
                                          class="text-muted text-decoration-line-through"
                                          field="debit"
                                          t-out="formatMonetaryField(line.data.source_debit, line.data.company_currency_id[0])"/>
                                </td>
                                <td t-if="hasGroupReadOnly"
                                    class="o_data_cell o_field_cell o_list_number text-end"
                                    field="credit">
                                    <span t-if="line.data.display_stroked_balance and !isMonetaryZero(line.data.credit, line.data.company_currency_id[0])"
                                          class="text-muted text-decoration-line-through"
                                          field="credit"
                                          t-out="formatMonetaryField(line.data.source_credit, line.data.company_currency_id[0])"/>
                                </td>
                                <td t-if="!hasGroupReadOnly"
                                    class="o_data_cell o_field_cell o_list_number text-end"
                                    field="balance">
                                    <span t-if="line.data.display_stroked_balance and (!isMonetaryZero(line.data.debit, line.data.company_currency_id[0]) or !isMonetaryZero(line.data.credit, line.data.company_currency_id[0]))"
                                          class="text-muted text-decoration-line-through"
                                          field="balance"
                                          t-out="formatMonetaryField(line.data.source_debit or line.data.source_credit, line.data.company_currency_id[0])"/>
                                </td>
                                <td class="empty_trash_cell"/>
                            </tr>
                        </t>

                        <t t-set="nb_extra_lines" t-value="5 - data.line_ids.records.length"/>
                        <tr t-foreach="[...Array(Math.max(nb_extra_lines, 0)).keys()]" t-as="i" t-key="i">
                            <td t-att-colspan="line_ids_columns.length">&#8205;</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </t>

    <!-- Notebook - amls_tab -->
    <t t-name="odex30_account_accountant.BankRecRecordNotebookAmls">
        <div class="bank_rec_widget_form_amls_list_anchor" t-if="this.state.bankRecEmbeddedViewsData">
            <BankRecViewEmbedder viewProps="this.notebookAmlsListViewProps()" t-key="data.st_line_id[0]"/>
        </div>
    </t>

    <!-- Notebook - manual_operations_tab -->
    <t t-name="odex30_account_accountant.BankRecRecordNotebookManualOperations">
        <t t-set="line" t-value="this.getBankRecRecordLineInEdit()"/>
        <t t-set="data" t-value="this.state.bankRecRecordData"/>
        <div t-if="line" class="bank_rec_widget_manual_operations_anchor">
            <t t-set="invalidFields" t-value="this.getBankRecLineInvalidFields(line)"/>
            <t t-set="hasForcedNegativeValue"
               t-value="['new_aml', 'exchange_diff'].includes(line.data.flag) and (line.data.source_balance lt 0.0 || line.data.source_amount_currency lt 0.0)"/>
            <t t-set="reconciled"
               t-value="data.state === 'reconciled'"/>

            <div class="o_group row align-items-start">
                <div class="o_inner_group grid col-lg-4">
                    <t t-set="is_batch" t-value="line.data.flag == 'new_batch'"/>
                    <!-- amount_currency (in journal currency) -->
                    <t t-set="amountFieldReadonly" t-value="reconciled or is_batch"/>
                    <t t-set="currencyFieldReadonly" t-value="reconciled or ['liquidity', 'tax_line', 'new_aml', 'new_batch'].includes(line.data.flag)"/>
                    <div name="amount_currency"
                         t-if="line.data.flag !== 'exchange_diff'"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': amountFieldReadonly}">
                                Amount
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="d-flex gap-2">
                                <!-- amount -->
                                <div class="o_field_widget o_field_monetary">
                                    <BankRecMonetaryField
                                        name="'amount_currency'"
                                        record="line"
                                        readonly="amountFieldReadonly"
                                        hasForcedNegativeValue="hasForcedNegativeValue"
                                    />
                                </div>
                                <!-- in -->
                                <t t-if="!currencyFieldReadonly">in</t>
                                <!-- currency -->
                                <div t-if="!currencyFieldReadonly" class="o_field_widget o_field_many2one w-50">
                                    <Many2OneField
                                        t-if="!currencyFieldReadonly"
                                        name="'currency_id'"
                                        record="line"
                                        readonly="currencyFieldReadonly"
                                        canOpen="false"
                                        canQuickCreate="false"
                                        canCreateEdit="false"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- amount_transaction_currency (in transaction currency) -->
                    <t t-set="currencyFieldReadonly"
                       t-value="reconciled || ['tax_line', 'new_aml'].includes(line.data.flag)"/>
                    <div name="amount_transaction_currency"
                         t-if="data.is_multi_currency and line.data.flag === 'liquidity' and (!reconciled || reconciled and line.data.transaction_currency_id[0])"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': amountFieldReadonly}">
                                In Foreign Currency
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="d-flex gap-2">
                                <!-- amount -->
                                <div class="o_field_widget o_field_monetary">
                                    <BankRecMonetaryField
                                        t-if="line.data.transaction_currency_id"
                                        name="'amount_transaction_currency'"
                                        record="line"
                                        readonly="amountFieldReadonly"
                                        hasForcedNegativeValue="hasForcedNegativeValue"
                                    />
                                </div>
                                <!-- in -->
                                <t>in</t>
                                <!-- currency -->
                                <div class="o_field_widget o_field_many2one w-50">
                                    <Many2OneField
                                        name="'transaction_currency_id'"
                                        record="line"
                                        readonly="currencyFieldReadonly"
                                        canOpen="false"
                                        canQuickCreate="false"
                                        canCreateEdit="false"
                                        domain="[['id', '!=', line.data.currency_id[0]]]"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- balance (in company currency) -->
                    <t t-set="amountFieldReadonly" t-value="reconciled or (line.data.flag === 'liquidity' and line.data.company_currency_id[0] !== line.data.currency_id[0]) or is_batch"/>
                    <div name="balance"
                         t-if="line.data.company_currency_id[0] !== line.data.currency_id[0] and line.data.company_currency_id[0] !== line.data.transaction_currency_id[0]"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': amountFieldReadonly}">
                                In Company Currency
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="d-flex">
                                <!-- amount -->
                                <div class="o_field_widget o_field_monetary">
                                    <BankRecMonetaryField
                                        name="'balance'"
                                        record="line"
                                        readonly="amountFieldReadonly"
                                        hasForcedNegativeValue="hasForcedNegativeValue"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- suggestion -->
                    <div name="suggestion"
                         t-if="line.data.suggestion_html != ''"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900"/>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div t-on-click="handleSuggestionHtmlClicked">
                                <t t-out="line.data.suggestion_html"/>
                            </div>
                        </div>
                    </div>

                    <!-- account_id -->
                    <t t-set="readonly"
                       t-value="reconciled || ['liquidity', 'new_aml', 'exchange_diff', 'new_batch'].includes(line.data.flag)"/>
                    <div name="account_id"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_field_invalid': invalidFields.includes('account_id'), 'o_form_label_readonly': readonly}">
                                Account
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_many2one"
                                 t-att-class="{'o_field_invalid': invalidFields.includes('account_id')}">
                                <Many2OneField
                                    name="'account_id'"
                                    record="line"
                                    readonly="readonly"
                                    canOpen="false"
                                    canQuickCreate="false"
                                />
                            </div>
                        </div>
                    </div>

                    <!-- partner_id -->
                    <t t-set="readonly"
                       t-value="reconciled || ['tax_line', 'new_aml', 'exchange_diff', 'new_batch'].includes(line.data.flag)"/>
                    <div name="partner_id"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': readonly}">
                                Partner
                            </label>
                        </div>
                        <div class="o_field_widget o_field_many2one">
                            <Many2OneField
                                name="'partner_id'"
                                record="line"
                                readonly="readonly"
                                canQuickCreate="false"
                                domain="[['company_id', 'in', [false, data.company_id[0]]], '|', ['parent_id', '=', false], ['is_company', '=', true]]"
                            />
                        </div>
                    </div>

                    <!-- partner extra values -->
                    <div t-if="['auto_balance', 'manual'].includes(line.data.flag)
                                and line.data.partner_receivable_account_id
                                and line.data.partner_payable_account_id"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell flex-grow-1 flex-sm-grow-0 o_wrap_label w-100 text-break text-900"/>
                        <div class="o_cell flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="d-flex gap-1 align-items-center">
                                <button class="btn btn-link text-nowrap" t-on-click="actionSetPartnerReceivableAccount">
                                    Receivable:
                                    <div class="o_field_widget o_readonly_modifier o_field_monetary text-muted">
                                        <span t-out="formatMonetaryField(line.data.partner_receivable_amount, line.data.partner_currency_id[0])"/>
                                    </div>
                                </button>
                                <span>-</span>
                                <button class="btn btn-link text-nowrap" t-on-click="actionSetPartnerPayableAccount">
                                    Payable:
                                    <div class="o_field_widget o_readonly_modifier o_field_monetary text-muted">
                                        <span t-out="formatMonetaryField(line.data.partner_payable_amount, line.data.partner_currency_id[0])"/>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- analytic_distribution -->
                    <div name="analytic_distribution"
                         t-if="hasGroupAnalyticAccounting"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': reconciled}">
                                Analytic
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_analytic_distribution">
                                <!-- t-key is needed to force component rerender and avoid synchronization issue on record change -->
                                <AnalyticDistribution
                                    name="'analytic_distribution'"
                                    record="line"
                                    readonly="reconciled"
                                    account_field="'account_id'"
                                    business_domain="'general'"
                                    allow_save="true"
                                    t-key="line.data.index"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="o_inner_group grid col-lg-4">
                    <!-- date -->
                    <div name="date"
                         t-if="line.data.flag === 'liquidity'"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_field_invalid': invalidFields.includes('date'), 'o_form_label_readonly': reconciled}">
                                Date
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_date" t-att-class="{'o_field_invalid': invalidFields.includes('date')}">
                                <DateTimeField
                                    name="'date'"
                                    record="line"
                                    readonly="reconciled"
                                />
                            </div>
                        </div>
                    </div>
                    <!-- reference -->
                    <div name="reference"
                         t-if="line.data.flag === 'liquidity' and line.data.ref"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': readonly}">
                                Reference
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_char">
                                <CharField
                                    name="'ref'"
                                    record="line"
                                    readonly="readonly"
                                />
                            </div>
                        </div>
                    </div>

                    <!-- bank_account -->
                    <div name="bank_account"
                         t-if="line.data.flag === 'liquidity' and line.data.bank_account"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label o_form_label_readonly">
                                Bank Account
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_many2one">
                                <t t-out="line.data.bank_account"/>
                            </div>
                        </div>
                    </div>

                    <!-- tax_ids -->
                    <div name="tax_ids"
                         t-if="['manual', 'auto_balance'].includes(line.data.flag)"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': reconciled}">
                                Taxes
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_many2many_tags">
                                <Many2ManyTagsField
                                    name="'tax_ids'"
                                    record="line"
                                    readonly="reconciled"
                                    canCreate="false"
                                    canQuickCreate="false"
                                    canCreateEdit="false"
                                    context="{'append_type_to_tax_name': true}"
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="o_inner_group grid col-lg-4"/>
            </div>
            <div class="o_group row align-items-start">
                <div class="o_inner_group grid">
                    <!-- name -->
                    <div name="name"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': readonly}">
                                Label
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_char">
                                <CharField
                                    name="'name'"
                                    record="line"
                                    readonly="readonly"
                                />
                            </div>
                        </div>
                    </div>
                    <!-- notes/narration -->
                    <div name="narration"
                         t-if="line.data.flag === 'liquidity' and (!reconciled || (reconciled and line.data.narration))"
                         class="o_wrap_field d-flex d-sm-contents flex-column">
                        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
                            <label class="o_form_label" t-att-class="{'o_form_label_readonly': reconciled}">
                                Notes
                            </label>
                        </div>
                        <div class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0 w-100">
                            <div class="o_field_widget o_field_char">
                                <HtmlField
                                    name="'narration'"
                                    record="line"
                                    readonly="reconciled"
                                    wysiwygOptions="{}"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

    <!-- Notebook - discuss -->
    <t t-name="odex30_account_accountant.BankRecRecordNotebookChatter">
        <div class="bank_rec_widget_form_discuss_anchor">
            <Chatter threadModel="'account.move'" threadId="data.move_id[0]"/>
        </div>
    </t>

    <!-- Notebook - transaction_details_tab -->
    <t t-name="odex30_account_accountant.BankRecRecordNotebookTransactionDetails">
        <div class="bank_rec_widget_form_transaction_details_anchor o_group row align-items-start">
            <div class="o_wrap_field d-flex d-sm-contents flex-column mb-3 mb-sm-0">
                <span t-out="data.st_line_transaction_details"/>
            </div>
        </div>
    </t>

    <!-- Main template -->
    <t t-name="odex30_account_accountant.BankRecRecordForm">
        <div class="o_xxl_form_view h-100 o_view_controller o_form_view">
            <t t-set="record" t-value="this.bankRecModel.root"/>
            <t t-set="data" t-value="state.bankRecRecordData"/>
            <div class="o_form_view_container" t-ref="formContainer">
                <div class="o_content">
                    <div class="o_form_nosheet o_form_editable d-block">
                        <!-- Header -->
                        <div class="o_bank_rec_stats_buttons">
                            <t t-call="odex30_account_accountant.BankRecRecordFormButtonsHeaderLeft"/>
                            <t t-call="odex30_account_accountant.BankRecRecordFormButtonsHeaderRight"/>
                        </div>

                        <!-- line_ids -->
                        <t t-call="odex30_account_accountant.BankRecRecordFormLineIds">
                            <t t-set="line_ids_columns" t-value="this.getOne2ManyColumns()"/>
                            <t t-set="display_currency_columns" t-value="!!line_ids_columns.find((c) => c[0] == 'currency')"/>
                        </t>

                        <!-- Notebook -->
                        <Notebook t-key="state.bankRecStLineId" defaultPage="state.bankRecNotebookPage || ''" onPageUpdate.bind="onPageUpdate" >
                            <t t-set-slot="amls_tab"
                               name="'amls_tab'"
                               title.translate="Match Existing Entries"
                               isVisible="['valid', 'invalid'].includes(data.state)">
                                <t t-call="odex30_account_accountant.BankRecRecordNotebookAmls"/>
                            </t>
                            <t t-set-slot="manual_operations_tab"
                               name="'manual_operations_tab'"
                               title.translate="Manual Operations"
                               isVisible="hasGroupReadOnly">
                                <t t-call="odex30_account_accountant.BankRecRecordNotebookManualOperations"/>
                            </t>
                            <t t-set-slot="discuss_tab"
                               name="'discuss_tab'"
                               title.translate="Discuss"
                               isVisible="true">
                                <t t-call="odex30_account_accountant.BankRecRecordNotebookChatter"/>
                            </t>
                            <t t-set-slot="transaction_details_tab"
                               name="'transaction_details_tab'"
                               title.translate="Transaction Details"
                               isVisible="data.st_line_transaction_details and data.st_line_transaction_details != ''">
                                <t t-call="odex30_account_accountant.BankRecRecordNotebookTransactionDetails"/>
                            </t>
                        </Notebook>

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

    <t t-name="odex30_account_accountant.BankRecEmbeddedListController" t-inherit="web.ListView" t-inherit-mode="primary">
        <t t-set-slot="control-panel-additional-actions" position="replace"/>
    </t>

</templates>
