{% 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 prevalidate = prevalidate ?? false %}
{% set fieldId = fieldId ?? null %}
{% set single = true %}
{% set limit = single ? 1 : (limit ?? null) %}
{% set showActionMenu = false %}
{% set sortable = false %}
{% set disabled = (disabled ?? false) ? true : false %}
{% set maintainHierarchy = false %}
{% set registerJs = registerJs ?? true %}

{% 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 %}
    {# Modify behaviour here to include site ID #}
    {% apply spaceless %}
      {% tag 'ul' with {
        class: [
          'elements',
          'chips',
          (inline ?? false) ? 'inline-chips' : null,
        ]|filter,
      } %}
        {% for element in elements %}
          <li>
            {% set elementHtml = elementChip(element, {
              context: 'field',
              size: size ?? (viewMode == 'large' ? 'large' : 'small'),
              inputName: inputName ?? ((name ?? false) ? "#{name}[id]" : null),
              showActionMenu: showActionMenu ?? false,
              checkbox: selectable ?? false,
            }) %}

            {% if disabled %}
              {% set elementHtml = elementHtml|removeClass('removable') %}
            {% endif %}

            {{ elementHtml|raw }}
            <input type="hidden" name="{{ name }}[siteId]" value="{{ element.siteId }}">
          </li>
        {% endfor %}
      {% endtag %}
    {% endapply %}

    <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 and registerJs %}
    {% 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,
        editable: false,
        selectable: false,
        showSiteMenu: showSiteMenu ?? false,
        modalStorageKey: storageKey,
        fieldId: fieldId,
        sortable: sortable,
        showActionMenu: showActionMenu,
        prevalidate: prevalidate,
        modalSettings: modalSettings ?? {},
    } %}

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