{% extends "base.html" %}
{% set e = experiment %}
{% set tab = 'notebooks' if request.query_params.get('tab') == 'notebooks' else 'runs' %}
{% block title %}{{ e.display_name }} · labnotes{% endblock %}
{% block crumbs %}<span class="crumb"><a href="{{ url_for('index') }}">Experiments</a></span><span class="crumb">{{ e.display_name }}</span>{% endblock %}
{% block main %}
<section class="intro">
  <h1>{{ e.display_name }}</h1>
  {% if e.display_name != e.name %}<p class="study">{{ e.name }}</p>{% endif %}
  {% if e.config_source is not none %}
  <div class="config-line">
    <p class="config-summary">
      <span class="chip quiet">{{ e.mode }}</span>
      {% for key, value in e.other.items() %}<span class="setting">{{ key }} <code>{{ value | value }}</code></span>{% endfor %}
      {% if e.runs_per_cell %}<span class="setting">repeats <b class="num">{{ e.runs_per_cell }}</b></span>{% endif %}
      {% for key, values in e.varies.items() %}<span class="setting">{{ key }}{% for value in values %} <span class="chip">{{ value | value }}</span>{% endfor %}</span>{% endfor %}
      {% if e.counts_error %}<span class="setting counts-error">{{ e.counts_error }}</span>{% elif e.counts_set %}<span class="setting">counts <code>{{ e.completed_run }}</code></span>{% endif %}
    </p>
    <button type="button" class="config-open">experiment.toml</button>
  </div>
  <dialog class="config-file">
    <header>experiment.toml<button type="button" class="config-close">Close</button></header>
    <pre>{{ e.config_source }}</pre>
  </dialog>
  {% endif %}
</section>

<nav class="tabs">
  <a href="?"{% if tab == 'runs' %} aria-current="page"{% endif %}>Runs <span class="count num">{{ e.runs }}</span></a>
  <a href="?tab=notebooks"{% if tab == 'notebooks' %} aria-current="page"{% endif %}>Notebooks <span class="count num">{{ e.notes | length }}</span></a>
</nav>

{% if tab == 'notebooks' %}
{% set chosen = request.query_params.get('note') %}
{% set note = (e.notes | selectattr('name', 'equalto', chosen) | first) or (e.notes | first) %}
{% if note %}
<nav class="tabs sub">
  {% for each in e.notes %}<a href="?tab=notebooks&amp;note={{ each.name | urlencode }}"{% if each.name == note.name %} aria-current="page"{% endif %}>{{ each.name }}</a>{% endfor %}
</nav>
<article class="note" data-run-url="{{ url_for('run_block', name=e.name, note=note.name) }}" data-restart-url="{{ url_for('restart_kernel', name=e.name, note=note.name) }}" data-save-url="{{ url_for('put_note', name=e.name, note=note.name) }}" data-editor="{{ asset('note-editor.js') }}">
  {% if note.runnable %}<header class="note-name"><button type="button" class="restart" title="Stop this note's Python kernel. The next Run starts a fresh one.">Restart</button></header>{% endif %}
  <p class="edit-status" role="status" hidden></p>
  <div class="prose">{{ note.html | safe }}</div>
  <script type="application/json" class="note-source">{{ note.content | tojson }}</script>
</article>
{% include "editor_imports.html" %}
<script src="{{ asset('run-cell.js') }}" defer></script>
<script type="module" src="{{ asset('note-edit.js') }}"></script>
{% else %}
<p class="empty">No notebooks yet.</p>
{% endif %}
{% else %}
<section id="runs">
  {% set view = e.run_view %}
  {% set narrowed = view.status or view.filters %}
  {% if narrowed %}<p class="narrowed"><span class="num">{{ e.runs_list | length }}</span> of <span class="num">{{ e.runs }}</span> <a class="clear" href="{{ '?sort=' ~ (view.sort | urlencode) ~ ('&order=desc' if view.descending else '') if view.sort else '?' }}#runs">Clear filters</a></p>{% endif %}
  {% if e.runs %}
  <form id="run-filters" method="get" action="#runs">
    {% if view.sort %}<input type="hidden" name="sort" value="{{ view.sort }}">{% endif %}
    {% if view.descending %}<input type="hidden" name="order" value="desc">{% endif %}
    <button type="submit" hidden>Filter</button>
  </form>
  <div class="scroll">
  <table class="runs-table">
    <thead>
      <tr>
        {% for column in ['status'] + e.run_columns %}
        {% set sorted = view.sort == column %}
        <th scope="col"{% if sorted %} aria-sort="{{ 'descending' if view.descending else 'ascending' }}"{% endif %}><a class="sort{{ ' sorted' if sorted }}" href="{{ e.sort_hrefs[column] }}" title="Sort by {{ column }}">{{ '' if column == 'status' else column }}{% if sorted %}<span class="arrow">{{ '↓' if view.descending else '↑' }}</span>{% endif %}</a></th>
        {% endfor %}
      </tr>
      <tr class="filters">
        <td><select form="run-filters" name="status" aria-label="Filter by status" onchange="this.form.requestSubmit()">
          <option value=""{{ ' selected' if not view.status }}>all</option>
          <option value="complete"{{ ' selected' if view.status == 'complete' }}>✓</option>
          <option value="incomplete"{{ ' selected' if view.status == 'incomplete' }}>✕</option>
        </select></td>
        {% for column in e.run_columns %}<td><input form="run-filters" type="search" name="f.{{ column }}" value="{{ view.filters.get(column, '') }}" placeholder="filter" aria-label="Filter {{ column }}"></td>{% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for run in e.runs_list %}
      <tr class="run-row" aria-expanded="false">
        <td><span class="status {{ 'good' if run.labnotes_completed else 'bad' }}" title="{{ 'complete' if run.labnotes_completed else 'not complete' }}">{{ '✓' if run.labnotes_completed else '✕' }}</span></td>
        {% for column in e.run_columns %}<td class="{{ 'mono' if loop.first }}{{ 'num' if column == 'duration' }}">{{ run[column] | duration if column == 'duration' else run[column] | value }}</td>{% endfor %}
      </tr>
      <tr class="record-row" hidden>
        <td colspan="{{ e.run_columns | length + 1 }}">
          <dl class="record">
            {% for key, value in run.items() if key != 'labnotes_completed' %}
            <dt>{{ key }}</dt>
            {% set shown = value | value %}
            <dd>{% if shown | length > 80 %}<pre>{{ shown }}</pre>{% else %}<code>{{ shown }}</code>{% endif %}</dd>
            {% endfor %}
          </dl>
        </td>
      </tr>
      {% else %}
      <tr><td class="empty" colspan="{{ e.run_columns | length + 1 }}">No runs match these filters.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
  {% else %}
  <p class="empty">No runs recorded yet.</p>
  {% endif %}
</section>
{% endif %}
<script src="{{ asset('experiment.js') }}" defer></script>
{% endblock %}