{% extends "base.html" %}

{% load url from future %}
{% load xray_tags %}

{% block title %}Experiments{% endblock title %}

{% block extra_stylesheets %}
    <style type="text/css">
        img#logo  {
            margin: 25px 0 25px 0;
        }
        a  {
            color: #62C2D7;
        }
        p.empty  {
            color: #777;
            padding: 0 15px;
        }
        div.experiment  {
            background: #F5F5F5;
            border: 1px solid #F0F0F0;
            padding: 15px;
            padding-top: 5px;
            margin-top: 20px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
        div.experiment .head h2  {
            color: #62C2D7;
            line-height: 25%;
        }
        div.experiment .head p.started_on  {
            font-size: 85%;
        }
        div.experiment .results  {
            background: #FFF;
            padding: 15px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
        p.started_on  {
            font-size: 90%;
        }
        table  {
            border-collapse: collapse;
            width: 100%;
        }
        th, td  {
            padding: 8px;
            text-align: center;
        }
        th  {
            background: #F9F9F9;
        }
        td.left  {
            text-align: left;
        }
        th  {
            font-weight: bold;
        }
        td  {
            border-bottom: 1px dotted #DDD;
        }
        tr.last td  {
            border-bottom: 0;
            background: #F9F9F9;
        }
        td span.pill  {
            display: inline-block;
            background: #CCC;
            color: #FFF;
            padding: 5px 8px;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: bold;
            -webkit-border-radius: 16px;
            border-radius: 16px;
        }
        td.rate, span.better  {
            color: #7EA407;
        }
        span.better  {
            font-weight: bold;
        }
        span.better:before  {
            content: '+'
        }
        div.btn  {
            display: inline-block;
            background: #62C2D7;
            color: #FFF;
            padding: 5px 8px;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: bold;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
    </style>
{% endblock extra_stylesheets %}
{% block content %}

    <img id="logo" src="data:;base64, " />

    {% if not experiments_data %}
        <p class="empty">
            Whoops - looks like you haven't started any experiments yet!
        </p>
    {% endif %}

    {% for experiment_name, e in experiments_data.items %}
        <div class="experiment">

            <div class="head">
                <h2>{{ experiment_name }}</h2>

                <p class="started_on">
                    Started {{ e.started_on }}
                </p>
            </div>

            <div class="results">
                <table>
                  <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>Participants</th>
                        <th>Conversions</th>
                        <th>Conversion Rate</th>
                        <th>Improvement from Control</th>
                        <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for tuple in e.variants %}
		      {% with tuple.0 as variant_name %}
		      {% with tuple.1 as v %}
                           {% if forloop.first %}
                           <tr>
                                <td class="left"><b>Control</b></td>
                                <td class="left">
                                    <span class="pill control">X</span>
                                </td>
                           {% else %}
			   <tr style="background:{{forloop.counter|divisibleby:2|yesno:"#EFF9FB,#FFF"}};">
                                <td class="left"><b>Variant</b></td>
                                <td class="left">
                                <span class="pill" style="background:{% cycle '#62C2D7' '#7EA407' '#E3690E' %};">
                                    {{ forloop.counter0|alphabet }}
                                    </span>
                                </td>
                           {% endif %}
                            <td class="left">{{ variant_name }}</td>
                            <td>{{ v.participants|default_if_none:"-" }}</td>
                            <td>{{ v.conversions|default_if_none:"-" }}</td>
                            <td class="rate">
                                {{ v.conversion_rate|default_if_none:"-" }}
                            </td>
                            <td>
                                {% if v.is_control %}
                                    N/A
                                {% elif e.control_conversion_rate > 0.0 and v.conversion_rate > e.control_conversion_rate %}
				    <span class="better">
					{{ v.improvement_from_control|default_if_none:"-" }}
				    </span>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td class="left">
                                {% if v.z_score != 'N/A' and v.conversion_rate > e.control_conversion_rate %}
                                    <a href="#" title="Z-Score: {{ v.z_score }}">{{ v.confidence_level }}</a>
                                {% endif %}
                            </td>
                        </tr>
		      {% endwith %}
		      {% endwith %}
                    {% endfor %}
                    <tr class="last">
                        <td class="left"><b>Total</b></td>
                        <td />
                        <td />
                        <td>{{ e.participants|default_if_none:"-" }}</td>
                        <td>{{ e.conversions|default_if_none:"-" }}</td>
                        <td />
                        <td />
                        <td />
                    </tr>
                  </tbody>
                </table>
            </div>
        </div>
    {% endfor %}

{% endblock content %}
