{% extends "sprout-base-seo/_layouts/general" %}
{% import "_includes/forms" as forms %}
{% import "sprout-base-fields/_includes/forms" as sproutFields %}
{% import "sprout-base-seo/_includes/sproutseo" as sprout %}

{% do view.registerAssetBundle("barrelstrength\\sproutbase\\app\\seo\\web\\assets\\globals\\GlobalsAsset") %}

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

{% block content %}

    <form method="post" accept-charset="UTF-8" data-saveshortcut>
        {{ csrfInput() }}
        <input type="hidden" name="action"
               value="sprout-seo/global-metadata/save-global-metadata">
        <input type="hidden" name="globalKeys" value="settings,meta">
        <input type="hidden" name="siteId" value="{{ globals.siteId }}">

        {% set dividerOptions = craft.sproutSeo.getSeoDividerOptions() %}

        {{ forms.field({
            label: 'Select the character that will be used between Title segments'|t ~ sprout.infoIcon({
                label: "Character"|t,
                search: true,
                priority: 'globals'
            }),
            instructions: "This character will be used in between your title segments, i.e. Blog Post Title – {sitename}"|t({ 'sitename': siteName }),
            first: true,
        }, sproutFields.selectOther({
            name: 'sproutseo[globals][settings][seoDivider]',
            options: dividerOptions ,
            value: settings.seoDivider is defined ? settings.seoDivider : null,
            otherPlaceholderText: 'Custom Divider'|t
        })) }}

        {% set titleOptions = craft.sproutSeo.getAppendMetaTitleOptions() %}

        {{ forms.field({
            label: 'Append value to all Meta Titles'|t ~ sprout.infoIcon({
                label: "Append value"|t,
                search: true,
                priority: 'globals'
            }),
            instructions: "Append your website name or a custom value at the end of all of your Meta Titles, i.e. Article Title - {sitename}"|t({ 'sitename': siteName }),
            first: true,
        }, sproutFields.selectOther({
            name: 'sproutseo[globals][settings][appendTitleValue]',
            options: titleOptions ,
            value: settings.appendTitleValue is defined ? settings.appendTitleValue : null,
            otherPlaceholderText: 'Custom Value'|t
        })) }}

        {{ forms.lightswitchField({
            label: "Display Append Meta Title Value on Homepage"|t,
            instructions: "Enable this setting to display the Append Meta Title value for your Homepage."|t,
            name: 'sproutseo[globals][settings][appendTitleValueOnHomepage]',
            on: settings.appendTitleValueOnHomepage is defined ? settings.appendTitleValueOnHomepage : null,
            onLabel: "Enable"|t
        }) }}

        <hr>

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

        {{ forms.selectField({
            label: 'Default Open Graph Type'|t ~ sprout.infoIcon({
                label: "Type"|t,
                openGraph: true,
                priority: 'globals'
            }),
            instructions: 'Select your default Open Graph Type for individual entries using the Sprout SEO Optimize field. Learn more about <a href="https://developers.facebook.com/docs/reference/opengraph#object-type"
    target="_blank">How Open Graph Stories work.</a>'|t,
            name: 'sproutseo[globals][settings][defaultOgType]',
            options: ogTypesOptions,
            value: settings.defaultOgType ?? 'article',
            errors: "",
            required: false
        }) }}

        {% set twitterCardOptions = {
            '' : 'Select Twitter Card Type...'|t,
            'summary' : 'Summary Card'|t,
            'summary_large_image' : 'Summary Card with Large Image'|t
        } %}

        {{ forms.selectField({
            label: 'Default Twitter Card Type'|t ~ sprout.infoIcon({
                label: "Type"|t,
                twitterCard: true,
                priority: 'globals'
            }),
            instructions: 'Select your default Twitter Card Type for individual entries using the Sprout SEO Optimize field.. Learn more about <a href="https://dev.twitter.com/docs/cards" target="_blank">How Twitter Cards work</a>.'|t,
            name: 'sproutseo[globals][settings][defaultTwitterCard]',
            options: twitterCardOptions,
            value: settings.defaultTwitterCard ?? 'summary',
            errors: "",
            required: false
        }) }}

        {{ forms.selectField({
            label: 'Default Open Graph Image Transform'|t ~ sprout.infoIcon({
                label: "Type"|t,
                openGraph: true,
                priority: 'globals'
            }),
            instructions: 'Select Image Transforms for the facebook image. Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. Images larger than 600px by 315px will display as large images. The minimum image size is 200px by 200px pixels. Images can be up to 8MB in size.'|t,
            name: 'sproutseo[globals][settings][ogTransform]',
            options: transformOptions,
            value: settings.ogTransform ?? '',
            errors: "",
            required: false
        }) }}

        {{ forms.selectField({
            label: 'Default Twitter Card Image Transform'|t ~ sprout.infoIcon({
                label: "Type"|t,
                twitterCard: true,
                priority: 'globals'
            }),
            instructions: 'Select Image Transforms for the Twitter Card image. Summary Card image is square and must be a minimum of 120px by 120px. Summary Card with Large Image should be at least 280px in width, and at least 150px in height. Images must be less than 1MB in size.'|t,
            name: 'sproutseo[globals][settings][twitterTransform]',
            options: transformOptions,
            value: settings.twitterTransform ?? '',
            errors: "",
            required: false
        }) }}

        <hr>

        <div class="buttons">
            <input type="submit" class="btn submit" value="Save"/>
        </div>

    </form>

    {% js %}
        $(document).ready(function() {
        Craft.SproutFields.initFields($("#content"));
        });
    {% endjs %}

{% endblock %}