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

<t t-name="html_builder.ImageToolOption">
    <t t-if="!state.isGridMode and !state.isSocialMediaImg and !state.isImageBinaryField">
        <MediaSizeOption level="1"/>
    </t>
    <BuilderRow label.translate="Transform" level="1" preview="false">
        <div class="btn-group o-hb-button-group">
            <BuilderButton t-if="this.state.showCropTool" title.translate="Crop image" action="'cropImage'" icon="'fa-crop'" id="'cropImage'" />
            <BuilderButton title.translate="Reset crop" action="'resetCrop'" t-if="this.state.showCropTool and this.isActiveItem('cropImage')" icon="'oi-close'" className="'btn-danger-color-hover border-start-0 rounded-start-0 m-0 py-0 flex-grow-0'" />
        </div>
        <ImageTransformOption t-if="!state.isImageAnimated and !state.isSocialMediaImg and !state.isImageBinaryField" />
    </BuilderRow>
    <ImageFilterOption level="1"/>
    <ImageFormatOption level="1"/>
    <t t-if="!state.isSocialMediaImg">
        <t t-if="!state.isDynamicSVG">
            <ImageShapeOption />
        </t>
        <BuilderRow label.translate="Description" t-if="!state.isImageBinaryField"
            tooltip.translate="'Alt tag' specifies an alternate text for an image, if the image cannot be displayed (slow connection, missing image, screen reader ...).">
            <BuilderTextInput
                action="'alt'"
                placeholder.translate="Alt tag"
                />
        </BuilderRow>
        <BuilderRow label.translate="Tooltip" t-if="!state.isImageBinaryField"
            tooltip.translate="'Title tag' is shown as a tooltip when you hover the picture.">
            <BuilderTextInput
                attributeAction="'title'"
                placeholder.translate="Title tag" />
        </BuilderRow>
    </t>
</t>

<t t-name="html_builder.ImageAndFaOption">
    <BuilderRow label.translate="Alignment">
        <BuilderSelect>
            <BuilderSelectItem action="'imageAlignClassAction'" actionParam="''" title.translate="Unalign">None</BuilderSelectItem>
            <BuilderSelectItem action="'imageAlignClassAction'" actionParam="'me-auto float-start'" title.translate="Align Left">Left</BuilderSelectItem>
            <BuilderSelectItem action="'imageAlignClassAction'" actionParam="'mx-auto d-block'" title.translate="Align Center">Center</BuilderSelectItem>
            <BuilderSelectItem action="'imageAlignClassAction'" actionParam="'ms-auto float-end'" title.translate="Align Right">Right</BuilderSelectItem>
        </BuilderSelect>
    </BuilderRow>
    <BuilderRow label.translate="Style">
        <BuilderButton icon="'fa-square'" classAction="'rounded'" title.translate="Shape: Rounded"/>
        <BuilderButton icon="'fa-circle-o'" classAction="'rounded-circle'" title.translate="Shape: Circle"/>
        <BuilderButton icon="'fa-sun-o'" classAction="'shadow'" title.translate="Shadow"/>
        <BuilderButton icon="'fa-picture-o'" classAction="'img-thumbnail'" title.translate="Shape: Thumbnail"/>
    </BuilderRow>

    <BuilderRow label.translate="Padding">
        <BuilderNumberInput styleAction="'padding'" unit="'px'" composable="true"/>
    </BuilderRow>

</t>

</templates>
