<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-inherit="web.TranslationDialog" t-inherit-mode="extension">
        <!-- Make translation column a flex container for inline button -->
        <xpath expr="//div[hasclass('translation')]" position="attributes">
            <attribute name="class" add="d-flex align-items-start gap-1" separator=" "/>
        </xpath>

        <!-- Make textarea fill remaining space -->
        <xpath expr="//div[hasclass('translation')]//textarea" position="attributes">
            <attribute name="class" add="flex-grow-1" separator=" "/>
        </xpath>

        <!-- Make input fill remaining space -->
        <xpath expr="//div[hasclass('translation')]//input[@type='text']" position="attributes">
            <attribute name="class" add="flex-grow-1" separator=" "/>
        </xpath>

        <!-- Single-term translate button (shown only for empty terms) -->
        <xpath expr="//div[hasclass('translation')]" position="inside">
            <button t-if="!term.value"
                    class="btn btn-sm btn-outline-primary px-2 o_translate_single_btn flex-shrink-0"
                    t-on-click="() => this.translateSingleTerm(term)"
                    t-att-disabled="anyTranslating"
                    t-att-title="'Translate to ' + term.langName">
                <t t-if="state.translatingTermIds[term.id]">
                    <i class="fa fa-spinner fa-spin"/>
                </t>
                <t t-else="">
                    <i class="fa fa-language"/>
                </t>
            </button>
        </xpath>

        <!-- Footer: Save, Discard, Auto Translate -->
        <xpath expr="//t[@t-set-slot='footer']" position="replace">
            <t t-set-slot="footer">
                <button class="btn btn-primary" t-on-click="onSave">
                    Save
                </button>
                <button class="btn btn-secondary" t-on-click="props.close">
                    Discard
                </button>
                <button type="button" class="btn btn-secondary ml-3" t-on-click="autoTranslate" t-att-disabled="anyTranslating">
                    <t t-if="state.translating">
                        <i class="fa fa-spinner fa-spin me-1"/>Translating...
                    </t>
                    <t t-else="">Auto Translate</t>
                </button>
            </t>
        </xpath>
    </t>
</templates>
