{% extends "layout.html" %}
{% block body %}

<script type="text/javascript">
  var experiments = {{ experiments|list|tojson|safe }};
</script>

<div id="dashboard-page">
  <ul class="experiments"></ul>
  <div id="no-data">
    <h2>Oh No.</h2>
    <p>It seems you haven't created any experiments, yet. To do this simply make a <code>GET</code> request to your sixpack server's 'participate' endpoint.</p>
    <pre><code>$ curl <span id="base-domain">http://127.0.0.1:5000</span>/participate?experiment=new-header&amp;alternatives=red&amp;alternatives=blue&amp;client_id=&lt;A UNIQUE CLIENT ID&gt;</code></pre>
  </div>
</div>



<script type="text/template" id="experiment-template">
  <div class="header">
    <h3 class="name">
      <a href="/experiment/<%- experiment.name %>"><%- experiment.name %></a>
    </h3>
    <% if (experiment.description) { %>
      <div class="desc"><%= experiment.pretty_description %></div>
    <% } %>
  </div>
  <div class="clearfix"></div>

  <table>
    <thead>
      <tr>
        <th>Case</th>
        <th>Conversions</th>
        <th>Conv Rate</th>
        <th>Confidence</th>
      </tr>
    </thead>
    <tbody>
      <% _.each(experiment.alternatives, function (alt, index) { %>
        <tr class="<%- experiment.name %>-line-<%- index %>">
          <td>
            <span class="circle color-<%- (index + 1) %>">
              <% if (alt.is_winner) { %>
                <i class="icon-ok"></i>
              <% } %>
            </span>
            <div class="alt-name">
              <%- alt.name %>
              <% if (alt.is_control) { %>
                <span class="note control">control</span>
              <% } %>
            </div>
          </td>
          <td><%- alt.completed_count %> / <%- alt.participant_count %></td>
          <td><%- alt.conversion_rate %> <span class="confidence-interval">&plusmn; <%- alt.confidence_interval %></span></td>
          <td><span title="<%- alt.test_statistic %>"><%= alt.confidence_level %><span></td>
        </tr>
      <% }); %>
    </tbody>
  </table>

  <div class="chart-container">
    <div id="chart-<%- experiment.name %>" class="chart" data-experiment="<%-experiment.name %>"></div>
  </div>
</script>
{% endblock %}