{% import "_includes/forms" as forms %}
{% import "sprout-base-fields/_includes/forms" as sproutFields %}

{% set pluginSettings = craft.sproutSeo.getSettings() %}
{% set optimizedTitleOptions = craft.sproutSeo.getOptimizedTitleOptions(settings) %}
{% set mainEntityValues = {'schemaTypeId': settings.schemaTypeId, 'schemaOverrideTypeId': settings.schemaOverrideTypeId} %}

<div class="field">
    <div class="heading">
        <label for="siteOwnerType">{{ "Meta Title"|t }}</label>
        <p class="instructions">
            {{ "Select the field to use for your basic, Open Graph, and Twitter Card meta tag titles. Select
'   Manually' if you want the Optimize field to display a custom Title Field for your content editors to manage."|t }}
        </p>
    </div>
    <div class="input">
        <div class="field sprout-selectother">
            {{ sproutFields.selectOther({
                name: 'optimizedTitleField',
                id: 'optimizedTitleField',
                options: optimizedTitleOptions ,
                value: settings.optimizedTitleField is defined ? settings.optimizedTitleField : null,
                otherPlaceholderText: 'Custom title pattern. Twig code allowed, i.e. {title} - {customField}'|t
            }) }}
        </div>
    </div>
</div>

{% set optimizedDescriptionOptions = craft.sproutSeo.getOptimizedDescriptionOptions(settings) %}

<div class="field">
    <div class="heading">
        <label for="siteOwnerType">{{ "Meta Description"|t }}</label>
        <p class="instructions">
            {{ "Select the field to use for your basic, Open Graph, and Twitter Card meta tag descriptions. Select 'Manually' if you want the Optimize field to display a custom Description Field for your content editors to manage."|t }}
        </p>
    </div>
    <div class="input">
        <div class="field sprout-selectother">
            {{ sproutFields.selectOther({
                name: 'optimizedDescriptionField',
                id: 'optimizedDescriptionField',
                options: optimizedDescriptionOptions,
                value: settings.optimizedDescriptionField is defined ? settings.optimizedDescriptionField : 'manually',
                otherPlaceholderText: 'Custom title pattern. Twig code allowed, i.e. {title} - {customField}'|t
            }) }}
        </div>
    </div>
</div>


{% set optimizedKeywordOptions = craft.sproutSeo.getKeywordsOptions() %}

{{ forms.selectField({
    label: "Meta Keywords"|t,
    instructions: "Generate keywords and key phrases dynamically based on an algorithm or add them manually."|t,
    id: 'optimizedKeywordsField',
    name: 'optimizedKeywordsField',
    options: optimizedKeywordOptions,
    value: settings.optimizedKeywordsField is defined ? settings.optimizedKeywordsField : 'manually',
}) }}

{% set optimizedImageOptions = craft.sproutSeo.getOptimizedAssetsOptions(settings) %}

<div class="field">
    <div class="heading">
        <label for="siteOwnerType">{{ "Meta Image"|t }}</label>
        <p class="instructions">
            {{ "Select the Assets field to use for your basic, Open Graph, and Twitter Card meta tag feature image. Select 'Manually' if you want the Optimize field to display a custom Feature Image Field for your content editors to manage."|t }}
        </p>
    </div>
    <div class="input">
        <div class="field sprout-selectother">
            {{ sproutFields.selectOther({
                id: 'optimizedImageField',
                name: 'optimizedImageField',
                options: optimizedImageOptions,
                value: settings.optimizedImageField is defined ? settings.optimizedImageField : 'manually',
                otherPlaceholderText: 'Custom title pattern. Twig code allowed, i.e. {title} - {customField}'|t
            }) }}
        </div>
    </div>
</div>

<div id="organization" class="organization-info">
    <div class="identitytype-dropdown organizationinfo-dropdown">
        {{ forms.selectField({
            label: 'Main Entity',
            instructions: 'Select the Structured Data schema type that best represents your content. Test your metadata using the <a href="https://search.google.com/structured-data/testing-tool" target="_blank">Structured Data Testing Tool</a>. Advanced integrations may be necessary for more specialized data types.'|t,
            class: 'mainentity-firstdropdown',
            name: 'schemaTypeId',
            options: schemas,
            value: '',
            required: false
        }) }}
    </div>
    <div class="identitytype-dropdown organizationinfo-dropdown hidden">
        {{ forms.selectField({
            class: 'mainentity-seconddropdown',
            role: 'listbox',
            name: 'schemaOverrideTypeId',
            options: {'':''},
            value: '',
            required: false,
        }) }}
    </div>
</div>

<hr>

{{ forms.lightswitchField({
    label: "Enable Meta Details fields"|t,
    instructions: "Meta Details fields add one more level of fine-tuning over your metadata. With Meta Details fields enabled, content editors will have additional control to customize Search, Open Graph, Twitter Card, Geo, and Robots metadata. Note: enabling Meta Details fields may require additional time for content planning and monitoring in your SEO strategy."|t,
    name: 'enableMetaDetailsFields',
    toggle: 'settings-enablemetadadetails',
    on: settings.enableMetaDetailsFields,
    onLabel: "Enable"|t
}) }}

<div id="settings-enablemetadadetails"
     class="{% if not settings.enableMetaDetailsFields %} hidden {% endif %}">

    {% set advancedInput %}
        <table class="data" style="width: auto;">
            <thead>
            <tr>
                <th scope="col">{{ "Meta Tag Type"|t }}</th>
                <th scope="col">{{ "Editable?"|t }}</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <label for="showSearchMeta">{{ "Allow Search Meta fields to be edited?"|t }}</label>
                </td>
                <td class="centeralign">
                    <div>
                        {{ forms.lightswitch({
                            name: 'showSearchMeta',
                            on:   settings.showSearchMeta
                        }) }}
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="showOpenGraph">{{ "Allow Open Graph fields to be edited?"|t }}</label>
                </td>
                <td class="centeralign">
                    <div>
                        {{ forms.lightswitch({
                            name: 'showOpenGraph',
                            on:   settings.showOpenGraph
                        }) }}
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="showTwitter">{{ "Allow Twitter fields to be edited?"|t }}</label>
                </td>
                <td class="centeralign">
                    <div>
                        {{ forms.lightswitch({
                            name: 'showTwitter',
                            on:   settings.showTwitter
                        }) }}
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="showGeo">{{ "Allow Geo fields to be edited?"|t }}</label>
                </td>
                <td class="centeralign">
                    <div>
                        {{ forms.lightswitch({
                            name: 'showGeo',
                            on:   settings.showGeo
                        }) }}
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="showRobots">{{ "Allow Robots fields to be edited?"|t }}</label>
                </td>
                <td class="centeralign">
                    <div>
                        {{ forms.lightswitch({
                            name: 'showRobots',
                            on:   settings.showRobots
                        }) }}
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

    {% endset %}

    {{ forms.field({
        errors: ''
    }, advancedInput) }}

</div> {# End meta details div #}

<hr>

{{ forms.lightswitchField({
    label: "Enable Canonical URL field"|t,
    instructions: "Allow users to override the Canonical URL at Element Metadata field level"|t,
    id: 'editCanonical',
    name: 'editCanonical',
    on: settings.editCanonical,
}) }}

{% js %}
    var items = {{ schemaSubtypes|json_encode|raw }};
    var entryValues = {{ mainEntityValues|json_encode|raw }};

    $(document).ready(function() {
    Craft.SproutFields.initFields($("#content"));

    //Main entity dropdowns
    $('.mainentity-firstdropdown select').change(function() {
        if(this.value === 'barrelstrength-sproutseo-schema-personschema'){
            $('.mainentity-seconddropdown select').addClass('hidden');
        }else{
            $('.mainentity-seconddropdown select').removeClass('hidden');
        }
    });

    // check if we need load depending dropdowns
    if (entryValues){
        if (entryValues.hasOwnProperty('schemaTypeId') && entryValues.schemaTypeId){
            $('.mainentity-firstdropdown select').val(entryValues.schemaTypeId).change();
        }
        if (entryValues.hasOwnProperty('schemaOverrideTypeId') && entryValues.schemaOverrideTypeId){
            $('.mainentity-seconddropdown select').val(entryValues.schemaOverrideTypeId).change();
        }
    }

    });

{% endjs %}

{% css %}
    .sprout-selectotherdropdown    select {
    max-width: 300px;
    }
{% endcss %}