{% load otree %}
<style>



    table.fixed_header tbody,
    table.fixed_header thead {
        display: block;
    }

    th {
        font-weight: bold;
    }


    .fixed_header tr:hover {
        background-color: lightgray;
    }

    .fixed_header tbody {
        border-top: 2px solid black;
    }

    .fixed_header td, thead th {
        min-width: 100px;
        border-right: 1px solid black;
        text-align: center;
    }

    .fixed_header td:last-child, thead th:last-child {
        border-right: none;
    }
</style>

Round {{ subsession.round_number }} corresponds to:
<ul>
    <li>Match: {{ match_number }}.</li>
    <li>Period: {{ period_number }}.</li>
</ul>

Match Details:
<ul>
    <li>This match lasts for {{ match_length }} rounds.</li>
    <li>The last round of this match is round {{ final_round }}.</li>
</ul>
Session details:
<ul>
    <li>The last round of the session is round {{ last_round }}.</li>
    <li>The longest match of the session is match {{ longest_match_id }}, which lasts for {{ longest_match }} rounds.
    </li>
    <li>Minimum session duration: {{ min_duration }} minutes </li>
    <li>Estimated session duration (15s per round): {{ estimated_duration}} minutes </li>
</ul>

Overview of Matches:
<table align=center class="fixed_header">
    <tbody>
    <thead>
    <tr>
        <th>Match</th>
        <th>First Round</th>
        <th>Last Round</th>
        <th>Game</th>
        <th>Cutoff</th>
        <th>CC Payoff</th>
    </tr>
    </thead>
    {% for k,v in match_info.items %}
        <tr style="width: 800px">
            <td>{{ k }}</td>
            <td>{{ v.first_round }}</td>
            <td>{{ v.last_round }}</td>
            <td>{{ v.game }}</td>
            <td>{{ v.delta }}</td>
            <td>{{ v.cc_payoff }}</td>
        </tr>

    {% endfor %}
    </tbody>
</table>