{% 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">
    <h1>Welcome to Sixpack!</h1>

    <div class="row-fluid">
      {% if page == 'home' %}
      <div class="span3">
        <div class="well">
          <ul class="nav nav-list">
            <li><a href="http://github.com/seatgeek/sixpack">Sixpack on GitHub</a></li>

            <li class="nav-header">Client Libraries</li>

            <li><a href="http://github.com/seatgeek/sixpack-rb">Ruby</a></li>
            <li><a href="http://github.com/seatgeek/sixpack-py">Python</a></li>
            <li><a href="http://github.com/seatgeek/sixpack-js">JavaScript</a></li>
            <li><a href="http://github.com/seatgeek/sixpack-php">PHP</a></li>
          </ul>
        </div>
      </div>

      <div class="span9">

        <p>To create your first experiment, simply make a <code>GET</code> request to your Sixpack server's 'participate' endpoint.</p>
        <pre><code>$ curl <span class="base-domain">http://127.0.0.1:5000</span>/participate?experiment=<span class="highlight">new-header</span>&amp;alternatives=<span class="highlight">red</span>&amp;alternatives=<span class="highlight">blue</span>&amp;client_id=<span class="highlight">&lt;A UNIQUE CLIENT ID&gt;</span></code></pre>

        <p>To create a conversion, make another request to your server's 'convert' endpoint.</p>

        <pre><code>$ curl <span class="base-domain">http://127.0.0.1:5000</span>/convert?experiment=<span class="highlight">new-header</span>&amp;client_id=<span class="highlight">&lt;A UNIQUE CLIENT ID&gt;</span></code></pre>
      </div>
      {% else %}
        <div class="span12">
          <div class="notice">
            <p>You have no archived experiments</p>
          </div>
        </div>
      {% endif %}
    </div><!-- /.row-fluid -->
  </div>
</div>



<script type="text/template" id="experiment-template">
  <div class="header">
    <h3 class="name">
      <a href="/experiments/<%- 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 %}