{% if name is defined and name %}
    {{ hiddenInput(name, '') }}
{% endif -%}

{% set elements = (elements is defined ? elements : []) -%}
{% set jsClass = (jsClass is defined and jsClass ? jsClass : 'Craft.BaseElementSelectInput') -%}
{% set sources = (sources is defined and sources ? sources : null) -%}
{% set criteria = (criteria is defined and criteria ? criteria : null) -%}
{% set storageKey = (storageKey is defined and storageKey ? storageKey : null) -%}

<div id="{{ id }}" class="elementselect">
    <div class="elements">
        {% for element in elements %}
            {% include "_elements/element" with {
                context: 'field',
                size: (viewMode == 'large' ? 'large' : 'small')
            } %}
        {% endfor %}
    </div>

    {% if sources %}
        <div class="flex{% if limit and elements|length >= limit %} hidden{% endif %}">
            {{ tag('button', {
                type: 'button',
                text: selectionLabel,
                class: ['btn', 'add', 'icon', 'dashed'],
                aria: {
                    label: selectionLabel,
                    describedby: describedBy ?? false,
                },
            }) }}
        </div>
    {% endif %}
</div>

{% do view.registerAssetBundle("craft\\web\\assets\\prismjs\\PrismJsAsset") %}

{% set jsSettings = {
    id: id|namespaceInputId,
    name: name|namespaceInputName,
    elementType: elementType,
    sources: sources,
    criteria: criteria,
    sourceElementId: sourceElementId,
    viewMode: viewMode,
    limit: limit,
    modalStorageKey: storageKey,
    fieldId: fieldId,
    prevalidate: prevalidate ?? false,
    canUpload: canUpload,
    defaultFieldLayoutId: defaultFieldLayoutId,
    modalSettings: {
        hideSidebar: hideSidebar,
        defaultSource: defaultUploadLocation
    },
    describedBy: (describedBy ?? false) ? describedBy|split(' ')|map(id => id|namespaceInputId)|join(' ') : null,
} %}

{% js %}
    new {{ jsClass }}({{ jsSettings|json_encode|raw }});
{% endjs %}
