{% import "_includes/forms" as forms %}

{% set sourceOptions = field.getSourceOptions() %}

{% block fieldSettings %}
    {% block sourcesField %}
        {% if sourceOptions %}
            {% if field.allowMultipleSources %}
                {{ forms.checkboxSelectField({
                    label: "Sources"|t('app'),
                    instructions: "Which sources do you want to select {type} from?"|t('app', { type: field.displayName()|lower }),
                    id: 'sources',
                    name: 'sources',
                    options: sourceOptions,
                    values: field.sources,
                    showAllOption: true,
                }) }}
            {% else %}
                {{ forms.selectField({
                    label: "Source"|t('app'),
                    instructions: "Which source do you want to select {type} from?"|t('app', { type: field.displayName()|lower }),
                    id: 'source',
                    name: 'source',
                    options: sourceOptions,
                    value: field.source
                }) }}
            {% endif %}
        {% else %}
            {{ forms.field({
                label: (field.allowMultipleSources ? "Sources"|t('app') : "Source"|t('app'))
            }, '<p class="error">' ~ "No sources exist yet."|t('app') ~ '</p>') }}
        {% endif %}
    {% endblock %}

    {% block limitField %}
        {% if field.allowLimit %}
            {{ forms.textField({
                label: "Limit"|t('app'),
                instructions: "Limit the number of selectable {type}."|t('app', { type: field.displayName()|lower }),
                id: 'limit',
                name: 'limit',
                value: field.limit,
                size: 2,
                errors: field.getErrors('limit')
            }) }}
        {% endif %}
    {% endblock %}

    {% block viewModeField %}
        {{ field.getViewModeFieldHtml()|raw }}
    {% endblock %}

    {% block selectionLabelField %}
        {{ forms.textField({
            label: "Selection Label"|t('app'),
            instructions: "Enter the text you want to appear on the {type} selection input."|t('app', { type: field.displayName()|lower }),
            id: 'selectionLabel',
            name: 'selectionLabel',
            value: field.selectionLabel,
            placeholder: field.defaultSelectionLabel(),
            errors: field.getErrors('selectionLabel')
        }) }}
    {% endblock %}

    {% block advancedSettings %}
        {% if craft.app.getIsMultiSite() %}
            <hr>
            <a class="fieldtoggle" data-target="advanced">{{ "Advanced"|t('app') }}</a>
            <div id="advanced" class="hidden">
                {% block targetSiteField %}
                    {{ field.getTargetSiteFieldHtml()|raw }}
                {% endblock %}

                {% block localizeRelationsField %}
                    {{ forms.checkboxField({
                        label: "Manage relations on a per-site basis"|t('app'),
                        id: 'localize-relations',
                        name: 'localizeRelations',
                        checked: field.localizeRelations
                    }) }}
                {% endblock %}
            </div>
        {% endif %}
    {% endblock %}
{% endblock %}
