{% extends "_layouts/cp" %}

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

{% do view.registerAssetBundle('craft\\web\\assets\\admintable\\AdminTableAsset') -%}

{% do view.registerTranslations('app', [
    'Name',
]) %}

{% do view.registerTranslations('ab-test', [
    'No drafts have been added yet.',
]) %}

{% set fullPageForm = true %}
{% set saveShortcutRedirect = continueEditingUrl %}

{% block content %}

    {{ actionInput('ab-test/experiments/save') }}
    {{ redirectInput('ab-test/experiments') }}

    {% if experiment.id %}<input type="hidden" name="experimentId" value="{{ experiment.id }}">{% endif %}

    {{ forms.textField({
        first: true,
        label: "Name"|t('app'),
        instructions: "What this experiment will be called in the CP."|t('ab-test'),
        id: 'name',
        name: 'name',
        value: experiment.name,
        errors: experiment.getErrors('name'),
        autofocus: true,
        required: true,
    }) }}

    {{ forms.textField({
        label: "Google Optimize Experiment ID"|t('ab-test'),
        instructions: "The ID of your Google Optimize Experiment which can be found under the Measurement and objectives section on the Details tab in Optimize."|t('ab-test'),
        id: 'optimizeId',
        name: 'optimizeId',
        value: experiment.optimizeId,
        errors: experiment.getErrors('optimizeId'),
    }) }}

    {{ forms.dateTimeField({
        label: "Start Date"|t('ab-test'),
        id: 'startDate',
        name: 'startDate',
        value: (experiment.startDate ? experiment.startDate : null),
        errors: experiment.getErrors('startDate'),
    }) }}

    {{ forms.dateTimeField({
        label: "End Date"|t('ab-test'),
        id: 'endDate',
        name: 'endDate',
        value: (experiment.endDate ? experiment.endDate : null),
        errors: experiment.getErrors('endDate'),
    }) }}

    {% set sections = experiment.getSections() %}
    {% if sections %}
        <hr>

        <p>Below are the entries that form part of your experiment, if you see more than one then you are running a multivariate test rather than an A/B test.</p>

        {% for section in sections %}
            <div class="pane">
                {% set control = section.getControl() %}

                <header class="header">
                    <h3>
                        {{ control.section.name }}
                        <span class="icon" data-icon="rarr"></span>
                        <a href="{{ control.cpEditUrl }}">{{ control.title }}</a>
                    </h3>
                </header>

                <div class="content-pane">
                    <div id="abtest-experiment-drafts-vue-admin-table-{{ section.id }}"></div>
                </div>

                {% js %}
                    var columns = [
                        {
                            name: '__slot:title',
                            title: Craft.t('app', 'Draft Name'),
                        },
                        {
                            name: 'notes',
                            title: Craft.t('app', 'Notes'),
                        }
                    ];

                    new Craft.VueAdminTable({
                        columns: columns,
                        container: '#abtest-experiment-drafts-vue-admin-table-{{ section.id }}',
                        deleteAction: 'ab-test/sections/delete-draft',
                        emptyMessage: Craft.t('ab-test', 'No drafts have been added yet.'),
                        tableData: {{ draftsTableData[section.id]|json_encode|raw }},
                    });
                {% endjs %}
            </div>
        {% endfor %}
    {% endif %}
{% endblock %}