<div class="form-group {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}" {{#element.groupname}}data-groupname="{{.}}"{{/element.groupname}}>
    {{#label}}
        <label class="col-form-label {{#element.hiddenlabel}}sr-only{{/element.hiddenlabel}}" for="{{element.id}}">
            {{{label}}}
        </label>
    {{/label}}
    <span data-fieldtype="{{element.type}}">
        {{$ element }}
            <!-- Element goes here -->
        {{/ element }}
    </span>
    <div class="form-control-feedback invalid-feedback badge-sq badge-danger w-auto my-0 mx-2 {{^error}}d-none{{/error}}" id="{{element.iderror}}" {{#error}} style="display: inline-flex;"{{/error}}>
        <svg class="mr-2" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.9522 16.3536L10.2152 5.85658C10.9531 4.38481 13.0539 4.3852 13.7913 5.85723L19.0495 16.3543C19.7156 17.6841 18.7487 19.25 17.2613 19.25H6.74007C5.25234 19.25 4.2854 17.6835 4.9522 16.3536Z"></path>
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10V12"></path>
            <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
        </svg>
        {{{error}}}
    </div>
</div>
{{#js}}
require(['theme_universe/form-display-errors'], function(module) {
    module.enhance({{#quote}}{{element.id}}{{/quote}});
});
{{/js}}
