{% extends "layout.html" %}

{% block stylesheets %}
    <style>
      body {
          padding:0px;
          margin: 0px;
          background-color: white;
          color: black;
          font-weight: 300;
          font-size: 13pt;
      }

      #adlogo {
          float: right;
          width: 140px;
          padding: 2px;
          border: none;
      }

      #container {
          position: absolute;
          top: 0px; /* Header Height */
          bottom: 0px; /* Footer Height */
          left: 0px;
          right: 0px;
          padding: 100px;
          padding-top: 5%;
          border: 18px solid #f3f3f3;
          background: white;
      }
    </style>
{% endblock %}

{% block body %}
    <div id="container">
      <div class="well">
        <i>{{ recruiter }}</i>
        <h1>You're finished!</h1>
        <hr>
        {% if participant_exit_info %}
        <p>Below is information you may need to receive compensation for your
        participation.</p>
        <table class="table table-sm table-striped">
            <tbody>
            {% for key, value in participant_exit_info %}
                <tr><th>{{ key }}</th><td>{{ value }}</td></tr>
            {% endfor %}
            </tbody>
        </table>
        {% endif %}

      </div>
{% endblock %}
