
<div class="elementFormFeatureInfo extraWideLabelForm">
    <div class="mb-3">
        {{ form_widget(form.configuration.autoActivate, {'label_attr': {'class': 'checkbox-inline'}}) }}
        {{ form_widget(form.configuration.deactivateOnClose, {'label_attr': {'class': 'checkbox-inline'}}) }}
        {{ form_widget(form.configuration.printResult, {'label_attr': {'class': 'checkbox-inline'}}) }}
        {{ form_widget(form.configuration.onlyValid, {'label_attr': {'class': 'checkbox-inline'}}) }}
    </div>
    {{ form_row(form.title) }}
    {{ form_row(form.configuration.displayType) }}
    {{ form_row(form.configuration.maxCount) }}
    {{ form_row(form.configuration.width) }}
    {{ form_row(form.configuration.height) }}
    <h3 class="mt-4">
        {{ 'mb.core.admin.featureinfo.label.highlighting_group' | trans }}
    </h3>
    {{ form_row(form.configuration.highlighting) }}
    <div class="row">
        <fieldset class="col-12 col-xs-12 col-md-6">
            <legend>{{- form.configuration.defaultStyle.vars.label | trans -}}</legend>
            {{- form_widget(form.configuration.defaultStyle) -}}
        </fieldset>
        <fieldset class="col-12 col-xs-12 col-md-6">
            <legend>{{- form.configuration.hoverStyle.vars.label | trans -}}</legend>
            {{- form_widget(form.configuration.hoverStyle) -}}
        </fieldset>
        {{- form_rest(form.configuration) -}}
    </div>
</div>
<script type="text/javascript">
    !(function($) {
        $('#{{ form.vars.attr.id }} .-js-init-colorpicker').colorpicker({format: 'rgba'});
    }(jQuery));
</script>
