<div class="form-group {{#error}}has-danger{{/error}} fitem {{#advanced}}advanced{{/advanced}} {{{element.extraclasses}}}">
    {{#text}}
        <div class="col-md-3 col-form-label pb-0 pt-0 text-right">
            <label class="d-inline word-break">
                {{{label}}}
            </label>
        </div>
    {{/text}}
    <div class="checkbox px-0">
        <div class="form-check d-flex">
            {{^element.hardfrozen}}
            {{#element.frozen}}
                <input type="hidden" name="{{element.name}}" value="{{element.frozenvalue}}">
            {{/element.frozen}}
            {{/element.hardfrozen}}
            
            <div class="custom-control custom-switch mx-0">
                <input type="checkbox"
                    name="{{element.name}}"
                    class="custom-control-input {{element.extraclasses}}"
                    {{#element.value}}
                        value="{{element.value}}"
                    {{/element.value}}
                    {{^element.value}}
                        value="1"
                    {{/element.value}}
                    id="{{element.id}}" {{#element.checked}}checked{{/element.checked}}
                    {{#error}}
                        autofocus aria-describedby="{{#text}}{{element.id}}_description {{/text}}{{element.iderror}}"
                    {{/error}}
                    {{^error}}
                        {{#text}}
                            aria-describedby="{{element.id}}_description"
                        {{/text}}
                    {{/error}}
                    {{#element.frozen}}
                        disabled
                    {{/element.frozen}}
                    {{{element.attributes}}} >

                    <label class="custom-control-label" for="{{element.id}}"></label>
                    {{#text}}
                    <span id="{{element.id}}_description">
                        {{{.}}}
                    </span>
                    {{/text}}
                    {{^text}}
                        <label>
                            {{{label}}}
        
                            <div class="ml-1 d-inline-flex align-items-center align-self-start">
                                {{#required}}
                                    <div class="text-danger" title="{{#str}}required{{/str}}">
                                    {{#pix}}req, core, {{#str}}required{{/str}}{{/pix}}
                                    </div>
                                {{/required}}
                                {{{helpbutton}}}
                            </div>
                        </label>
                    {{/text}}
            </div>
        </div>
        <div class="form-control-feedback invalid-feedback" id="{{element.iderror}}" {{#error}} style="display: block;"{{/error}}>
            {{{error}}}
        </div>
    </div>
</div>
{{^element.frozen}}

{{#js}}
require(['theme_universe/form-display-errors'], function(module) {
    module.enhance({{#quote}}{{element.id}}{{/quote}});
});
{{/js}}
{{/element.frozen}}
