{% extends "report_base.html" %}

{% block title %}{{ exp_id }} | sbmlsim experiment{% endblock %}
{% block items %}figures{% endblock %}
{% block heading %}{{ exp_id }}{% endblock %}
{% block subtitle %}simulation experiment{% endblock %}
{% block placeholder %}Search figures, models, datasets …{% endblock %}

{% block badges %}
<span class="badge">models <b>{{ models | length }}</b></span>
<span class="badge">datasets <b>{{ datasets | length }}</b></span>
<span class="badge">figures <b>{{ figures | length }}</b></span>
{% endblock %}

{% block nav %}
<a href="#overview">Overview</a>
<a href="#figures">Figures</a>
<a href="#code">Code</a>
{% endblock %}

{% block footer %}
<a href="../index.html">all experiments</a> · <a href="{{ code_path }}">{{ code_path }}</a>
{% endblock %}

{% block head %}
<style>
  /* an interactive figure is a page of its own, shown in place of the image */
  figure iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); }
</style>
{% endblock %}

{% block content %}

<section id="overview">
  <h2>Overview</h2>

  <h3>Models</h3>
  <div class="card">
    <table data-filter="row">
      <thead><tr><th data-sort="text">model</th><th data-sort="text">source</th></tr></thead>
      <tbody>
      {% for model_id, model_path in models.items() %}
      <tr><td class="mono">{{ model_id }}</td><td><a href="{{ model_path }}">{{ model_path }}</a></td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>

  <h3>Datasets</h3>
  <div class="card">
    {% if datasets %}
    <table data-filter="row">
      <thead><tr><th data-sort="text">dataset</th><th data-sort="text">file</th></tr></thead>
      <tbody>
      {% for dset_id, dset_path in datasets.items() %}
      <tr><td class="mono">{{ dset_id }}</td><td><a href="{{ dset_path }}">{{ dset_path }}</a></td></tr>
      {% endfor %}
      </tbody>
    </table>
    {% else %}
    <p class="empty">The experiment has no datasets.</p>
    {% endif %}
  </div>
</section>

<section id="figures">
  <h2>Figures ({{ figures | length }})</h2>
  {% for fig_id, fig in figures.items() %}
  <div class="card mapping" data-filter="card">
    <header>
      <span class="name mono">{{ fig_id }}</span>
      <span class="exp">
        {% if fig.static %}<a href="{{ fig.path }}.svg">{{ fig.path }}.svg</a>{% endif %}
        {% if fig.interactive %}<a href="{{ fig.path }}.html">interactive</a>{% endif %}
      </span>
    </header>
    <figure>
      {% if fig.static %}
      <img loading="lazy" src="{{ fig.path }}.svg" alt="{{ fig_id }}">
      {% elif fig.interactive %}
      <iframe src="{{ fig.path }}.html" title="{{ fig_id }}" loading="lazy"></iframe>
      {% endif %}
    </figure>
  </div>
  {% endfor %}
  <p class="empty hidden" data-empty>No figure matches the search.</p>
  {% if not figures %}<p class="empty">The experiment has no figures.</p>{% endif %}
</section>

<section id="code">
  <h2>Code</h2>
  <div class="card">
    <p><a href="{{ code_path }}">{{ code_path }}</a></p>
    <pre class="code"><code>{{ code }}</code></pre>
  </div>
</section>

{% endblock %}