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

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

<ul class="nav nav-pills">
  <li id="js-active-experiments"><a href="/">active</a></li>
  <li id="js-non-active-experiments"><a href="/?archived=true">archived</a></li>
</ul>

<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 UNIQUIE 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) { %>
      <h4><%- experiment.description %></h4>
    <% } %>
  </div>
  <div class="clearfix"></div>

  <table>
    <tbody>
      <tr>
        <th>Case</th>
        <th>Participants</th>
        <th>Conv Rate</th>
        <th>Confidence</th>
      </tr>
      <% _.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>
            <%- alt.name %>
            <% if (alt.is_control) { %>
              <span class="note control">control</span>
            <% } %>
          </td>
          <td><%- alt.participant_count %></td>
          <td><%- alt.conversion_rate %></td>
          <td><span title="<%- alt.test_statistic %>"><%- alt.confidence_level %><span></td>
        </tr>
      <% }); %>
    </tbody>
  </table>

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