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

<t t-name="html_builder.ImageToolOption">
    <ImageShapeOption />
    <BuilderRow label.translate="Description"
        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"
        tooltip.translate="'Title tag' is shown as a tooltip when you hover the picture.">
        <BuilderTextInput
            attributeAction="'title'"
            placeholder.translate="Title tag" />
    </BuilderRow>
    <BuilderRow label.translate="Transform" preview="false">
        <BuilderButton title.translate="Crop image" action="'cropImage'" icon="'fa-crop'" id="'cropImage'" />
        <BuilderButton title.translate="Reset crop" action="'resetCrop'" t-if="this.isActiveItem('cropImage')">Reset</BuilderButton>
        <ImageTransformOption t-if="!state.isImageAnimated" />
    </BuilderRow>
    <ImageFilterOption />
    <BuilderRow label.translate="Size">
        <BuilderButtonGroup styleAction="'width'">
            <BuilderButton styleActionValue="''" title.translate="Resize Default">Default</BuilderButton>
            <BuilderButton styleActionValue="'25%'" title.translate="Resize Quarter">25%</BuilderButton>
            <BuilderButton styleActionValue="'50%'" title.translate="Resize Half">50%</BuilderButton>
            <BuilderButton styleActionValue="'100%'" title.translate="Resize Full">100%</BuilderButton>
        </BuilderButtonGroup>
    </BuilderRow>
    <ImageFormatOption />
</t>

<t t-name="html_builder.ImageAndFaOption">
    <BuilderRow label.translate="Alignment">
        <BuilderSelect>
            <BuilderSelectItem classAction="''" title.translate="Unalign">None</BuilderSelectItem>
            <BuilderSelectItem classAction="'me-auto float-start'" title.translate="Align Left">Left</BuilderSelectItem>
            <BuilderSelectItem classAction="'mx-auto d-block'" title.translate="Align Center">Center</BuilderSelectItem>
            <BuilderSelectItem classAction="'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>
