{% extends "base.html" %}
{% block crumbs %}<span class="crumb">{{ folder }}</span>{% endblock %}
{% block main %}
<section class="intro">
  {% if experiments %}
  <div class="view-toggle" role="group" aria-label="View">
    <button type="button" data-view="table" aria-pressed="true">Table</button>
    <button type="button" data-view="cards" aria-pressed="false">Cards</button>
  </div>
  {% endif %}
  <h1>Experiments</h1>
  <p class="lede">{{ experiments | length }} experiment{{ '' if experiments | length == 1 else 's' }},
    {{ experiments | sum(attribute='runs') }} runs recorded.</p>
</section>

{% if experiments %}
<table class="ledger" data-view="table">
  <thead>
    <tr>
      <th scope="col">Experiment</th>
      <th scope="col" class="num">Runs</th>
    </tr>
  </thead>
  <tbody>
    {% for experiment in experiments %}
    <tr>
      <td>
        <a class="title-link" href="{{ url_for('experiment', name=experiment.name) }}">{{ experiment.display_name }}</a>
        {% if experiment.display_name != experiment.name %}<div class="study">{{ experiment.name }}</div>{% endif %}
        {% if experiment.counts_error %}<div class="counts-error" title="{{ experiment.counts_error }}">counts rule doesn't work</div>{% endif %}
      </td>
      <td class="num" data-label="Runs">{{ experiment.runs }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
<script src="{{ asset('view-toggle.js') }}" defer></script>
<script src="{{ asset('row-link.js') }}" defer></script>
{% else %}
<p class="empty">No experiments found. Create one with <code>labnotes experiments new</code>.</p>
{% endif %}
{% endblock %}