<div class="ticker-tag-style pt-2 my-3"
    data-component-id="{{id}}"
>
    <div class="ticker-tag-style-title">{{lookup trans id}}</div>
    <div class="ticker-tag-style-properties" id="{{concat "ticker-tag-style-properties-" id}}" data-type="{{id}}">
        {{#eq type "image"}}
            {{> number value=value.opacity name=(concat 'style_' id '_opacity') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='opacity')) title=trans.form.opacity}}
            {{> number value=value.width name=(concat 'style_' id '_width') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='width')) title=trans.form.width}}
            {{> number value=value.height name=(concat 'style_' id '_height') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='height')) title=trans.form.height}}
        {{else}}
            {{> number value=value.fontSize name=(concat 'style_' id '_fontSize') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='fontSize')) title=trans.form.fontSize}}
            {{> color value=value.fontColor name=(concat 'style_' id '_fontColor') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='fontColor')) title=trans.form.fontColor}}
            {{> dropdown value=value.fontFamily name=(concat 'style_' id '_fontFamily') title=trans.form.fontFamily customClass="font-selector ticker-tag-style-property"
                options=(arr (obj name='' title='')) optionsTitle="title" optionsValue="name"
                customData=(arr
                    (obj name='search-url' value=fontsSearchUrl)
                    (obj name='value' value=value.fontFamily)
                    (obj name='tag-style-input' value='fontFamily')
                )
            }}
            {{> checkbox value=value.bold name=(concat 'style_' id '_bold') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='bold')) title=trans.form.bold}}
            {{> checkbox value=value.italics name=(concat 'style_' id '_italics') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='italics')) title=trans.form.italics}}
            {{> checkbox value=value.underline name=(concat 'style_' id '_underline') customClass="ticker-tag-style-property" customData=(arr (obj name='tag-style-input' value='underline')) title=trans.form.underline}}
        {{/eq}}
    </div>
</div>