{% macro expandedAndSelection_fieldComponent(field, key) %}
    {% set __c = 'col-12' %}
    {% if field.uiSettings %}
        {% if field.uiSettings.expandedEditorClasses %}
            {% set __c = field.uiSettings.expandedEditorClasses %}
        {% elif field.uiSettings.editorClasses %}
            {% set __c = field.uiSettings.editorClasses %}
        {% endif %}
    {% endif %}
    <div id="field-{{req.params.entityName}}-{{originalKey}}-{{key}}" class="{{ __c }} ">
        {% include resolvePath(configuration[field.type]) %}
    </div>
{% endmacro %}

{% if field.optionalParameters and field.optionalParameters.fieldset %}
    <fieldset class="border p-2">
        <legend  class="w-auto">
        {% else %}
            <label>
            {% endif %}
            {{ field.name | tr }}
            {% if field.uiSettings.descriptionText %}
                <small id="{{key}}-help" class="{{ field.uiSettings.descriptionTextClasses if field.uiSettings.descriptionTextClasses }} description-label">{{ field.uiSettings.descriptionText | tr }}</small>
            {% endif %}
            {% if field.optionalParameters and field.optionalParameters.fieldset %}
            </legend>
        {% else %}
        </label>
    {% endif %}

    <div class="form-group">
        <select id="select2-{{key}}" class="form-control" name={{key}} {{ "disabled" if field.readOnly }} {{ "required" if field.required }}>
            <option disabled selected>Select...</option>
            {% if data[key] %}
                <option disabled>Select...</option>
            {% else %}
                <option disabled selected>Select...</option>
            {% endif %}
        </select>
        {% if field.readOnly %}
            <input type="hidden" name="{{key}}" value="{{currentSelectionValue}}"/>
        {% endif %}
    </div>

    <script>
        if (!window.expandedAndSelect) {
            window.expandedAndSelect = [];
        }
        window
            .expandedAndSelect
            .push(function () {

                function loadData(id) {
                    var url = '{{route("adminUI.ajax-details", { entityName: req.params.entityName, id: req.params.id, field: key, selection: ":selection" })}}';
                    url = url.replace(':selection', id);
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                            let data = JSON
                                .parse(this.response)
                                .data;
                            setupData(data);
                        } else if (this.readyState == 4 && this.status != 200) {}
                    };
                    xhttp.open("GET", url, true);
                    xhttp.send();
                }

                function setupData(data) {
                    {% set originalKey = key %}
                    {% set originalField = field %}

                    {% for key, field in originalField.metadata.fields %}
                        $("input[name={{key}}]").val(data['{{key}}'.replace('{{originalKey}}-', '')]);
                    {% endfor %}

            }

            var url = '{{route("adminUI.ajax-selection", { entityName: req.params.entityName, id: req.params.id, field: key, dummy: 'p' })}}';
            {% if data[key] %}
            url += '&defaultId={{data[key]}}';
            {% endif %}
            $('#select2-{{key}}').select2({
                width: '100%',
                ajax: {
                    transport: function (params, success, failure) {
                        var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function () {
                            if (this.readyState == 4 && this.status == 200) {
                                success(JSON.parse(this.response));
                            } else if (this.readyState == 4 && this.status != 200) {
                                failure();
                            }
                        };
                        xhttp.open("GET", params.url + '&term=' + (
                        params.data.term || '') + '&page=' + (
                        params.data.page || 1), true);
                        xhttp.send();
                    },
                    url: url,
                    dataType: 'json',
                    processResults: function (data) {
                        let out = {
                            results: data.data.data,
                            pagination: {
                                more: data.data.pagination
                            }
                        };
                        return out;
                    }
                }
            });
            $('#select2-{{key}}').on("select2:select", function (e) {
                loadData(e.params.data.id);
            });
            {% if data[key] %}
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        let obj = JSON.parse(this.response);
                        let selection = obj
                            .data
                            .data[0];
                        var option = new Option(selection.text, selection.id, true, true);
                        $('#select2-{{key}}')
                            .append(option)
                            .trigger('change');
                    }
                };
                xhttp.open("GET", url + '&selection=true', true);
                xhttp.send();
            {% endif %}

            {% if field.optionalParameters and field.optionalParameters.readOnlyExpanded %}
                {% for key, f in field.metadata.fields %}
                    $("input[name={{key}}]").attr("disabled", true);
                    $("input[name={{key}}]").attr("readonly", true);
                {% endfor %}
            {% endif %}

        });
    </script>

    {% set originalKey = key %}
    {% set originalField = field %}

    <div class="row p-2">
        {% if originalField.metadata.classParameters.uiSettings and originalField.metadata.classParameters.uiSettings.tabs and not originalField.metadata.classParameters.uiSettings.hideTabsInExpanded %}
            <div class="col-12">
                {% if not originalField.metadata.classParameters.uiSettings.tabsAsSections %}
                    {% set tabsId = AUIgenerateId() %}
                    <ul class="nav nav-tabs">
                        {% for tab in originalField.metadata.classParameters.uiSettings.tabs %}
                            <li class="nav-item">
                                <a class="nav-link {{ 'active' if originalField.metadata.classParameters.uiSettings.defaultTab == tab.key else '' }}" data-toggle="tab" href="#tab_{{tabsId}}_{{loop.index}}">{{ tab.label | tr }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
                {% if originalField.metadata.classParameters.uiSettings.tabsAsSections %}
                     {% for tab in originalField.metadata.classParameters.uiSettings.tabs %}
                        {% set counter = 0 %}
                        {% for key, field in originalField.metadata.fields %}
                            {% if field.uiSettings and field.uiSettings.tab == tab.key and not field.hide %}
                                {% set counter = counter + 1 %}
                            {% endif %}
                        {% endfor %}
                        {% if counter > 0 %}
                            <div class="section">
                                <div class="section-title">
                                    {{ tab.label | tr }}
                                </div>
                                <div class="row  section-body">
                                    {% for key, field in originalField.metadata.fields %}
                                        {% if field.uiSettings and field.uiSettings.tab == tab.key and not field.hide %}
                                            {{ expandedAndSelection_fieldComponent(field, key) }}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <div class="tab-content">
                        {% for tab in originalField.metadata.classParameters.uiSettings.tabs %}
                            <div id="tab_{{tabsId}}_{{loop.index}}" class="tab-pane fade my-5 {{ 'show active' if originalField.metadata.classParameters.uiSettings.defaultTab == tab.key else '' }}">
                                <div class="row">
                                    {% for key, field in originalField.metadata.fields %}
                                        {% if field.uiSettings and field.uiSettings.tab == tab.key and not field.hide %}
                                            {{ expandedAndSelection_fieldComponent(field, key) }}
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        {% else %}
            {% for key, field in originalField.metadata.fields %}
                {{ expandedAndSelection_fieldComponent(field, key) }}
            {% endfor %}
        {% endif %}
    </div>

    {% if field.optionalParameters and field.optionalParameters.fieldset %}
    </fieldset>
{% endif %}