{% extends "wagtailadmin/base.html" %}
{% load i18n staticfiles %}
{% block titletag %}{% trans "Experiment results" %}{% endblock %}


{% block content %}
    {% trans "Experiment results" as doc_str %}

    {% include "wagtailadmin/shared/header.html" with title=doc_str subtitle=experiment.name icon="doc-full-inverse" %}

    <div class="nice-padding">

        <table class="listing">
            <colgroup>
                <col width="30%" />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr class="table-headers">
                    <th>{% trans "Page" %}</th>
                    <th>{% trans "Conversions" %}</th>
                    <th>{% trans "Conversion rate" %}</th>
                    <th>{% trans "Actions" %}</th>
                    <th>{% if winning_variation %}{% trans "Winning variation" %}{% endif %}</th>
                </tr>
            </thead>
            <tbody>
                {% for variation, variation_report in report_by_variation.items %}
                    <tr>
                        <td class="title"><a href="{% url 'wagtailadmin_pages:edit' variation.pk %}">{{ variation.title }}</a></td>
                        <td>{{ variation_report.total_completion_count }} / {{ variation_report.total_participant_count }}</td>
                        <td>{{ variation_report.total_conversion_rate|floatformat:2 }}%</td>
                        <td>
                            <form action="{% url 'experiments:select_winner' experiment.pk variation.pk %}" method="POST">
                                {% csrf_token %}
                                <button type="submit" class="button button-small button-primary">
                                    {% trans 'Use this' %}
                                </button>
                                <a class="button button-small button-primary" title="{% trans 'Preview' %}"
                                   href="{% url 'experiments:preview_for_report' experiment.pk variation.pk %}">
                                    <span class="icon icon-view"></span>
                                </a>
                            </form>
                        </td>
                        {% if variation == winning_variation %}
                            <td class="icon icon-tick">{% trans 'Selected' %}</td>
                        {% else %}
                            <td></td>
                        {% endif %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <h3>{% trans "Conversion rate / Day" %}</h3>
        <div id="experiment-report-chart"></div>

        <script type="text/javascript">
            c3.generate({
                bindto: '#experiment-report-chart',
                data: {
                    xs: {
                        {% for variation in report_by_variation.keys %}
                            '{{ variation.title|escapejs }}': 'x{{ variation.pk|escapejs }}'{% if not forloop.last %},{% endif %}
                        {% endfor %}
                    },
                    columns: [
                        {% for variation, variation_report in report_by_variation.items %}
                            ['x{{ variation.pk|escapejs }}',
                                {% for history_entry in variation_report.history %}
                                    '{{ history_entry.date|date:"Y-m-d" }}'{% if not forloop.last %},{% endif %}
                                {% endfor %}
                            ],

                            ['{{ variation.title|escapejs }}',
                                {% for history_entry in variation_report.history %}
                                    '{{ history_entry.conversion_rate|floatformat:2|escapejs }}'{% if not forloop.last %},{% endif %}
                                {% endfor %}
                            ]{% if not forloop.last %},{% endif %}
                        {% endfor %}
                    ]
                },
                padding: {
                    right: 20
                },
                axis: {
                    x: {
                        type: 'timeseries',
                        tick: {
                            format: '%Y-%m-%d'
                        }
                    }
                }
            });
        </script>

    </div>
{% endblock %}

{% block extra_css %}
    <link href="{% static "experiments/css/vendor/c3-v0.4.11.min.css" %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block extra_js %}
    <script src="{% static "experiments/js/vendor/d3-v3.5.17.min.js" %}"></script>
    <script src="{% static "experiments/js/vendor/c3-v0.4.11.min.js" %}"></script>
{% endblock %}