{% extends "otree/admin/Session.html" %}
{% block content %}
  {{ block.super }}
  <div class="container" style='max-width:970px'>
    <p>
      Generated: <strong>{% now "DATETIME_FORMAT" %}</strong>
    </p>


    <h3>Session</h3>
    <table class="table">
      <tr>
        <th>Session config</th>
        <td>{{ session.config.name }}</td>
      </tr>

      <tr>
        <th>Session code</th>
        <td style="font-family: 'Courier New'">{{ session.code }}</td>
      </tr>

      <tr>
        <th>Participation fee</th>
        <td>{{ participation_fee }}</td>
      </tr>

    </table>

    <h3>Participants</h3>


    <table class="table table-striped">
      <tr>
        <th>Code</th>
        <th>Label</th>
        <th>Progress</th>
        <th>Payoff (bonus)</th>
        <th>Total</th>
      </tr>

      {% for p in participants %}
        <tr>
          <td style="font-family: 'Courier New'">{{ p.code }}</td>
          <td>{{ p.label|default_if_none:"" }}</td>
          <td>{{ p.current_page_ }}</td>
          <td>{{ p.payoff_in_real_world_currency }}</td>
          <td>{{ p.payoff_plus_participation_fee }}</td>
        </tr>
      {% endfor %}

    </table>

    <h3>Summary</h3>
    <table class="table">
      <tr>
        <th>Total payments</th>
        <td>{{ total_payments }}</td>
      </tr>
      <tr>
        <th>Mean payment</th>
        <td>{{ mean_payment }}</td>
      </tr>
    </table>


    <h3>Notes</h3>
    <div class="card bg-light">
      <br/>
      <br/>
      <br/>
    </div>
  </div>
{% endblock %}