{% extends "psynet_dashboard.html" %}
{% block scripts %}
  <script src="/static/scripts/dashboard_timeline.js"/></script>
{% endblock %}
{% block stylesheets %}
  <link rel="stylesheet" href="/static/css/dashboard_timeline.css"/>
{% endblock %}
{% block body %}
<h1>{{ title }}</h1>
<p>
  This page shows how participants progress through the timeline of the experiment.
</p>
<div id="monitor-wrapper" class="d-flex justify-content-between align-items-stretch">
  <aside id="sidebar">
    <button id="refresh" onclick="window.location.reload();">Refresh</button>
    <div id="statistics-pane" class="sidebar-pane">
      <h2>Statistics</h2>
      {% for pane in panes %}
        <div class="sub-pane">
          <h3>{{ pane }}</h3>
          {{ panes[pane]|safe }}
        </div>
      {% endfor %}
    </div>
  </aside>
  <main class="flex-fill">
    <section id="spending">
      <div class="chart spending"></div>
    </section>
    <section id="change-spending-limits" style="display: none;">
      <div style="width: max-content; float: right;">
        <div style="float: right">
          <label>
            <span>
              Hard max. limit in {{ currency }}
              <a id="hard-max-experiment-payment-tooltip-link" href="#" class="" style="float: right; margin-left: 8px; font-weight: bold; font-family: monospace; margin-left: -25px; color: darkorange;">&#9432;</a>
            </span>
            <input type="text" id="hard-max-experiment-payment" class="form-control form-control-sm" placeholder="" aria-controls="database-table">
          </label>
          <br>
          <input type="submit" id="update-spending-limits" value="Save" style="float: right; margin-bottom: 10px;">
        </div>
        <div style="float: right; margin-right: 20px;">
          <label style="width: 160px">
            <span>
              Soft max. limit in {{ currency }}
              <a id="soft-max-experiment-payment-tooltip-link" href="#" style="float: right; font-weight: bold; font-family: monospace; margin-left: -25px; color: darkorange;">&#9432;</a>
            </span>
            <input type="text" id="soft-max-experiment-payment" class="form-control form-control-sm" placeholder="" aria-controls="database-table">
          </label>
        </div>
      </div>
      <div id="hard-max-experiment-payment-tooltip" class="spending-limits-tooltip" style="z-index: 10; display: none; float: right;">
        <b>Hard maximum spending limit</b>
        <br>
        Guarantees that in an experiment no more is spent than the value assigned.
        A bonus that would exceed this value is clipped to remaining room
        (or not paid if that remainder is below $0.01).
        <span style="font-family: monospace;">planned_bonus</span> stays the
        decided amount, with bonus status
        <span style="font-family: monospace;">capped</span>.
      </div>
      <div id="soft-max-experiment-payment-tooltip" class="spending-limits-tooltip" style="z-index: 10; display: none; float: right;">
        <b>Soft maximum spending limit</b>
        <br>
        The recruiting process stops if <span style="font-family: monospace;">amount_spent()</span>
        (recorded base payment and delivered bonus, including in-progress
        participants) exceeds this value.
      </div>
    </section>
    <section id="timeline-modules">
      <div class="chart modules"></div>
    </section>
    <section id="details-pane">
      <h2>Details</h2>
      <div id="element-details">
      </div>
    </section>
  </main>
  </div>
  <script>
    window.timelineModules = {{ timeline_modules | safe }};
  </script>
{% endblock %}
{% block libs %}
  {{ super() }}
{% endblock %}