{{ block title }}
    Repeated Game of Random Length
{{ endblock }}

{{ block content }}

    <p>
        You are Player {{ player.id_in_group }}. The choice payoffs are again listed below:
    </p>

    <table style="margin-left:auto;margin-right:auto; width:100%">
        <tr>
            <th>&nbsp;</th>
            <th scope="colgroup" style="text-align: center; border-bottom: 5px solid black" colspan="3">Player 2</th>
        </tr>
        <tr>
            <th scope="rowgroup" style="text-align: center; border-right: 5px solid black" rowspan="5">Player 1</th>
        </tr>
        <tr>
            <th style="border-right: 2px solid #ddd; border-bottom: 2px solid #ddd">&nbsp;</th>
            <th style="text-align: center; border-bottom: 2px solid #ddd; border-right: 2px solid #ddd">1</th>
            <th style="text-align: center; border-bottom: 2px solid #ddd; border-right: 5px solid black">2</th>
        </tr>
        <tr>
            <th style="text-align: center; border-bottom: 2px solid #ddd; border-right: 2px solid #ddd">1</th>
            <td style="text-align: center;"> (32, 32) </td>
            <td style="text-align: center; border-right: 5px solid black"> (12, 50) </td>
        </tr>
        <tr>
            <th style="text-align: center; border-bottom: 5px solid black; border-right: 2px solid #ddd">2</th>
            <td style="text-align: center; border-bottom: 5px solid black"> (50, 12) </td>
            <td style="text-align: center; border-bottom: 5px solid black; border-right: 5px solid black"> (25, 25) </td>
        </tr>
    </table>

    <style>
        th, td {
            padding: 15px;
        }
        td {
            border-right: 2px solid #ddd;
            border-bottom: 2px solid #ddd;
        }
    </style>

    <br>

    <p>
        Select a move:
    </p>

    <div>
        <span>
            <button type="button" id="choose-1" onclick="submit1()">1</button>
        </span>
        <span>
            <button type="button" id="choose-2" onclick="submit2()">2</button>
        </span>
        
    </div><br>

    <script>
        function submit1() {
            liveSend({'choice': 1})
            document.getElementById("form").submit();
        }
        function submit2() {
            liveSend({'choice': 2})
            document.getElementById("form").submit();
        }
    </script>

    {{ formfields }}

{{ endblock }}