{% requirePermission "seomatic:tracking-scripts" %}

{% extends "seomatic/_layouts/trackingSettings.twig" %}

{% from "seomatic/settings/_includes/macros.twig" import configWarning %}
{% import "_includes/forms" as forms %}
{% import 'codeeditor/codeEditor' as codeEditor %}

{% block header %}
    {{ block('pageTitle') }}

    <div class="flex-grow"></div>
    <div class="flex-grow"></div>
    {{ block('copyFromMenu') }}
    {{ block('actionButton') }}
{% endblock %}

{% block copyFromMenu %}
    {% include "seomatic/settings/_includes/copy-settings-menu.twig" %}
{% endblock %}

{% block content %}

    {% include "seomatic/settings/_includes/environment-warning.twig" %}

    <input type="hidden" name="action" value="seomatic/settings/save-tracking">
    <input type="hidden" name="siteId" value="{{ currentSiteId }}">
    {{ redirectInput("seomatic/tracking/#{currentSubSection}/#{currentSiteHandle}") }}

    {% for scriptHandle,scriptData in scripts %}
        {% set permission = "seomatic:tracking-scripts:#{scriptHandle}" %}
        {% if not scriptData.discontinued and currentUser.can(permission) and currentSubSection == scriptHandle %}
            <div id='{{ "tab-tracking-#{scriptHandle}" }}' class="seomatic-script-wrapper">
                <h2>{{ subSectionTitle ~ " Settings"|t("seomatic") }}</h2>
                {% if scriptData.deprecated %}
                    <div class="field">
                        <p class="warning">
                            {{ scriptData.deprecationNotice | md | striptags('<code><br><a>') | raw }}
                        </p>
                    </div>
                {% endif %}
                {% namespace "scripts[#{scriptHandle}]" %}
                    <div class="field seomatic-script-lightswitch">
                        {{ forms.lightswitchField({
                            label: "#{scriptData.name} Enabled"|t("seomatic"),
                            instructions: "#{scriptData.description}"|t("seomatic"),
                            id: "include",
                            name: "include",
                            on: scriptData.include,
                            warning: false,
                            errors: scriptData.getErrors("include"),
                        }) }}
                    </div>
                    <div class="seomatic-script-container"
                         {% if not scriptData.include %}style="display: none;"{% endif %}>
                        {% for varHandle,varData in scriptData.vars %}
                            {% switch varData.type %}
                            {% case "bool" %}
                                {{ forms.lightswitchField({
                                    label: "#{varData.title}"|t("seomatic"),
                                    instructions: "#{varData.instructions}"|t("seomatic"),
                                    id: "vars-#{varHandle}",
                                    name: "vars[#{varHandle}]",
                                    on: varData.value,
                                    warning: false,
                                }) }}

                            {% case "string" %}
                                {{ forms.autosuggestField({
                                    label: "#{varData.title}"|t("seomatic"),
                                    instructions: "#{varData.instructions}"|t("seomatic"),
                                    suggestEnvVars: true,
                                    id: "vars-#{varHandle}",
                                    name: "vars[#{varHandle}]",
                                    value: varData.value ?? "",
                                    warning: false,
                                }) }}
                            {% default %}

                            {% endswitch %}
                        {% endfor %}

                        {% if scriptData.templatePath is defined and scriptData.templatePath | length %}
                            {{ forms.editableTableField({
                                label: "Script Tag Attributes"|t("seomatic"),
                                instructions: "Additional attributes to add to the `<script>` tag"|t("seomatic"),
                                id: 'tagAttrs',
                                name: 'tagAttrs',
                                allowAdd: true,
                                allowDelete: true,
                                allowReorder: true,
                                required: false,
                                defaultValues: {
                                    name: "",
                                    value: "",
                                },
                                cols: {
                                    name: {
                                        heading: "Attribute Name"|t("seomatic"),
                                        type: "singleline",
                                        width: "50%",
                                        code: true,
                                    },
                                    value: {
                                        heading: "Attribute Value"|t("seomatic"),
                                        type: "singleline",
                                        width: "50%",
                                        code: true,
                                    },
                                },
                                rows: scriptData.tagAttrs,
                                errors: scriptData.getErrors("tagAttrs"),
                            }) }}

                            {{ codeEditor.textAreaField({
                                label: "Script Template"|t("seomatic"),
                                instructions: "The script that will render on the page. Note that this script will not render in `local` development or `staging` environments."|t("seomatic"),
                                id: "templateString",
                                name: "templateString",
                                value: scriptData.templateString,
                                class: "seomatic-javascript-editor selectize-text hidden",
                                warning: false,
                                errors: scriptData.getErrors("templateString"),
                            }, "SeomaticTrackingField", {}, codeEditorOptions | merge({wrapperClass: "monaco-editor-background-frame"})) }}
                            {{ forms.selectField({
                                label: "Script Render Location"|t("seomatic"),
                                instructions: "Determines where in the HTML document the script renders."|t("seomatic"),
                                id: "position",
                                name: "position",
                                options: {
                                    1: "Head - in the <head> tag"|t("seomatic"),
                                    2: "Body Begin - after the <body> tag "|t("seomatic"),
                                    3: "Body End - before the </body> tag"|t("seomatic"),
                                },
                                value: scriptData.position,
                                errors: scriptData.getErrors("position"),
                            }) }}
                        {% endif %}

                        {% if scriptData.bodyTemplatePath is defined and scriptData.bodyTemplatePath | length %}
                            {{ codeEditor.textAreaField({
                                label: "Body Script Template"|t("seomatic"),
                                instructions: "The script that will render in the `<body>`. Note that this script will not render in `local` development or `staging` environments."|t("seomatic"),
                                id: "bodyTemplateString",
                                name: "bodyTemplateString",
                                value: scriptData.bodyTemplateString,
                                class: "seomatic-javascript-editor selectize-text hidden",
                                warning: false,
                                errors: scriptData.getErrors("bodyTemplateString"),
                            }, "SeomaticTrackingField", {}, codeEditorOptions | merge({wrapperClass: "monaco-editor-background-frame"})) }}

                            {{ forms.selectField({
                                label: "Body Script Render Location"|t("seomatic"),
                                instructions: "Determines where in the `<body>` the script renders."|t("seomatic"),
                                id: "bodyPosition",
                                name: "bodyPosition",
                                options: {
                                    2: "Body Begin - after the <body> tag "|t("seomatic"),
                                    3: "Body End - before the </body> tag"|t("seomatic"),
                                },
                                value: scriptData.bodyPosition,
                                errors: scriptData.getErrors("bodyPosition"),
                            }) }}
                        {% endif %}
                    </div>
                {% endnamespace %}
            </div>
        {% endif %}
    {% endfor %}

    {% include "seomatic/_includes/footer-message.twig" with {
        message: ""
    } %}
{% endblock %}