{% import "_includes/forms" as forms %}
{% import "sprout-base-seo/_includes/sproutseo" as sprout %}

{% set transformOptions = craft.sproutSeo.getTransforms() %}

<div class="sproutseo-box-opengraph">

    <div class="sproutseo-fields" id="open-graph">

        {% set ogTypesOptions = {
            '' : 'Select Open Graph Type...'|t,
            'article' : 'Article'|t,
            'website' : 'Website'|t,
        } %}

        {{ forms.selectField({
            label: 'Open Graph Type'|t,
            instructions: 'First, select your Open Graph Type. Learn more about <a href="https://developers.facebook.com/docs/reference/opengraph#object-type" target="_blank">How Open Graph Stories work.</a>'|t,
            name: field.handle~'[metadata][ogType]',
            options: ogTypesOptions,
            value: values.ogType,
            errors: "",
            required: false
        }) }}

        {{ forms.textField({
            label: "Title"|t,
            name: field.handle~"[metadata][ogTitle]",
            instructions: 'The Title of your content which will appear in Open Graph metadata.'|t,
            value: values.ogTitle
        }) }}

        {{ forms.textareaField({
            label: "Description"|t,
            name: field.handle~"[metadata][ogDescription]",
            instructions: 'A description of your content which will appear in Open Graph metadata.'|t,
            value: values.ogDescription
        }) }}

        {{ forms.field({
            label: 'Image'|t,
            instructions: 'An image that represents your content that will display in Open Graph metadata.'|t,
        }, forms.elementSelect({
            elements: ogImageElements,
            sourceElementId: [values.ogImage],
            elementType: assetElementClassName,
            sources: '*',
            id: 'metaDetailsOgImage',
            name: field.handle~'[metadata][ogImage]',
            jsClass: 'Craft.AssetSelectInput',
            addButtonLabel: 'Select Image'|t,
            limit: 1,
            criteria: {kind: ['image'], siteId : null}
        })) }}

        {{ forms.selectField({
            label: 'Image Transform'|t,
            instructions: 'Select the Open Graph Image Transform'|t,
            name: field.handle~'[metadata][ogTransform]',
            options: transformOptions,
            value: values.ogTransform,
            errors: "",
            required: false
        }) }}

    </div>

</div>

{% set js %}
    new Craft.SproutSeoOpenGraph();
{% endset %}
{% includeJs js %}