{% if name ?? false %}
    {{ hiddenInput(name, '') }}
{% endif -%}

{% set id = id ?? "elementselect#{random()}" -%}
{% set elements = elements ?? [] -%}
{% set jsClass = jsClass ?? 'Craft.BaseElementSelectInput' -%}
{% set sources = sources ?? null -%}
{% set condition = condition ?? null -%}
{% set criteria = criteria ?? null -%}
{% set sourceElementId = sourceElementId ?? null -%}
{% set storageKey = storageKey ?? null -%}
{% set viewMode = viewMode ?? 'list' %}
{% set sortable = sortable ?? true %}
{% set prevalidate = prevalidate ?? false %}
{% set fieldId = fieldId ?? null %}
{% set single = single ?? false %}
{% set limit = single ? 1 : (limit ?? null) %}
{% set disabled = (disabled ?? false) ? true : false %}
{% set maintainHierarchy = maintainHierarchy ?? false %}

{% set containerAttributes = {
    id: id,
    class: ['elementselect']|merge((class ?? [])|explodeClass),
}|merge(containerAttributes ?? [], recursive=true) %}

{% set modalSettings = {
    modalTitle: selectionLabel ?? 'Choose'|t('app'),
}|merge(modalSettings ?? [], recursive=true) %}

{%- if block('attr') is defined %}
    {%- set containerAttributes = containerAttributes|merge(('<div ' ~ block('attr') ~ '>')|parseAttr, recursive=true) %}
{% endif %}

{% tag 'div' with containerAttributes %}
    {% if maintainHierarchy %}
        {{ include('_elements/structurelist.twig', { elements, id })}}
    {% else %}
        {{ include('_elements/list.twig', { elements, viewMode, disabled }) }}
    {% endif %}

    <div class="flex flex-nowrap">
        {{ tag('button', {
            type: 'button',
            class: [
                'btn',
                'add',
                'icon',
                'dashed',
                disabled ? 'disabled',
                limit and elements|length >= limit ? 'hidden',
            ]|filter,
            text: selectionLabel ?? 'Choose'|t('app'),
            disabled: disabled,
            aria: {
                label: selectionLabel ?? 'Choose'|t('app'),
                describedby: describedBy ?? false,
            }
        }) }}
        <div class="spinner hidden"></div>
    </div>
{% endtag %}

{% if not disabled %}
    {% set jsSettings = {
        id: id|namespaceInputId,
        name: name|namespaceInputName,
        elementType: elementType,
        sources: sources,
        condition: condition ? condition.getConfig() : null,
        referenceElementId: referenceElement.id ?? null,
        referenceElementSiteId: referenceElement.siteId ?? null,
        criteria: criteria,
        allowSelfRelations: allowSelfRelations ?? false,
        maintainHierarchy: maintainHierarchy,
        branchLimit: branchLimit ?? null,
        sourceElementId: sourceElementId,
        disabledElementIds: disabledElementIds ?? null,
        viewMode: viewMode,
        single: single,
        limit: limit,
        showSiteMenu: showSiteMenu ?? false,
        modalStorageKey: storageKey,
        fieldId: fieldId,
        sortable: sortable,
        prevalidate: prevalidate,
        modalSettings: modalSettings ?? {},
    } %}

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