{% extends "wagtailadmin/base.html" %}
{% load wagtailadmin_tags i18n %}
{% block titletag %}{% trans "Create an A/B Test" %} - {{ page.title }}{% endblock %}

{% block content %}
    {% trans "Create an A/B Test" as title %}
    {% include "wagtailadmin/shared/header.html" with title=title subtitle=page.title icon='people-arrows' tabbed=1 merged=1 %}

    <form method="post">
        {% csrf_token %}

        <section class="section">
            <div class="section__title">
                <h3>{% trans "Enter test details" %}</h3>
            </div>

            <div class="section__content nice-padding">
                <ul class="fields">
                    {% include "wagtailadmin/shared/field_as_li.html" with field=form.name %}
                    {% include "wagtailadmin/shared/field_as_li.html" with field=form.hypothesis %}
                </ul>
            </div>
        </section>


        <section class="section">
            <div class="section__title">
                <h3>{% trans "Choose a goal" %}</h3>
            </div>

            <div class="section__content nice-padding">
                <div data-component="goal-selector" data-props="{{ goal_selector_props }}"></div>
            </div>
        </section>


        <section class="section">
            <div class="section__title">
                <h3>{% trans "Sample size" %}</h3>
            </div>

            <div class="section__content nice-padding">
                <ul class="fields">
                    {% include "wagtailadmin/shared/field_as_li.html" with field=form.sample_size %}
                </ul>
                {% trans 'Need help calculating sample size for A/B tests? Try <a href="https://www.optimizely.com/uk/sample-size-calculator/" target="_blank">Optimisely</a>, <a href="https://www.evanmiller.org/ab-testing/sample-size.html" target="_blank">Evan Miller</a>, or <a href="https://www.abtasty.com/sample-size-calculator/" target="_blank">AB Tasty</a>.' %}
            </div>
        </section>

        <p class="section__content nice-padding">
            <button type="submit" class="button button-primary">{% trans "Save" %}</button>
            <button type="submit" name="start" class="button button-primary">{% trans "Save and start test" %}</button>
        </p>

        <div class="nice-padding">
            <div class="help-block help-info">
                <p>{% trans "A/B tests are calculated using Pearson's chi squared test and are set at 95% confidence level." %}</p>
                <p>{% trans "Traffic is split evenly between each version." %}</p>
                <p>{% trans 'Users with "<a href="https://en.wikipedia.org/wiki/Do_Not_Track" target="_blank">Do Not Track</a>" enabled are not counted.' %}</p>
            </div>
        </div>
    </form>
{% endblock %}

{% block extra_css %}
    {% include "wagtailadmin/pages/_editor_css.html" %}
{% endblock %}

{% block extra_js %}
    {% include "wagtailadmin/pages/_editor_js.html" %}
    <script>
        {% url 'wagtailadmin_home' as wagtailadmin_root_url %}
        wagtailConfig.ADMIN_ROOT_URL = '{{ wagtailadmin_root_url|escapejs }}';
    </script>
    <script src="{% url 'wagtail_ab_testing:javascript_catalog' %}"></script>
    <script type="text/javascript" src="{% versioned_static 'wagtailadmin/js/page-chooser-modal.js' %}"></script>
    <script src="{% versioned_static 'wagtail_ab_testing/js/wagtail-ab-testing.js' %}"></script>
{% endblock %}
