{% extends "report_base.html" %}

{% block title %}Simulation experiments | sbmlsim{% endblock %}
{% block items %}experiments{% endblock %}
{% block heading %}Simulation experiments{% endblock %}
{% block subtitle %}{{ data | length }} experiment(s){% endblock %}
{% block placeholder %}Search experiments and figures …{% endblock %}

{% block badges %}
<span class="badge">experiments <b>{{ data | length }}</b></span>
{% endblock %}

{% block nav %}
<a href="#experiments">Experiments</a>
{% endblock %}

{% block content %}

<section id="experiments">
  <h2>Experiments ({{ data | length }})</h2>
  {% for exp_id, context in data.items() %}
  <div class="card mapping" data-filter="card">
    <header>
      <span class="name"><a href="{{ exp_id }}/{{ exp_id }}.html">{{ exp_id }}</a></span>
      <span class="exp">{{ context.figures | length }} figure(s) · {{ context.models | length }} model(s)</span>
    </header>
    <div class="grid">
      {% for fig_id, fig_path in context.figures.items() %}
      <figure>
        <img loading="lazy" src="./{{ exp_id }}/{{ fig_path }}.svg" alt="{{ fig_id }}">
        <figcaption>{{ fig_id }}</figcaption>
      </figure>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
  <p class="empty hidden" data-empty>No experiment matches the search.</p>
</section>

{% endblock %}