{% set inheritedFrom = seomatic.helper.findInheritableBundle(parentBundles, "seoImage") %}
{% set hasInheritableValues = inheritedFrom is not null %}

{% set additionalVars = {
    'isInherited': seomatic.helper.isInherited(metaGlobalVars, "seoImage"),
    'fieldLabel': "SEO Image Source"|t("seomatic"),
    'labelFor': 'metaBundleSettings-seoImageSource',
    'wrapperClass': 'seomatic-imageSourceInnerWrapper',
    'settingName': 'seoImage'
} %}

{% embed "seomatic/settings/_includes/fields/_inheritableField.twig" with additionalVars %}
    {% macro seoImageField(seoImageElements, elementType, imageOptions, assetFieldSources, seomaticConfig, metaBundleSettings, metaGlobalVars, suffix, pageContext) %}
        <div class="instructions">
            <p>{{ "This is the image that will be used for display as the global website brand, as well as on Twitter Cards and Facebook OpenGraph that link to the website, if they are not specified."|t("seomatic") }}</p>
        </div>

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

        {% namespace "metaBundleSettings" %}
            <div class="heading">
                {{ forms.select({
                    id: "seoImageSource" ~ suffix,
                    name: "seoImageSource",
                    options: imageOptions,
                    value: metaBundleSettings.seoImageSource,
                    class: "seomatic-imageSourceSelect",
                    errors: metaBundleSettings.getErrors("seoImageSource"),
                }) }}
            </div>
        {% endnamespace %}

        {% if assetFieldSources is defined and assetFieldSources |length %}
            {% namespace "metaBundleSettings" %}
                <div class="heading seomatic-imageSourceFromField">
                    <label
                        for="metaBundleSettings-seoImageField{{ suffix }}">{{ "Source Field: "|t("seomatic") }}</label>
                    {{ forms.select({
                        id: "seoImageField" ~ suffix,
                        name: "seoImageField",
                        options: assetFieldSources,
                        value: metaBundleSettings.seoImageField,
                        errors: metaBundleSettings.getErrors("seoImageField"),
                    }) }}
                </div>
            {% endnamespace %}
        {% endif %}

        {% namespace "metaBundleSettings" %}
            <div class="heading seomatic-imageSourceFromAsset">
                {{ forms.elementSelect({
                    id: "seoImageIds" ~ suffix,
                    name: "seoImageIds",
                    viewMode: "large",
                    elements: seoImageElements,
                    elementType: elementType,
                    criteria: {
                        kind: ["image"],
                    },
                    jsClass: 'Craft.AssetSelectInput',
                    selectionLabel: "Select SEO Image"|t("seomatic"),
                    sources: null,
                    limit: 1,
                    warning: false,
                    errors: metaBundleSettings.getErrors("seoImageIds"),
                }) }}
            </div>
        {% endnamespace %}

        {% namespace "metaGlobalVars" %}
            <div class="input ltr seomatic-imageSourceFromUrl">
                {% if pageContext != "field" %}
                    {{ twigfield.textField({
                        id: "seoImage" ~ suffix,
                        name: "seoImage",
                        value: metaGlobalVars.seoImage,
                        warning: false,
                        errors: metaGlobalVars.getErrors("seoImage"),
                    }, "SeomaticExpressionField", "monaco-editor-background-frame") }}
                {% else %}
                    {{ forms.text({
                        id: "seoImage" ~ suffix,
                        name: "seoImage",
                        value: metaGlobalVars.seoImage,
                        class: "nicetext",
                        warning: false,
                        errors: metaBundleSettings.getErrors("seoImage"),
                    }) }}
                {% endif %}
            </div>
        {% endnamespace %}
    {% endmacro %}

    {% set imageOptions = {
        fromAsset: "Custom Image"|t("seomatic"),
        fromUrl: "Custom URL"|t("seomatic"),
    } %}

    {% if assetFieldSources is defined and assetFieldSources |length %}
        {% set imageOptions = { fromField: "From Asset Field"|t("seomatic"), } | merge(imageOptions) %}
    {% endif %}

    {% block inheritedValues %}
        {{ _self.seoImageField(seoImageElements, elementType, imageOptions, assetFieldSources, seomatic.config, inheritedFrom.metaBundleSettings ?? metaBundleSettings, inheritedFrom.metaGlobalVars ?? metaGlobalVars, "-inherited", pageContext) }}
    {% endblock %}

    {% block field %}
        {{ _self.seoImageField(seoImageElements, elementType, imageOptions, assetFieldSources, seomatic.config, metaBundleSettings, metaGlobalVars, "", pageContext) }}
    {% endblock %}
{% endembed %}