{% 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 %}<button type="button" class="new-note" data-url="{{ url_for('post_note', name=e.name) }}" aria-label="New note" title="New note">+</button>
</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-conflict-url="{{ url_for('post_conflict', name=e.name, note=note.name) }}" data-editor="{{ asset('note-editor.js') }}" data-changes-url="{{ url_for('changes', name=e.name) }}" data-note="{{ note.name }}">
  {% 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. <button type="button" class="new-note" data-url="{{ url_for('post_note', name=e.name) }}" aria-label="New note" title="New note">+</button></p>
{% endif %}
<script src="{{ asset('new-note.js') }}" defer></script>
{% else %}
<section id="runs">
  {% set view = e.run_view %}
  {% set nested = e.run_groups is not none %}
  {% set width = e.run_columns | length + (2 if nested else 1) %}
  {% set narrowed = view.status or view.filters or view.picked %}
  {% 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>
        {% if nested and column == 'id' %}<th scope="col">runs</th>{% endif %}
        {% 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>{% if column in e.run_choices %}{% set picked = view.picked.get(column, {}) %}<details class="pick">
          <summary aria-label="Filter {{ column }}">{{ picked | join(', ') if picked else 'all' }}</summary>
          <div class="options">{% for label in e.run_choices[column] %}<label><input form="run-filters" type="checkbox" name="f.{{ column }}" value="{{ label }}"{{ ' checked' if label in picked }}> {{ label }}</label>{% endfor %}</div>
        </details>{% else %}<input form="run-filters" type="search" name="f.{{ column }}" value="{{ view.filters.get(column, '') }}" placeholder="filter" aria-label="Filter {{ column }}">{% endif %}</td>{% if nested and loop.first %}<td></td>{% endif %}{% endfor %}
      </tr>
    </thead>
    {% macro run_rows(run) %}
      <tr class="run-row">
        <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 %}{% if column == 'id' and nested %}<td class="mono">{{ run.id.partition('/')[2] or run.id }}</td><td></td>{% else %}<td class="{{ 'mono' if loop.first }}{{ 'num' if column == 'duration' }}">{{ run[column] | duration if column == 'duration' else run[column] | value }}</td>{% endif %}{% endfor %}
      </tr>
    {% endmacro %}
    {% if nested %}
    {% for group in e.run_groups %}
    <tbody class="group" data-name="{{ group.name }}">
      <tr class="group-row">
        <td class="num" title="{{ group.passed }} passed, {{ group.failed }} failed"><span class="good">{{ group.passed }}✓</span> <span class="bad">{{ group.failed }}✕</span></td>
        <td class="mono"><button type="button" class="group-toggle" aria-expanded="false">{{ group.name }}</button></td>
        <td class="num">{{ group.runs | length }}</td>
        {% for column in e.run_columns[1:] %}<td>{{ group.started or '' if column == 'started' }}</td>{% endfor %}
      </tr>
      {% for run in group.runs %}{{ run_rows(run) }}{% endfor %}
    </tbody>
    {% else %}
    <tbody><tr><td class="empty" colspan="{{ width }}">No runs match these filters.</td></tr></tbody>
    {% endfor %}
    {% else %}
    <tbody>
      {% for run in e.runs_list %}{{ run_rows(run) }}
      {% else %}
      <tr><td class="empty" colspan="{{ width }}">No runs match these filters.</td></tr>
      {% endfor %}
    </tbody>
    {% endif %}
  </table>
  </div>
  {% else %}
  <p class="empty">No runs recorded yet.</p>
  {% endif %}
</section>
{% endif %}
<script src="{{ asset('experiment.js') }}" defer></script>
{% endblock %}