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

    <t t-name="web_editor.HtmlField">
        <t t-if="props.readonly || props.notEditable || (sandboxedPreview and !state.showCodeView)">
            <t t-if="this.showIframe">
                <iframe t-ref="iframe" t-att-class="{'d-none': !this.state.iframeVisible, 'o_readonly': true}"
                t-att-sandbox="sandboxedPreview ? 'allow-same-origin allow-popups allow-popups-to-escape-sandbox' : false"></iframe>
            </t>
            <t t-else="">
                <div  t-ref="readonlyElement" class="o_readonly" t-out="markupValue" />
            </t>
        </t>
        <div t-else="" class="h-100" t-ref="spellcheck">
            <t t-if="state.showCodeView">
                <textarea t-ref="codeView" class="o_codeview" t-att-value="markupValue"/>
            </t>
            <t t-else="">
                <t t-component="this.Wysiwyg" t-props="{
                    'options': this.wysiwygOptions,
                    'startWysiwyg': this.startWysiwyg.bind(this),
                    'editingValue': this.currentEditingValue,
                }" />
            </t>
            <t t-if="isTranslatable">
                <span t-attf-style="font-size: 15px; position: absolute; right: {{this.props.codeview ? '40px' : '5px'}}; top: 5px;">
                    <TranslationButton
                        fieldName="props.name"
                        record="props.record"
                    />
                </span>
            </t>
        </div>
        <div t-if="state.showCodeView || (sandboxedPreview and !props.readonly and !props.notEditable)" t-ref="codeViewButton" id="codeview-btn-group" class="btn-group" t-on-click="toggleCodeView">
            <button class="o_codeview_btn btn btn-primary">
                <i class="fa fa-code" />
            </button>
        </div>
    </t>

</templates>
