{{ extends "otree/Page.html" }}
{{ load otree }}

{% block title %}
    Vote
{% endblock %}

{% block content %}
<p>
    Review the profiles of your group members. After you review, click the "Next" button to advance to the voting
    screen.
</p>

<div class="row">
  <div class="column">
    <h2>Group Member 1</h2>
    <p>*Picture Here*</p>
  </div>

  <div class="column">
    <h2>History</h2>
        <table class="table">
        <tr>
            <th>Round</th>
            <th>Contribution</th>
        </tr>
        {% for p in p1_in_previous_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                <td>
                    {{ p.contribution }}
                </td>
            </tr>
        {% endfor %}
    </table>

  </div>
</div>

<div class="row">
  <div class="column">
    <h2>Group Member 2</h2>
    <p>*Picture Here*</p>
  </div>

  <div class="column">
    <h2>History</h2>
        <table class="table">
        <tr>
            <th>Round</th>
            <th>Contribution</th>
        </tr>
        {% for p in p2_in_previous_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                <td>
                    {{ p.contribution }}
                </td>
            </tr>
        {% endfor %}
    </table>

  </div>
</div>

<div class="row">
  <div class="column">
    <h2>Group Member 3</h2>
    <p>*Picture Here*</p>
  </div>

  <div class="column">
    <h2>History</h2>
        <table class="table">
        <tr>
            <th>Round</th>
            <th>Contribution</th>
        </tr>
        {% for p in p3_in_previous_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                <td>
                    {{ p.contribution }}
                </td>
            </tr>
        {% endfor %}
    </table>

  </div>
</div>

<div class="row">
  <div class="column">
    <h2>Group Member 4</h2>
    <p>*Picture Here*</p>
  </div>

  <div class="column">
    <h2>History</h2>
        <table class="table">
        <tr>
            <th>Round</th>
            <th>Contribution</th>
        </tr>
        {% for p in p4_in_previous_rounds %}
            <tr>
                <td>{{ p.round_number }}</td>
                <td>
                    {{ p.contribution }}
                </td>
            </tr>
        {% endfor %}
    </table>

  </div>
</div>

{{ formfields }}

{{ next_button }}

{% endblock %}

{{ block global_styles  }}
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
{{ endblock }}
{{ block global_scripts  }}
{{ endblock }}